asder

.env

+VITE_APP_URL = http://118.25.178.150:7001
\ No newline at end of file

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "":"",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -41,6 +42,7 @@
     "redux": "^4.2.1",
     "simplebar-react": "^3.2.1",
     "styled-components": "^5.3.9",
+    "umi-request": "^1.4.0",
     "web-vitals": "^3.1.1"
   },
   "devDependencies": {

src/App.jsx

@@ -3,18 +3,32 @@ import { Provider, useSelector } from "react-redux";
 import CssBaseline from "@mui/material/CssBaseline";
 import Router from "./router";
 import { HelmetProvider } from "react-helmet-async";
-
+import React from "react";
 import "./App.less";
-// import IconButton from "@mui/material/IconButton";
-// import WbSunnyIcon from "@mui/icons-material/WbSunny";
-// import DarkModeIcon from "@mui/icons-material/DarkMode";
-// import { useDispatch } from "react-redux";
-// import { changetheme } from "@/store/theme";
+import Slide from "@mui/material/Slide";
+import { useDispatch } from "react-redux";
+import { changemessage } from "@/store/message";
 import ThemeProvider from "./theme";
+import Snackbar from "@mui/material/Snackbar";
+import MuiAlert from "@mui/material/Alert";
+import { AlertTitle } from "@mui/material";
+
+const Alert = React.forwardRef(function Alert(props, ref) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
 
 function Dom() {
-  // const dispatch = useDispatch();
-  // const curthemeconfig = useSelector((state) => state.theme);
+  const dispatch = useDispatch();
+  const message = useSelector((state) => state.message);
+  const handleClose = (event) => {
+    dispatch(
+      changemessage({
+        ...message,
+        open: false,
+      })
+    );
+  };
+
   // 自定义主题
   // const { palette } = useTheme();
   // const theme = useMemo(() => {
@@ -41,6 +55,21 @@ function Dom() {
         </IconButton>
       </div> */}
       <CssBaseline />
+      <Snackbar
+        open={message?.open}
+        TransitionComponent={(props) => <Slide {...props} direction="left" />}
+        {...message?.snackbar}
+        onClose={handleClose}
+      >
+        <Alert
+          severity={message?.type}
+          onClose={handleClose}
+          {...message.alert}
+        >
+          {message?.title ? <AlertTitle>{message?.title}</AlertTitle> : null}
+          {message?.content}
+        </Alert>
+      </Snackbar>
       <Router />
     </ThemeProvider>
   );

src/pages/login/index.jsx

 import React, { useState } from "react";
-import {
-  Button,
-  TextField,
-  Link,
-  Grid,
-  Box,
-  Typography
-} from "@mui/material";
+import { Button, TextField, Link, Grid, Box, Typography } from "@mui/material";
+import { doFetch } from "@/utils/doFetch";
 import "./index.less";
 
 function Login() {
@@ -17,7 +11,7 @@ function Login() {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-
+    doFetch({url:"/user/login",params:{}})
     // 非空校验
     if (!username) {
       setEmailError(true);
@@ -33,7 +27,9 @@ function Login() {
 
   return (
     <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
-      <Typography component="p" style={{textAlign:"center"}}>欢迎登录</Typography>
+      <Typography component="p" style={{ textAlign: "center" }}>
+        欢迎登录
+      </Typography>
 
       <TextField
         margin="normal"

src/store/index.jsx

 import { configureStore } from "@reduxjs/toolkit";
 import theme from "./theme";
-import nav from './nav'
+import nav from './nav';
+import message from './message';
 
 export default configureStore({
   reducer: {
     theme,
-    nav
+    nav,
+    message
   },
 });

src/store/message.jsx

+import { createSlice } from "@reduxjs/toolkit";
+
+const messageSlice = createSlice({
+  name: "message",
+  initialState: {
+    open:false,
+    snackbar:{
+      autoHideDuration:2000,
+      anchorOrigin:{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }
+    },
+    type:"success",
+    content:""
+  },
+  reducers: {
+    changemessage: (state, { payload }) => {
+      return payload;
+    },
+  },
+});
+
+export const { changemessage } = messageSlice.actions;
+
+export default messageSlice.reducer;

src/utils/doFetch.js

+import request from "./request";
+
+export async function doFetch({ url, params }) {
+  if (!url) {
+    return;
+  }
+  return request(url, {
+    method: "post",
+    data: params,
+  });
+}
+
+export async function postFetch({ url, params }) {
+  return request(url, {
+    method: "post",
+    data: params,
+  });
+}
+
+export async function getFetch({ url, params }) {
+  return request(url, {
+    method: "get",
+    params,
+  });
+}
+
+export async function formFetch({ url, params }) {
+  return request(url, {
+    method: "post",
+    data: params,
+    type: "form",
+  });
+}

src/utils/request.js

+/**
+ * request 网络请求工具
+ * 更详细的 api 文档: https://github.com/umijs/umi-request
+ */
+import { extend } from "umi-request";
+import { createBrowserHistory } from "history";
+import store from "@/store";
+import { changemessage } from "@/store/message";
+
+const history = createBrowserHistory();
+
+const prefix = import.meta.env.VITE_APP_URL;
+
+const codeMessage = {
+  200: "服务器成功返回请求的数据。",
+  201: "新建或修改数据成功。",
+  202: "一个请求已经进入后台排队（异步任务）。",
+  204: "删除数据成功。",
+  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
+  401: "用户没有权限（令牌、用户名、密码错误）。",
+  403: "用户得到授权，但是访问是被禁止的。",
+  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
+  406: "请求的格式不可得。",
+  410: "请求的资源被永久删除，且不会再得到的。",
+  422: "当创建一个对象时，发生一个验证错误。",
+  500: "服务器发生错误，请检查服务器。",
+  502: "网关错误。",
+  503: "服务不可用，服务器暂时过载或维护。",
+  504: "网关超时。",
+};
+/**
+ * 异常处理程序
+ */
+
+const errorHandler = (error) => {
+  const { response } = error;
+  if (response && response.status) {
+    const errorText = codeMessage[response.status] || response.statusText;
+    const { status, url } = response;
+
+    // const curmsg = store.getState().message;
+    // store.dispatch(
+    //   changemessage({
+    //     ...curmsg,
+    //     open: true,
+    //     title:response.status,
+    //     content: errorText,
+    //     type:"error",
+    //   })
+    // );
+  }
+
+  return response ? response : {};
+};
+/**
+ * 配置request请求时的默认参数
+ */
+
+const request = extend({
+  prefix, //前缀代理
+  errorHandler,
+  // 默认错误处理
+  credentials: "include", // 默认请求是否带上cookie
+});
+
+// request拦截器, 改变url 或 options.
+request.interceptors.request.use(async (url, options) => {
+  let token = localStorage.getItem("TOKENES");
+  if (token) {
+    const headers =
+      options.type == "form"
+        ? {
+            token: token,
+          }
+        : {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            token: token,
+          };
+    return {
+      url: url,
+      options: { ...options, headers: headers, useCache: true, ttl: 2000 },
+    };
+  }
+});
+
+// response拦截器, 处理response
+request.interceptors.response.use(async (response, options) => {
+  if (options.responseType == "blob") {
+    const data = await response.clone().blob();
+    let blobUrl = window.URL.createObjectURL(data);
+    const a = document.createElement("a");
+    a.style.display = "none";
+    let temp =
+      response.headers.get("Content-Disposition").split(";")[1].split("=")[1] ||
+      "";
+    let fileDefaultName = decodeURI(temp);
+    let pathname = "表格";
+    a.download = fileDefaultName || pathname + ".xls";
+    a.href = blobUrl;
+    a.click();
+    a.remove();
+  } else {
+    const data = await response.clone().json();
+    // 详情返回的response处理
+
+    console.log('====================================');
+    console.log(data);
+    console.log('====================================');
+    if (data?.code != "0000") {
+      const curmsg = store.getState().message;
+      store.dispatch(
+        changemessage({
+          ...curmsg,
+          open: true,
+          content: data?.message,
+          title:null,
+          type: "error",
+        })
+      );
+      if (data?.code == "0001" && window.location.href.indexOf("login") == -1) {
+        localStorage.clear();
+        history.replace("/user/login");
+      }
+    }
+  }
+
+  return response;
+});
+
+export default request;

yarn.lock

@@ -4698,6 +4698,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 enhanced-resolve@^5.10.0:
   version "5.12.0"
   resolved "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -5870,7 +5877,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.3:
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -6146,6 +6153,11 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -6228,6 +6240,14 @@ isexe@^2.0.0:
   resolved "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isomorphic-fetch@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmmirror.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
@@ -7313,6 +7333,14 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.npmmirror.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.npmmirror.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -8395,6 +8423,13 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.9.1:
+  version "6.11.1"
+  resolved "https://registry.npmmirror.com/qs/-/qs-6.11.1.tgz#6c29dff97f0c0060765911ba65cbc9764186109f"
+  integrity sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==
+  dependencies:
+    side-channel "^1.0.4"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -9991,6 +10026,14 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+umi-request@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/umi-request/-/umi-request-1.4.0.tgz#ed0e54e47f043d2be06e691477f0890383f9dd8a"
+  integrity sha512-OknwtQZddZHi0Ggi+Vr/olJ7HNMx4AzlywyK0W3NZBT7B0stjeZ9lcztA85dBgdAj3KVk8uPJPZSnGaDjELhrA==
+  dependencies:
+    isomorphic-fetch "^2.2.1"
+    qs "^6.9.1"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -10372,7 +10415,7 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.6.2:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.6.2:
   version "3.6.2"
   resolved "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
   integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==