左侧栏初步

.env.example

@@ -0,0 +1 @@
+REACT_APP_URL=

.gitignore

@@ -21,3 +21,11 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+yanr.lock
+package-lock.json
+
+.env
+.env.local
+.env.production
+.env.development

src/api/categories.ts

@@ -1,9 +0,0 @@
-import axios from "axios";
-
-export const getCategoriesAsync = (params: any) =>
-  axios.get("/categroy/findCategroy", {
-    params: params,
-  });
-
-export const addCategoriesAsync = (data: any) =>
-  axios.post("/categroy/addCategroy", data);

src/api/index.ts

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

src/api/internal/httpClient.ts

@@ -0,0 +1,117 @@
+import axios, { Axios, AxiosResponse } from "axios";
+import { message } from "antd";
+import { getToken, clearToken } from "../../utils/index";
+
+export class HttpClient {
+  axios: Axios;
+
+  constructor(url: string) {
+    this.axios = axios.create({
+      baseURL: url,
+      timeout: 15000,
+      withCredentials: false,
+    });
+
+    //拦截器注册
+    this.axios.interceptors.request.use(
+      (config) => {
+        const token = getToken();
+        token && (config.headers.Authorization = "Bearer " + token);
+        return config;
+      },
+      (err) => {
+        return Promise.reject(err);
+      }
+    );
+
+    this.axios.interceptors.response.use(
+      (response: AxiosResponse) => {
+        let status = response.data.status; //HTTP状态码
+        let code = response.data.code; //业务返回代码
+        let msg = response.data.msg; //错误消息
+
+        if (code === 0) {
+          return Promise.resolve(response);
+        } else {
+          message.error(msg);
+          return Promise.reject(response);
+        }
+      },
+      // 当http的状态码非0
+      (error) => {
+        let status = error.response.status;
+        if (status === 401) {
+          clearToken();
+          // 跳转到登录界面
+        } else if (status === 404) {
+          // 跳转到404页面
+        } else if (status === 403) {
+          // 跳转到无权限页面
+        } else if (status === 500) {
+          // 跳转到500异常页面
+        }
+        return Promise.reject(error.response);
+      }
+    );
+  }
+
+  get(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .get(url, {
+          params: params,
+        })
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  destroy(url: string) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .delete(url)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  post(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .post(url, params)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  put(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .put(url, params)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+}
+
+const APP_URL = process.env.REACT_APP_URL || "";
+
+const client = new HttpClient(APP_URL);
+
+export default client;

src/api/login.ts

@@ -0,0 +1,19 @@
+import client from "./internal/httpClient";
+
+export function login(
+  email: string,
+  password: string,
+  captchaKey: string,
+  captchaVal: string
+) {
+  return client.post("/backend/v1/auth/login", {
+    email: email,
+    password: password,
+    captcha_key: captchaKey,
+    captcha_val: captchaVal,
+  });
+}
+
+export function logout() {
+  return client.post("/backend/v1/auth/logout", {});
+}

src/pages/home/HomePage.tsx

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./HomePage.module.css";
 import { Outlet } from "react-router-dom";
-import { Header, LeftMenu } from "../../compenents";
+import { Header, LeftMenu, Footer } from "../../compenents";
+import { login } from "../../api/index";
 
 export const HomePage: React.FC = () => {
+  useEffect(() => {
+    login.login("1@qq.com", "123123", "1", "2");
+  }, []);
+
   return (
     <>
       <div className={styles["layout-wrap"]}>

src/utils/axios.ts

@@ -1,12 +0,0 @@
-import axios from "axios";
-
-axios.defaults.timeout = 10000;
-axios.defaults.headers.Authorization = "Bearer ";
-axios.defaults.headers.common["meedu-platform"] = "backend";
-axios.defaults.baseURL = "https://dev-local.meedu.vip/";
-
-// 响应拦截器
-axios.interceptors.response.use(
-  (res) => res.data, // 拦截到响应对象，将响应对象的 data 属性返回给调用的地方
-  (err) => Promise.reject(err)
-);

src/utils/index.ts

@@ -0,0 +1,11 @@
+export function getToken(): string {
+  return window.localStorage.getItem("playedu-backend-token") || "";
+}
+
+export function setToken(token: string) {
+  window.localStorage.setItem("playedu-backend-token", token);
+}
+
+export function clearToken() {
+    window.localStorage.removeItem("playedu-backend-token");
+  }

src/utils/menus.ts

@@ -1,51 +0,0 @@
-const menuList = [
-  {
-    title: "首页概览",
-    key: "/home",
-    icon: "icon-icon-study-n",
-    isPublic: true,
-  },
-  {
-    title: "网校装修",
-    icon: "icon-icon-decorate",
-    key: "/decoration",
-  },
-  {
-    title: "课程内容",
-    icon: "icon-icon-lesson",
-    key: "/course",
-    children: [
-      {
-        title: "视频",
-        icon: "",
-        key: "/vod",
-      },
-      {
-        title: "文章",
-        icon: "",
-        key: "/topic",
-      },
-      {
-        title: "试卷",
-        icon: "",
-        key: "/paper",
-      },
-    ],
-  },
-  {
-    title: "学员管理",
-    icon: "icon-icon-me-n",
-    key: "/user",
-  },
-  {
-    title: "证书管理",
-    icon: "icon-icon-operate",
-    key: "/certificate",
-  },
-  {
-    title: "系统设置",
-    icon: "icon-icon-setting-n",
-    key: "/system",
-  },
-];
-export default menuList;