登录页面初步

src/api/index.ts

@@ -1,3 +1,4 @@
 import * as login from "./login";
+import * as system from "./system";
 
-export {login}
+export { login, system };

src/api/login.ts

@@ -10,7 +10,7 @@ export function login(
     email: email,
     password: password,
     captcha_key: captchaKey,
-    captcha_val: captchaVal,
+    captcha_value: captchaVal,
   });
 }
 

src/api/system.ts

@@ -0,0 +1,10 @@
+import client from "./internal/httpClient";
+
+export function getImageCaptcha() {
+  return client.get("/backend/v1/system/image-captcha", {});
+}
+
+export function getUser() {
+    return client.get("/backend/v1/auth/detail", {});
+  }
+

src/pages/home/HomePage.module.css

@@ -26,3 +26,5 @@
   overflow-y: auto;
   background-color: #f1f2f9;
 }
+
+

src/pages/login/Login.module.css

@@ -0,0 +1,22 @@
+.login-content {
+  width: 100%;
+  float: left;
+  height: 100%;
+  background-color: #fff;
+}
+
+.login-box {
+  width: 1200px;
+  height: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 150px;
+}
+
+.captcha {
+  width: 120px;
+  height: 48px;
+  margin-left: 10px;
+  cursor: pointer;
+  cursor: pointer;
+}

src/pages/login/Login.tsx

@@ -1,6 +1,134 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./Login.module.css";
+import { Typography, Spin, Input, Button, message } from "antd";
+import { login, system } from "../../api/index";
+import { setToken } from "../../utils/index";
 
-export const Login: React.FC = () => {
-  return <h1>登录页面</h1>;
+export const Login: React.FC = (defaultState) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [captchaList, setCourse] = useState<any>(null);
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [captcha_val, setCaptcha_val] = useState<string>("");
+  const [captcha_key, setCaptcha_key] = useState<string>("");
+  const fetchData = () => {
+    setLoading(true);
+    system.getImageCaptcha().then((res: any) => {
+      setCourse(res.data);
+      setCaptcha_key(res.data.key);
+      setLoading(false);
+    });
+  };
+
+  const loginSubmit = (e: any) => {
+    if (!email) {
+      message.error("请输入账号");
+      return;
+    }
+    if (!password) {
+      message.error("请输入密码号");
+      return;
+    }
+    if (!captcha_val) {
+      message.error("请输入图片验证码");
+      return;
+    }
+    if (loading) {
+      return;
+    }
+    handleSubmit();
+  };
+
+  const handleSubmit = () => {
+    setLoading(true);
+    login
+      .login(email, password, captcha_key, captcha_val)
+      .then((res: any) => {
+        const token = res.data.token;
+        setToken(token);
+        setLoading(false);
+        getUser();
+      })
+      .catch((e) => {
+        setLoading(false);
+        setCaptcha_val("");
+        fetchData();
+      });
+  };
+
+  const getUser = () => {
+    system.getUser().then((res) => {
+      console.log(res);
+    });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  if (loading) {
+    return (
+      <Spin
+        size="large"
+        style={{
+          marginTop: 200,
+          marginBottom: 200,
+          marginLeft: "auto",
+          marginRight: "auto",
+          width: "100%",
+        }}
+      />
+    );
+  }
+  return (
+    <div className={styles["login-content"]}>
+      <div className={styles["login-box"]}>
+        <div className="float-left c-flex">
+          <div className="d-flex mr-24">
+            <Typography.Title>登录后台</Typography.Title>
+          </div>
+          <div className="d-flex mb-24">
+            <Input
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+              }}
+              style={{ width: 300 }}
+              placeholder="请输入账号"
+            />
+          </div>
+          <div className="d-flex mb-24">
+            <Input.Password
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+              }}
+              style={{ width: 300 }}
+              placeholder="请输入密码"
+            />
+          </div>
+          <div className="d-flex mb-24">
+            <Input
+              value={captcha_val}
+              style={{ width: 160 }}
+              placeholder="请输入验证码"
+              onChange={(e) => {
+                setCaptcha_val(e.target.value);
+              }}
+            />
+            <img
+              className={styles["captcha"]}
+              onClick={fetchData}
+              src={captchaList.image}
+              alt=""
+            />
+          </div>
+          <div className="d-flex">
+            <Button type="primary" danger onClick={loginSubmit}>
+              登录
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };

src/store/store.ts

@@ -1,3 +1,4 @@
+
 import { createStore } from "redux";
 interface IAction {
   type: string;

src/utils/index.css

@@ -79,6 +79,12 @@
   justify-content: space-between;
 }
 
+.c-flex {
+  display: flex;
+  flex-direction: column;
+ align-items: center;
+}
+
 .primary {
   color: #ff4d4f;
 }