初步实现登录
parent
7b1a57323e
commit
06d6137e85
|
@ -0,0 +1,5 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
|
@ -0,0 +1,6 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/FinancialReimbursementSystem_frontend.iml" filepath="$PROJECT_DIR$/.idea/FinancialReimbursementSystem_frontend.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
File diff suppressed because it is too large
Load Diff
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
@ -10,8 +11,12 @@
|
|||
"@types/node": "^16.18.10",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"antd": "^5.1.0",
|
||||
"axios": "^1.2.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.6.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>智能财务报销系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
After Width: | Height: | Size: 104 KiB |
|
@ -1,8 +1,21 @@
|
|||
#root {
|
||||
height:100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
html{
|
||||
height:100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
body {
|
||||
height:100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
|
@ -1,15 +1,18 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import 'antd/dist/reset.css';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import {RouterProvider} from "react-router-dom";
|
||||
import router from "./router/router";
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<RouterProvider router={router}/>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
|
||||
export interface Token {
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
}
|
||||
|
||||
export interface Staff {
|
||||
managingDepartment: Department;
|
||||
staffDepartments: Department[];
|
||||
staffName: string;
|
||||
}
|
||||
|
||||
export interface Department {
|
||||
departmentId: number;
|
||||
departmentName: string;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
|
||||
import type { RootState, AppDispatch } from './store';
|
||||
|
||||
// Use throughout your app instead of plain `useDispatch` and `useSelector`
|
||||
export const useAppDispatch = () => useDispatch<AppDispatch>();
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
|
@ -0,0 +1,17 @@
|
|||
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
|
||||
import {Token} from "./Staff"
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
// token: Token,
|
||||
},
|
||||
});
|
||||
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppThunk<ReturnType = void> = ThunkAction<
|
||||
ReturnType,
|
||||
RootState,
|
||||
unknown,
|
||||
Action<string>
|
||||
>;
|
|
@ -0,0 +1,10 @@
|
|||
import React, { FC } from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const HomeView: FC = () => (
|
||||
<div className="LoginView">
|
||||
<Button type="primary">Home</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default HomeView;
|
|
@ -0,0 +1,9 @@
|
|||
div.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/login-bg.png) center no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -0,0 +1,101 @@
|
|||
import React from 'react';
|
||||
import {Button, Form, Input} from 'antd';
|
||||
import {LockOutlined, UserOutlined} from '@ant-design/icons';
|
||||
import './LoginView.css';
|
||||
import loginImg from '../../assets/login.png'
|
||||
import axios from "axios";
|
||||
import {baseUrl} from "../../utils/axiosInstance";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
|
||||
function LoginView() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log(values)
|
||||
axios.post(baseUrl + 'login', values).then(function (response) {
|
||||
console.log(response.data)
|
||||
|
||||
//models.commit('setStaff', response.data.data)
|
||||
navigate('/')
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
//showAlert.value = true
|
||||
});
|
||||
console.log('Success:', values);
|
||||
};
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="background">
|
||||
<div style={{
|
||||
width: '848px',
|
||||
height: '456px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '6px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '50%', height: '100%', backgroundColor: '#ebf0f4', borderRadius: '6px 0 0 6px',
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'
|
||||
}}>
|
||||
<img style={{width: '85%'}} src={loginImg}/>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'stretch'
|
||||
}}>
|
||||
<div style={{
|
||||
margin: '40px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<p style={{marginBottom: '10px', fontSize: '40px', fontWeight: 'bold'}}>登录</p>
|
||||
<p style={{marginBottom: '20px', fontSize: '14px'}}>欢迎回来,请登录以智能财务报销系统</p>
|
||||
|
||||
<Form
|
||||
name="basic"
|
||||
initialValues={{remember: true}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
name="staffId"
|
||||
rules={[{required: true, message: '请输入用户名'}]}
|
||||
>
|
||||
<Input prefix={<UserOutlined/>} placeholder="用户名"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="staffPassword"
|
||||
rules={[{required: true, message: '请输入密码'}]}
|
||||
>
|
||||
<Input.Password prefix={<LockOutlined/>}
|
||||
placeholder="密码"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" style={{width: '100%'}}>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
export default LoginView;
|
|
@ -0,0 +1,15 @@
|
|||
import {createBrowserRouter} from "react-router-dom";
|
||||
import LoginView from "../pages/Login/LoginView";
|
||||
import HomeView from "../pages/HomeView";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/login",
|
||||
element: <LoginView/>,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
element: <HomeView/>,
|
||||
},
|
||||
]);
|
||||
export default router
|
|
@ -0,0 +1,34 @@
|
|||
import axios, {AxiosRequestConfig, AxiosResponse} from "axios";
|
||||
|
||||
//export const baseUrl = "https://www.hammer-hfut.tk/api/"
|
||||
export const baseUrl = "http://127.0.0.1:4523/m1/2116708-0-default/"
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: baseUrl,
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
axiosInstance.interceptors.request.use(
|
||||
function (config: AxiosRequestConfig) {
|
||||
console.log(config)
|
||||
|
||||
return config
|
||||
},
|
||||
function (error) {
|
||||
return Promise.reject(error)
|
||||
})
|
||||
|
||||
axiosInstance.interceptors.response.use(
|
||||
function (response: AxiosResponse) {
|
||||
// 2xx 范围内的状态码都会触发该函数。
|
||||
|
||||
return response
|
||||
},
|
||||
function (error) {
|
||||
console.log(error.response)
|
||||
if (error.response.status === 401) {
|
||||
|
||||
}
|
||||
return Promise.reject(error)
|
||||
});
|
||||
export default axiosInstance
|
Loading…
Reference in New Issue