React day9上：鉴权页面&代理

20_React.js_VIP22/day-8下/code/react-project-demo/package.json

@@ -9,6 +9,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.6.1",
+    "axios": "^1.4.0",
+    "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.7",

20_React.js_VIP22/day-8下/code/react-project-demo/src/Layout/index.jsx

@@ -52,7 +52,7 @@ function LayoutAdmin() {
   useEffect(() => {
     let selectedItem = items.find((i) => i.url === pathname);
     setSelectedKey(selectedItem.key);
-  }, [pathname]);
+  }, [pathname, items]);
 
   return (
     <Layout style={{ height: '100vh' }}>

20_React.js_VIP22/day-8下/code/react-project-demo/src/api/user.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+/**
+ * [登录接口]
+ *
+ * @param   {[object]}  user  [用户信息]
+ *
+ * @return  {[type]}        [return Promise]
+ */
+export function login(user) {
+  return axios.post('/api/login', user);
+}

20_React.js_VIP22/day-8下/code/react-project-demo/src/pages/Login/index.jsx

@@ -0,0 +1,82 @@
+import { Button, Form, Input } from 'antd';
+import { login } from '../../api/user';
+import './index.scss';
+
+const onFinish = async (values) => {
+  let { data } = await login(values);
+
+  console.log(data);
+};
+
+function Login() {
+  return (
+    <div className="login_container">
+      <div className="login">
+        <h3>登入系统</h3>
+        <Form
+          name="basic"
+          labelCol={{
+            span: 6,
+          }}
+          wrapperCol={{
+            span: 16,
+          }}
+          style={{
+            maxWidth: 500,
+          }}
+          onFinish={onFinish}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="账号："
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: '请输入账号...',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="密码："
+            name="password"
+            rules={[
+              {
+                required: true,
+                message: '请输入密码...',
+              },
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+
+          <Form.Item
+            wrapperCol={{
+              offset: 4,
+              span: 18,
+            }}
+          >
+            <Button type="primary" htmlType="submit" block>
+              登录
+            </Button>
+          </Form.Item>
+          <Form.Item
+            wrapperCol={{
+              offset: 4,
+              span: 18,
+            }}
+          >
+            <Button type="link" block>
+              注册
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

20_React.js_VIP22/day-8下/code/react-project-demo/src/pages/Login/index.scss

@@ -0,0 +1,25 @@
+.login_container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+
+  .login {
+    width: 540px;
+    
+    padding-top: 24px;
+
+    border: 1px solid #ccc;
+    border-radius: 8px;
+
+    box-shadow: 0 0 2px 1px #ccc, inset 0 0 3px 2px #ccc;;
+
+
+    h3 {
+      text-align: center;
+    }
+  }
+}

20_React.js_VIP22/day-8下/code/react-project-demo/src/router/index.js

@@ -1,13 +1,19 @@
 import { createBrowserRouter } from 'react-router-dom';
 
-import { lazy, Suspense } from 'react';
+import { lazy } from 'react';
 import LayoutAdmin from '../Layout';
 
 import Home from '../pages/Home';
 import withSuspense from '../utils/withSuspense';
+
 const About = lazy(() => import('../pages/About'));
+const Login = lazy(() => import('../pages/Login'));
 
 const router = createBrowserRouter([
+  {
+    path: '/login',
+    element: withSuspense(Login),
+  },
   {
     path: '/',
     element: <LayoutAdmin />,

20_React.js_VIP22/day-8下/code/react-project-demo/src/setupProxy.js

@@ -0,0 +1,12 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:4000',
+      changeOrigin: true,
+      pathRewrite: { '^/api': '' },
+    })
+  );
+};

20_React.js_VIP22/day-8下/code/react-project-demo/yarn.lock

@@ -2981,6 +2981,15 @@ axe-core@^4.6.2:
   resolved "https://registry.npmmirror.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
   integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
 
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmmirror.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
@@ -4808,7 +4817,7 @@ flatted@^3.1.0:
   resolved "https://registry.npmmirror.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -4848,6 +4857,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -5253,7 +5271,7 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@^2.0.3:
+http-proxy-middleware@^2.0.3, http-proxy-middleware@^2.0.6:
   version "2.0.6"
   resolved "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
   integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
@@ -7749,6 +7767,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"