初步实现登录

main
wuyize 2022-12-23 23:00:44 +08:00
parent 7b1a57323e
commit 06d6137e85
20 changed files with 2148 additions and 10 deletions

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

View File

@ -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>

View File

@ -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>

8
.idea/modules.xml Normal file
View File

@ -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>

6
.idea/vcs.xml Normal file
View File

@ -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>

1868
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"

View File

@ -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>

BIN
src/assets/login-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -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;
} }

View File

@ -1,16 +1,19 @@
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>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

20
src/models/Staff.ts Normal file
View File

@ -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;
}

6
src/models/hooks.ts Normal file
View File

@ -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;

17
src/models/store.ts Normal file
View File

@ -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>
>;

10
src/pages/HomeView.tsx Normal file
View File

@ -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;

View File

@ -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;
}

View File

@ -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;

15
src/router/router.tsx Normal file
View File

@ -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

View File

@ -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