初步实现登录
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",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@reduxjs/toolkit": "^1.9.1",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
|
@ -10,8 +11,12 @@
|
||||||
"@types/node": "^16.18.10",
|
"@types/node": "^16.18.10",
|
||||||
"@types/react": "^18.0.26",
|
"@types/react": "^18.0.26",
|
||||||
"@types/react-dom": "^18.0.9",
|
"@types/react-dom": "^18.0.9",
|
||||||
|
"antd": "^5.1.0",
|
||||||
|
"axios": "^1.2.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-redux": "^8.0.5",
|
||||||
|
"react-router-dom": "^6.6.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<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.
|
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`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>智能财务报销系统</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<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 {
|
body {
|
||||||
|
height:100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
margin: 0;
|
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;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,18 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
import {RouterProvider} from "react-router-dom";
|
||||||
|
import router from "./router/router";
|
||||||
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(
|
const root = ReactDOM.createRoot(
|
||||||
document.getElementById('root') as HTMLElement
|
document.getElementById('root') as HTMLElement
|
||||||
);
|
);
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<RouterProvider router={router}/>
|
||||||
</React.StrictMode>
|
</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