amass/newsmy_recorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

整理store。

Browse Source
This commit is contained in:
luocai 2023-06-07 19:40:54 +08:00
parent fcaae1860c
commit 6e11f7155c
11 changed files with 104 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
"http-proxy-middleware": "^2.0.6",
"md5": "^2.3.0",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-redux": "^8.0.7",
"react-router-dom": "^6.11.2",

6
src/App.js
View File

@ -1,14 +1,16 @@
import './App.css';
import { Routes, Route, Redirect } from 'react-router-dom'
import { Routes, Route, Navigate } from 'react-router-dom'
import { useCookies } from 'react-cookie';
import LoginPage from './LoginPage';
import MainPage from './MainPage';
function App() {
const [cookies] = useCookies(['accessToken']);
return (
<div className="App">
<Routes>
<Route exact path="/" element={cookies.accessToken ? <MainPage /> : <Navigate to="/login" />} />
<Route exact path="/login" element={<LoginPage />} />
<Route exact path="/" element={<MainPage />} />
</Routes>
</div>
);

46
src/LoginPage.js
View File

@ -1,11 +1,10 @@
import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import yzs from "./business/request.js";
import styles from './LoginPage.module.css';
import { useSelector, useDispatch } from 'react-redux'
import { setAddress } from "./business/ipSlice.js"
import { setFlushToken, setAccessToken, setUserInfo, selectFlushToken } from "./business/userSlice.js"
import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
import { setList } from "./business/recorderSlice.js"
import logo from './assets/logo.png'; // Tell webpack this JS file uses this image
import { Container, Tab, Box } from '@mui/material';
import TabPanel from '@mui/lab/TabPanel';
@ -13,7 +12,7 @@ import { TabList } from '@mui/lab';
import TabContext from '@mui/lab/TabContext';
import DynamicCodeForm from './components/DynamicCodeForm.js';
import PasswordForm from './components/PasswordForm.js';
import { useCookies } from 'react-cookie';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const theme = createTheme({
@ -33,17 +32,20 @@ const theme = createTheme({
});
export default function () {
const [cookies, setCookie] = useCookies(['accessToken']);
const [value, setValue] = useState("1");
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const account = useSelector(state => state.user.account)
const password = useSelector(state => state.user.password)
const handleChange = (event, newValue) => {
setValue(newValue);
};
const accessToken = useSelector(state => state.user.accessToken)
const flushToken = useSelector(state => state.user.flushToken)
const udid = useSelector(state => state.user.udid)
const ip = useSelector(state => state.ip.value)
const flushToken = useSelector(selectFlushToken)
const dispatch = useDispatch()
const getIp = async () => {
@ -51,7 +53,7 @@ export default function () {
const response = await fetch("https://ipapi.co/json/")
const data = await response.json()
// Set the IP address to the constant `ip`
dispatch(setAddress(data.ip));
dispatch(setUdid(data.ip));
}
// Run `getIP` function above just once when the page is rendered
@ -60,27 +62,26 @@ export default function () {
}, [])
const handleInputChange = (event) => {
const { name, value } = event.target;
if (name === 'username') setUsername(value);
if (name === 'password') setPassword(value);
};
const debug_test = () => {
console.log("accessToken", accessToken);
}
const handleSubmit = (event) => {
event.preventDefault();
console.log(`Username: ${username}\nPassword: ${password} ip: ${ip}`);
console.log(`account: ${account}\nPassword: ${password} udid: ${udid}`);
yzs.login(ip.payload).then(token => {
yzs.login(udid, account, password).then(token => {
dispatch(setFlushToken(token));
yzs.get_access_token(ip.payload, token).then(token => {
yzs.get_access_token(udid, token).then(token => {
// yzs.update_access_token(ip.payload, token);
dispatch(setAccessToken(token));
yzs.get_user_info(ip.payload, token).then(info => {
setCookie("accessToken", token)
yzs.get_user_info(udid, token).then(info => {
dispatch(setUserInfo(info));
let passportId = info.passportId;
yzs.user_select(ip.payload, token).then(info => {
yzs.get_record_list(token, passportId)
yzs.user_select(udid, token).then(info => {
yzs.get_record_list(token, passportId).then(list => {
dispatch(setList(list.result));
});
})
});
@ -136,6 +137,7 @@ export default function () {
</Container>
</ThemeProvider >
<Button variant="contained" onClick={debug_test}>测试</Button>
</div>

22
src/business/ipSlice.js
View File

@ -1,22 +0,0 @@
import { createSlice } from '@reduxjs/toolkit'
export const ipSlice = createSlice({
name: 'ip',
initialState: {
value: ""
},
reducers: {
setAddress: (state, ip) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value = ip;
},
}
})
// Action creators are generated for each case reducer function
export const { setAddress } = ipSlice.actions
export default ipSlice.reducer

18
src/business/recorderSlice.js Normal file
View File

@ -0,0 +1,18 @@
import { createSlice } from '@reduxjs/toolkit'
export const recorderSlice = createSlice({
name: 'user',
initialState: {
list: [],
},
reducers: {
setList: (state, action) => {
state.list = action.payload;
}
}
})
// Action creators are generated for each case reducer function
export const { setList } = recorderSlice.actions
export default recorderSlice.reducer

14
src/business/request.js
View File

@ -129,23 +129,21 @@ const yzs = {
'timestamp': timestamp,
'signature': sig,
},
}).then(response => {
console.log(response);
response.text()
}).then((json) => {
}).then(response => response.json()
).then((json) => {
console.log(json)
return json;
});
},
login: function (ip) {
login: function (udid, account, password) {
let md5 = require('md5');
let body = {};
body.subsystemId = 16;
body.clientId = ip;
body.clientId = udid;
body.timestamp = parseInt(new Date().getTime() / 1000);
body.account = "13682423271";
body.password = md5("yzs123456");
body.account = account;
body.password = md5(password);
return fetch("http://116.198.37.53:8080/rest/v2/user/login", {
method: "POST",

4
src/business/store.js
View File

@ -1,10 +1,10 @@
import { configureStore } from '@reduxjs/toolkit'
import ipReducer from "./ipSlice.js"
import userReducer from "./userSlice.js"
import recorderReducer from "./recorderSlice.js";
export default configureStore({
reducer: {
ip: ipReducer,
user: userReducer,
recorder: recorderReducer,
}
})

34
src/business/userSlice.js
View File

@ -3,31 +3,49 @@ import { createSlice } from '@reduxjs/toolkit'
export const userSlice = createSlice({
name: 'user',
initialState: {
udid: "", // web端使用ip地址作为udid
flushToken: "",
accessToken: "",
info: {},
passportId: 0,
createTime: "",
userName: "",
agreeAgreement: true,
account: "13682423271",
password: "yzs123456",
verificationCode: "",
},
reducers: {
setUdid: (state, action) => {
state.udid = action.payload;
},
setFlushToken: (state, token) => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.flushToken = token;
state.flushToken = token.payload;
},
setAccessToken: (state, token) => {
state.accessToken = token;
state.accessToken = token.payload;
},
setUserInfo: (state, info) => {
state.info = info;
// state.createTime = info.createTime;
// state.userName = info.userName;
state.passportId = info.payload.passportId
state.createTime = info.payload.createTime
state.userName = info.payload.userName
},
setAccount: (state, action) => {
state.account = action.payload;
},
setPassword: (state, action) => {
state.password = action.payload;
},
setVerificationCode: (state, action) => {
state.verificationCode = action.payload;
},
}
})
// Action creators are generated for each case reducer function
export const { setFlushToken, setAccessToken, setUserInfo } = userSlice.actions
export const selectFlushToken = (state) => state.user.flushToken
export const { setUdid, setFlushToken, setAccessToken, setUserInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
export default userSlice.reducer

16
src/components/DynamicCodeForm.js
View File

@ -3,16 +3,18 @@ import { CheckBox } from '@mui/icons-material';
import React, { useState } from 'react';
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux'
import { setAccount, setVerificationCode } from "../business/userSlice.js"
export default function () {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const account = useSelector(state => state.user.account)
const verificationCode = useSelector(state => state.user.verificationCode)
const handleInputChange = (event) => {
const { name, value } = event.target;
if (name === 'username') setUsername(value);
if (name === 'password') setPassword(value);
if (name === 'username') dispatch(setAccount(value));
if (name === 'password') dispatch(setVerificationCode(value));
};
return <Container disableGutters={true}
@ -26,7 +28,7 @@ export default function () {
name="username"
label="请输入手机号码"
variant="outlined"
value={username}
value={account}
color="primary"
fullWidth
onChange={handleInputChange}
@ -46,7 +48,7 @@ export default function () {
label="请输入验证码"
type="password"
variant="outlined"
value={password}
value={verificationCode}
onChange={handleInputChange}
InputProps={{
startAdornment: (

15
src/components/PasswordForm.js
View File

@ -2,16 +2,17 @@ import React, { useState } from 'react';
import { Container, TextField, Button, InputAdornment } from "@mui/material";
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux'
import { setAccount, setPassword } from "../business/userSlice.js"
export default function () {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const dispatch = useDispatch();
const account = useSelector(state => state.user.account)
const password = useSelector(state => state.user.password)
const handleInputChange = (event) => {
const { name, value } = event.target;
if (name === 'username') setUsername(value);
if (name === 'password') setPassword(value);
if (name === 'username') dispatch(setAccount(value));
if (name === 'password') dispatch(setPassword(value));
};
return <Container disableGutters={true}
@ -24,7 +25,7 @@ export default function () {
name="username"
label="请输入手机号码"
variant="outlined"
value={username}
value={account}
fullWidth
onChange={handleInputChange}
InputProps={{

9
src/index.js
View File

@ -6,14 +6,17 @@ import store from './business/store';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { CookiesProvider } from 'react-cookie';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter >
<App />
</BrowserRouter>
<CookiesProvider>
<BrowserRouter >
<App />
</BrowserRouter>
</CookiesProvider>
</Provider>
</React.StrictMode>
);