商品列表-上

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

@@ -1,7 +1,11 @@
 import { Layout, Menu } from 'antd';
 import { useEffect, useState } from 'react';
 import { Outlet, Link, useLocation } from 'react-router-dom';
-import { HomeOutlined, EllipsisOutlined } from '@ant-design/icons';
+import {
+  HomeOutlined,
+  EllipsisOutlined,
+  ProfileOutlined,
+} from '@ant-design/icons';
 
 import './index.scss';
 
@@ -43,6 +47,12 @@ function LayoutAdmin() {
       label: <Link to="/about">关于</Link>,
       url: '/about',
     },
+    {
+      key: '03',
+      icon: <ProfileOutlined />,
+      label: <Link to="/goods/list">商品列表</Link>,
+      url: '/goods/list',
+    },
   ]);
 
   let { pathname } = useLocation();

20_React.js_VIP22/day-9/code/react-project-demo/src/api/goods.js

@@ -0,0 +1,7 @@
+//! 商品接口API
+import http from '../utils/http';
+
+export function getAllGoods() {
+  console.log(http);
+  return http.get('/goods/list');
+}

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/GoodsList/goods.scss

@@ -0,0 +1,23 @@
+.goods-list {
+  width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 12px;
+  min-height: 300px;
+  background-color: #fff;
+
+  .search-bar {
+    display: flex;
+    flex-direction: column;
+    height: 48px;
+    align-items: center;
+    justify-content: space-around;
+
+    text-align: left;
+
+    .ant-input, .ant-checkbox-wrapper {
+      width: 400px;
+    
+    }
+  }
+}

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/GoodsList/goodsSlice.js

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { getAllGoods } from '../../api/goods';
+
+export const goodsSlice = createSlice({
+  name: 'goods',
+  initialState: {
+    list: [],
+  },
+  reducers: {
+    setList(state, { payload }) {
+      state.list = payload;
+    },
+  },
+});
+
+export default goodsSlice.reducer;
+
+export const { setList } = goodsSlice.actions;
+
+export const getGoodsList = () => async (dispath) => {
+  // 发起网络请求
+  let { code, data, msg } = await getAllGoods();
+};

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/GoodsList/index.jsx

@@ -0,0 +1,23 @@
+import { Input, Checkbox } from 'antd';
+import './goods.scss';
+import store from '../../store';
+import { getGoodsList } from './goodsSlice';
+
+function GoodsList() {
+  return (
+    <div className="goods-list">
+      <div className="search-bar">
+        <Input placeholder="通过商品名检索..." />
+        <Checkbox>仅显示有库存的商品</Checkbox>
+      </div>
+      <table></table>
+    </div>
+  );
+}
+
+export default GoodsList;
+
+export const goodsLoader = () => {
+  store.dispatch(getGoodsList());
+  return null;
+};

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

@@ -7,8 +7,11 @@ import RequireAuth from '../components/RequireAuth';
 import Home from '../pages/Home';
 import withSuspense from '../utils/withSuspense';
 
+import { goodsLoader } from '../pages/GoodsList';
+
 const About = lazy(() => import('../pages/About'));
 const Login = lazy(() => import('../pages/Login'));
+const GoodsList = lazy(() => import('../pages/GoodsList'));
 
 const router = createBrowserRouter([
   {
@@ -28,9 +31,14 @@ const router = createBrowserRouter([
         element: <Home />,
       },
       {
-        path: '/about',
+        path: 'about',
         element: withSuspense(About),
       },
+      {
+        path: 'goods/list',
+        loader: goodsLoader,
+        element: withSuspense(GoodsList),
+      },
     ],
   },
 ]);

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

@@ -1,11 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit';
 import loadingReducer from './slice/loading';
 import userReducer from './slice/user';
+import goodsReducr from '../pages/GoodsList/goodsSlice';
 
 const store = configureStore({
   reducer: {
     loader: loadingReducer,
     user: userReducer,
+    goods: goodsReducr,
   },
 });
 

20_React.js_VIP22/day-9/code/react-project-demo/src/utils/http.js

@@ -0,0 +1,43 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: '/api/v1',
+  timeout: 2000,
+});
+
+// 加入拦截器
+// 添加请求拦截器
+axiosInstance.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    //! 将token信息携带上
+    let token = localStorage.getItem('token');
+    token && (config.headers['Authorization'] = token);
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+axiosInstance.interceptors.response.use(
+  function (response) {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    // 401错误处理
+    if (error.response.status == 401) {
+      //! 提示用户 未登录或者 登录超时
+      //! 页面重定向到 登录上
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;