IT评测·应用市场-qidao123.com

标题: React快速上手到项目实战总篇 [打印本页]
作者: 吴旭华    时间: 2025-1-6 08:07
标题: React快速上手到项目实战总篇
React核心代价与前置知识

时刻保持对知识的渴望 家人们 开学!!!
   核心代价
  
  使用vite创建Recat项目


开发规范

使用 prettier & eslint 规范开发

  1. #eslint :
  2. npm install eslint@typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  4. #prettier:
  5. npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
复制代码
vite和 webpack的区别
webpack是一个非常盛行的前端打包工具 比较经典 Create-React-App 是使用webpack作为打包工具的
vite 既是构建工具 又是打包工具
vite的特点：
React JSX语法

内容 ：
JSX特点:
标签



属性

和html根本相似

如下

在JSX中插入js变量


   代码案例
  

条件判定

​ 常见的if else 可以通过{}的方式实现，但是在JSX中代码一多就显得不敷实用了 以下三种方法可以解决：

比如这样：反之如果flag等于false 就不会出现hello

结果：

三元运算符：flag为判定条件 来控制标签的表现

结果：

函数：
  1. function isShowHello(){
  2.   if (flag)return <p>show hello</p>
  3.   return <p>defaultHello</p>
  4. }
复制代码

结果 ：

循环


   实现
  1. const list = [
  2.   {username:'zhangsan', name:"张三"},
  3.   {username:'shuangyue', name:"双月"},
  4.   {username:'lisi', name:"李四"},
  5. ]
  7.      {/*循环*/}
  8.         <div>
  9.           {list.map(user=>{
  10.             const {username,name} = user
  11.            return <li key={username}>{name}</li>
  12.           })}
  13.         </div>
复制代码
结果：

PS ： 不发起使用 index 如 :

因为我们的key 必要具有唯一性
小结实战 列表页

开发一个列表页

调整一下表现的jsx

包管这个代码结构简洁 ，然后就可以开始开发了
  1. import React from 'react';
  2. import './App1.css';
  4. function App() {
  5.     const questionList = [
  6.         {id: 'q1', title: '问卷1', isPublished: true},
  7.         {id: 'q2', title: '问卷2', isPublished: true},
  8.         {id: 'q3', title: '问卷3', isPublished: true},
  9.         {id: 'q4', title: '问卷4', isPublished: false}
  10.     ]
  12.     function edit(id) {
  13.         console.log('edit', id);
  14.     }
  16.     return (<div>
  17.         <h1>列表详情页</h1>
  18.         <div>
  19.             {questionList.map(question => {
  20.                 const {id, title, isPublished} = question;
  21.                 return <div key={id} className="list-item">
  22.                     &nbsp;
  23.                     <strong>{title}</strong>
  24.                     &nbsp;
  25.                     {isPublished ? <span style={{color: "green"}}>已发布</span> : <span>未发布</span>}
  26.                     &nbsp;
  27.                     <button onClick={() => edit(id)}>编辑问卷</button>
  28.                 </div>
  29.             })}
  30.         </div>
  31.     </div>)
  33. }
  35. export default App;
复制代码
  css
  1. .list-item {
  2.     border: 1px solid #ccc;
  3.     padding: 10px;
  4.     margin-bottom: 16px;
  5.     display: flex;
  6.     justify-content: center;
  7. }
复制代码
  结果
  

组件

react 齐备皆是组件

   组件拆分的代价和意义
  
好的组件化 逻辑是清楚的 更能提拔开发服从并且更加的雅观易读

我们可以将组件理解成一个一个的函数
使用我们之前的列表页代码 拆分成组件 list1

然后用improt的方式 引入到listdemo中

这样我们的总框架就没有那么多的代码冗余 必要修改对应的代码 只必要寻找对应的组件文件即可
属性 props


props 实在就是实现差异化组件信息转达的一种手段
   实践
  将之前循环内表现数据的div拆出来抽象成组件：QuestCard.tsx 。 CSS还是和之前的内容一样
使用 ts主要是方便传入泛型
   QuestCard.tsx
  1. import React, {FC} from "react";
  2. import './QuestCard.css'
  4. type proptype = {
  5.     id: string,
  6.     title: string,
  7.     isPublished: boolean
  8. }
  9. export const QuestCard: FC<proptype> = (props) => {
  10.     const {id, title, isPublished} = props;
  12.     function edit(id) {
  13.         console.log('edit', id);
  14.     }
  16.     return (
  17.         <div key={id} className="list-item">
  18.             &nbsp;
  19.             <strong>{title}</strong>
  20.             &nbsp;
  21.             {isPublished ? <span style={{color: "green"}}>已发布</span> : <span>未发布</span>}
  22.             &nbsp;
  23.             <button onClick={() => edit(id)}>编辑问卷</button>
  24.         </div>)
  25. }
复制代码

改造list1.jsx 这样就将表现问卷卡片抽取出来为一个独立的组件了
  1. import React from "react";
  2. import './list1.css';
  3. import {QuestCard} from "./QuestCard";
  5. export const List1 = () => {
  6.     const questionList = [
  7.         {id: 'q1', title: '问卷1', isPublished: true},
  8.         {id: 'q2', title: '问卷2', isPublished: true},
  9.         {id: 'q3', title: '问卷3', isPublished: true},
  10.         {id: 'q4', title: '问卷4', isPublished: false}
  11.     ]
  14.     return (
  15.         <div>
  16.             <h1>列表详情页</h1>
  17.             <div>
  18.                 {questionList.map(question => {
  19.                     const {id, title, isPublished} = question;
  20.                     return <QuestCard key={id} id={id} title={title} isPublished={isPublished}/>
  21.                 })}
  22.             </div>
  23.         </div>)
  25. }
复制代码
小结：

   结果
  

children

场景: 当我们把内容签到在子组件标签中时,父组件会自动的在名为 children的prop中担当内容

子组件转达父组件

顾名思义 实在就是子组件给父组件转达信息
  1. function Son({onGetSonMsg}) {
  2. //     son 中的数据
  3.     const sonMsg = 'this is son msg';
  4.     return <div>this is son
  5.         <button onClick={() => onGetSonMsg(sonMsg)}>sendMsg</button>
  6.     </div>
  7. }
  9. function AppDemo() {
  10.     const [msg, setMsg] = useState('')
  12.     const getMsg = (msg) => {
  13.         console.log(msg)
  14.         // msg = '我是信息'  这么改是无效的
  15.         setMsg(msg)
  16.     }
  17.     return <div>
  18.         this is APP Son send msg =>{msg}
  19.         <Son onGetSonMsg={getMsg}/>
  20.     </div>
  21. }
复制代码
兄弟组件转达

使用状态提拔实现兄弟组件通讯


   代码
  1. import {useState} from "react";
  3. function A({onGetAName}) {
  4.     const name = "a name"
  5.     return <div>this is A
  6.         <button onClick={() => onGetAName(name)}>send</button>
  7.     </div>
  8. }
  10. function B({pushAName}) {
  11.     return <div>this is B
  12.         {pushAName}
  13.     </div>
  14. }
  16. function AppDemo() {
  17.     const [aName, setAName] = useState('');
  18.     const getAName = (name) => {
  19.         console.log(name)
  20.         setAName(name)
  21.     }
  22.     return <div>
  23.         this is app
  24.         <A onGetAName={getAName}/>
  25.         <B pushAName={aName}/>
  26.     </div>
  27. }
  30. export default AppDemo;
  31. function A({onGetAName}) {
  32.     const name = "a name"
  33.     return <div>this is A
  34.         <button onClick={() => onGetAName(name)}>send</button>
  35.     </div>
  36. }
  38. function B({pushAName}) {
  39.     return <div>this is B
  40.         {pushAName}
  41.     </div>
  42. }
  44. function AppDemo() {
  45.     const [aName, setAName] = useState('');
  46.     const getAName = (name) => {
  47.         console.log(name)
  48.         setAName(name)
  49.     }
  50.     return <div>
  51.         this is app
  52.         <A onGetAName={getAName}/>
  53.         <B pushAName={aName}/>
  54.     </div>
  55. }
复制代码
  结果
  

React 拓展

React.memo

允许组件在Props没有改变的情况下 跳过渲染
   react组件默认的渲染机制 : 父组件重新渲染的时间子组件也会重新渲染
  1. import React, {useState} from 'react';
  3. function Son() {
  4.     console.log('子组件被重新渲染了')
  5.     return <div>this is son</div>
  6. }
  8. const ReactMemoDemo = () => {
  9.     const [, forceUpdate] = useState()
  10.     console.log('父组件重新渲染了')
  11.     return (
  12.         <>
  13.             <Son/>
  14.             <button onClick={() => forceUpdate(Math.random())}>update</button>
  15.         </>
  16.     )
  17. };
  19. export default ReactMemoDemo;
复制代码

这个时间使用 memo包裹住组件 就可以制止 但是 注意 只考虑props变化才气使用\
  1. import React, {memo, useState} from 'react';
  3. // function Son() {
  4. //     console.log('子组件被重新渲染了')
  5. //     return <div>this is son</div>
  6. // }
  8. const MemoSon = memo(function Son() {
  9.     console.log("我是子组件 我被渲染了")
  10.     return <div>this is son</div>
  11. })
  12. const ReactMemoDemo = () => {
  13.     const [, forceUpdate] = useState()
  14.     console.log('父组件重新渲染了')
  15.     return (
  16.         <>
  17.             <MemoSon/>
  18.             <button onClick={() => forceUpdate(Math.random())}>update</button>
  19.         </>
  20.     )
  21. };
  23. export default ReactMemoDemo;
复制代码

React.memo 比较机制

React会对每一个prop进行 object.is比较 返回true 表现没有变化
PS: 对于引用类型 React只关心引用是否变化
HOOKS

useState

这是React 中的一个hook 函数 它允许我们向组件添加一个状态变脸,从而控制组件的渲染结果

  1. const [msg, setMsg] = useState('')
复制代码
   修改规则
  在React 中 状态被认为是只读的 我们应该更换而不是修改 直接修改状态不会得到视图的更新
  1.     const [msg, setMsg] = useState('')
  2.     const getMsg = (msg) => {        console.log(msg)        // msg = '我是信息'  这么改是无效的        setMsg(msg)    }        //如果是对象作为参数      const [msg, setMsg] = useState({id:'122ds'})    const getMsg = (msg) => {        console.log(msg)        // msg = '我是信息'  这么改是无效的        setMsg({            ...msg,                id:'123'})    }
复制代码
useContext 组件通讯

案例 :

我们必要将app的消息转达到b
  1. const MsgContext = createContext()
  3. function A() {
  4.     return <div>this is A
  5.         <B/>
  6.     </div>
  7. }
  9. function B() {
  10.     const msg = useContext(MsgContext)
  11.     return <div>this is B from APP:{msg}
  12.     </div>
  13. }
  15. function AppDemo() {
  16.     const msg = "this is app msg"
  17.     return (<div>
  18.         <MsgContext.Provider value={msg}>
  19.             this is app
  20.             <A/>
  21.         </MsgContext.Provider>
  22.     </div>)
  23. }
复制代码
useEffect

这是React中的一个 hook 函数 ,用于在React 中创建不是由变乱引起而是由渲染自己引起的操纵,比如发送 AJAX请求 更改DOM等

   基础使用
  需求: 在组件渲染完毕后,从服务器获得列表数据展示
语法:
  1. useEffect(()=>{},[])
复制代码
  1. import {useEffect, useState} from "react";
  3. const URL = 'http://geek.itheima.net/v1_0/channels'
  5. function AppDemo() {
  6.     const [list, setList] = useState([]);
  7.     useEffect(() => {
  8.         async function getList() {
  9.             const res = await fetch(URL)
  10.             const jsonRes = await res.json()
  11.             console.log(jsonRes)
  12.             setList(jsonRes.data.channels)
  13.         }
  15.         getList()
  16.         console.log("list", list)
  17.     }, []);
  18.     return (<div>
  19.         this is app
  20.         <ul>
  21.             {list.map(item => <li key={item.id}>{item.name}</li>)}
  22.         </ul>
  23.     </div>)
  24. }
  27. export default AppDemo;
复制代码
  结果
  

   依赖项参数
  

  1. function AppDemo() {
  2.     /*1. 没有依赖项*/
  3.     const [count, setCount] = useState(0);
  4.     // useEffect(() => {
  5.     //     console.log("副作用函数执行了")
  6.     // });
  7.     /*2 传入空数组依赖*/
  8.     // useEffect(() => {
  9.     //     console.log("副作用函数执行了")
  10.     // }, []);
  11.     useEffect(() => {
  12.         console.log("副作用函数执行了")
  13.     }, [count]);
  14.     return <div>this is app
  15.         <button onClick={() => setCount(count + 1)}>+{count}</button>
  16.     </div>
  17. }
复制代码
  清除副作用
  在useEffect中编写的由渲染自己引起的对接组件外部的操纵，社区也经常把它叫做副作用操纵，我们想在组件卸载时把这个定时器清理掉，这个过程就是清理副作用
  1. import {useEffect, useState} from "react";
  3. function Son() {
  4.     useEffect(() => {
  5.         const timer = setInterval(() => {
  6.             console.log("定时器执行中...")
  7.         }, 1000)
  8.         return () => {
  9.             //     清楚副作用
  10.             clearInterval(timer)
  11.         }
  12.     }, []);
  13.     return <div>this is son</div>
  14. }
  16. function AppDemo() {
  17.     const [show, setShow] = useState(true)
  18.     return <div>this is app
  19.         {show && <Son/>}
  20.         <button onClick={() => setShow(false)}>卸载组件</button>
  21.     </div>
  22. }
  24. export default AppDemo;
复制代码
useReducer


  1. import React, {useReducer} from 'react';
  3. // 根据不同的case 返回不同的状态
  4. function reducer(state, action) {
  5.     switch (action.type) {
  6.         case 'INC':
  7.             return state + 1
  8.         case 'DEC':
  9.             return state - 1
  10.         case 'SET':
  11.             return state = action.payload
  12.         default:
  13.             return state
  14.     }
  15. }
  17. const ReducerDemo = () => {
  18.     // 使用 use reducer
  19.     const [state, dispatch] = useReducer(reducer, 0)
  20.     return (
  21.         <div>
  22.             <button onClick={() => dispatch({type: 'INC'})}>+</button>
  23.             {state}
  24.             <button onClick={() => dispatch({type: 'DEC'})}>-</button>
  25.             <button onClick={() => dispatch({type: 'SET', payload: 100})}>Set</button>
  26.         </div>
  27.     );
  28. };
  30. export default ReducerDemo;
复制代码
这个钩子相当于 一个可以有多个修改state方法的 usestate
useMemo

作用：它在每次重新渲染的时间能够缓存盘算的结果
   小案例
  
  1. import React, {useState} from 'react';
  3. function factorialOf(n) {
  4.     console.log('斐波那契函数执行了')
  5.     return n <= 0 ? 1 : n * factorialOf(n - 1)
  6. }
  8. const MemoDemo = () => {
  9.     const [count, setCount] = useState(0)
  10.     // 计算斐波那契之和
  11.     const sumByCount = factorialOf(count)
  13.     const [num, setNum] = useState(0)
  15.     return (
  16.         <>
  17.             {sumByCount}
  18.             <button onClick={() => setCount(count + 1)}>+count:{count}</button>
  19.             <button onClick={() => setNum(num + 1)}>+num:{num}</button>
  20.         </>
  21.     )
  22. };
  24. export default MemoDemo;
复制代码
useMemo 就是用来解决这种问题的
  1. import React, {useMemo, useState} from 'react';
  3. function factorialOf(n) {
  4.     console.log('斐波那契函数执行了')
  5.     return n <= 0 ? 1 : n * factorialOf(n - 1)
  6. }
  8. const MemoDemo = () => {
  9.     const [count, setCount] = useState(0)
  10.     // 计算斐波那契之和
  11.     // const sumByCount = factorialOf(count)
  12.     const sumByCount = useMemo(() => {
  13.         return factorialOf(count)
  14.     }, [count])
  16.     const [num, setNum] = useState(0)
  18.     return (
  19.         <>
  20.             {sumByCount}
  21.             <button onClick={() => setCount(count + 1)}>+count:{count}</button>
  22.             <button onClick={() => setNum(num + 1)}>+num:{num}</button>
  23.         </>
  24.     )
  25. };
  27. export default MemoDemo;
复制代码
就不会出现 点击num按钮也会触发求和方法情况了
useCallback

作用 在组件多次重新渲染的时间 缓存函数
自定义hook

暂时没有什么很好的例子 写一个比较简单的 之后再拓展
  1. import {useState} from "react";
  3. function useToggle() {
  4. // 可复用代码
  5.     const [value, setValue] = useState(true);
  6.     const toggle = () => {
  7.         setValue(!value)
  8.     }
  9.     return {value, toggle}
  10. }
  12. function AppDemo() {
  13.     const {value, toggle} = useToggle()
  14.     return <div>this is app
  15.         {value && <div>this is show Toggle</div>}
  16.         <button onClick={toggle}>Toggle</button>
  17.     </div>
  18. }
  20. export default AppDemo;
复制代码
  结果
  

点击

Redux

完备代码案例仓库 :https://gitee.com/cold-abyss_admin/react-redux-meituan
Redux是 React 最常用的会合状态管理工具,类似与VUE的pinia(vuex) 可以独立于框架运行

使用思路:

配置Redux

在React中使用redux，官方要求安装俩个其他插件-和react-redux
官方推荐我们使用 RTK(ReduxToolkit) 这是一套工具聚集 可以简化书写方式

调试工具安装

谷歌浏览器搜索 redux-devtool安装 工具
   依赖安装
  1. #redux工具包
  2. npm i @reduxjs/toolkit react-redux
  3. #调试工具包
  4. npm install --save-dev redux-devtools-extension
复制代码

store目次机构计划



快速上手

使用react+redux 开发一个计数器 认识一下技能

提交acntion传参

在reducers的同步修改方法中添加action对象参数,在调用actionCreater参数的时间转达参数,参数会被转达到action对象的payload属性上
我们继续的改造一下counterStore
action这个对象参数有个固定的属性叫payload用来吸收传参

然后 app.js 添加两个按钮 用来转达参数

   结果
  

Reudx action异步操纵

区分同步和异步action

如果action的内容是 object对象那就是同步action,如果是函数 那就是异步action
为什么我们必要异步action操纵来使用请求 ?
   例子:
  我们有两种方式可以实现 隔五分钟 上蛋炒饭
  一种是客人自己思考五分钟
  一种是客人点好 叫服务员五分钟之后上
  这个服务员就是 redux 我们刚渴望相关aciton的操纵都在redux里完成这个时间同步action就不能满足我们的需求了 所以必要使用异步action
  ​ 异步操纵的代码变化不大,我们创建store的写法保持稳定 ,但是在函数中用异步操纵的时间必要一个能异步执行函数return出一个新的函数而我们的异步操纵卸载新的函数中.
异步action中一样寻常都会调用一个同步action
   案例: 从后端获取到列表展示到页面
  新建一个文件叫做 ChannelStore.js 然后编写对应的创建代码
  1. import {createSlice} from "@reduxjs/toolkit";
  2. import axios from "axios";
  3. const  channelStore = createSlice({
  4.     name: "channel",
  5.     initialState: {
  6.         channelList:[]
  7.     },
  8.     reducers:{
  9.         setChannel(state, action){
  10.             state.channelList=action.payload
  11.         }
  12.     }
  13. })
  14. const {setChannel}= channelStore.actions
  15. // 异步请求
  16. const fetchChannelList = ()=>{
  17.     return async (dispatch)=>{
  18.         const  res = await  axios.get('http://geek.itheima.net/v1_0/channels')
  19.         dispatch(setChannel(res.data.data.channels))
  20.     }
  21. }
  23. const reducer = channelStore.reducer;
  24. export {fetchChannelList}
  25. export default reducer
复制代码
然后去store入口加入channelStore
  1. import {configureStore} from "@reduxjs/toolkit";
  2. import counterStore from "./modules/counterStore";
  3. import channelStore from "./modules/channelStore";
  4. const store = configureStore({
  5.     reducer:{
  6.         counter: counterStore,
  7.         channel: channelStore,
  8.     }
  9. })
  11. export default store
复制代码
之后就可以在app.js加入代码
  1. import {useDispatch, useSelector} from "react-redux";
  2. import {useEffect} from "react";
  3. import {fetchChannelList} from "./store/modules/channelStore";
  4. function App() {
  5.   const {channelList} = useSelector(state => state.channel);
  6. const dispatch = useDispatch()
  7.     useEffect(() => {
  8.         dispatch(fetchChannelList())
  9.     }, [dispatch]);
  10.   return (
  11.       <div className="App">
  12.           <ul>
  13.               {channelList.map(item =><li key={item.id}>{item.name}</li>)}
  14.           </ul>
  15.       </div>
  17.   );
  18. }
  20. export default App;
复制代码
  代码结果
  

redux hooks

useSelector

它的作用是吧store中的数据映射到组件中
  1. const {count} = useSelector(state => state.counter);
复制代码
这里的count实在对应的就是

useDispatch

它的作用是天生提交 action对象的dispatch函数
  1. import {useDispatch, useSelector} from "react-redux";
  2. import {inscrement,descrement} from "./store/modules/counterStore"
  3. function App() {
  4.   const {count} = useSelector(state => state.counter);
  5. const dispatch = useDispatch()
  6.   return (
  7.     <div className="App">
  8.         <button onClick={()=>dispatch(inscrement())}>+</button>
  9.         {count}
  10.         <button onClick={()=>dispatch(descrement())}>-</button>
  11.     </div>
  12.   );
  13. }
  15. export default App;
复制代码
美团点餐界面小案例

下载模板地点:
   git clone http://git.itcast.cn/heimaqianduan/redux-meituan.git
  结果与功能列表展示

根本的思路就是使用 RTK 来做状态管理,组件负责数据渲染和操纵action

我们在store文件夹下开始配置和编写store的使用逻辑
分类渲染

先编写对应的reducer 和异步请求逻辑
   takeaway.js
  用于异步请求列表数据
  1. import {createStore} from './store';
  2. import axios from "axios";
  3. const foodsState = createStore({
  4.     name:'foods',
  5.     initialState: {
  6.         foodsList:[]
  7.     },
  8.     reducers:{
  9.         setFoodsList(state, action){
  10.             state.foodsList=action.payload
  11.         }
  12.     }
  13. });
  14. const {setFoodsList} = foodsState.actions;
  15. //异步获取部分
  16. const fetchFoodsList = () => {
  17.     return async dispatch => {
  18.     //     异步逻辑
  19.        const res =  await axios.get(' http://localhost:3004/takeaway\n')
  20.     //     调用dispatch
  21.         dispatch(setFoodsList(res.data))
  22.     }
  23. }
  24. const reducer = foodsState.reducer
  25. export {fetchFoodsList}
  26. export default reducer
复制代码
将子store管理起来 在store文件夹下编写一个index.js作为访问store的入口
  1. import {configureStore} from "@reduxjs/toolkit";
  2. import foodsReducer from './modules/takeaway'
  3. const  store= configureStore({
  4.     reducer:{
  5.         foods:foodsReducer
  6.     }
  7. })
  9. export default store
复制代码
然后将redux和react连接起来 将store 注入进去 选择根目次的index.js
  1. import React from 'react'
  2. import { createRoot } from 'react-dom/client'
  3. import { Provider } from 'react-redux'
  4. import App from './App'
  5. import store from "./store";
  8. const root = createRoot(document.getElementById('root'))
  9. root.render(
  10.     <Provider store={store}>
  11.       <App />
  12.     </Provider>
  13. )
复制代码
  编写渲染页面
  在app.js里 遵循步骤开始操纵store
  1. import NavBar from './components/NavBar'
  2. import Menu from './components/Menu'
  3. import Cart from './components/Cart'
  4. import FoodsCategory from './components/FoodsCategory'
  5. import './App.scss'
  6. import {useSelector} from "react-redux";
  8. const App = () => {
  9. // 访问store拿到数据
  10. const {foodsList} = useSelector(state => state.foods)
  11.   return (
  12.     <div className="home">
  13.       {/* 导航 */}
  14.       <NavBar />
  16.       {/* 内容 */}
  17.       <div className="content-wrap">
  18.         <div className="content">
  19.           <Menu />
  21.           <div className="list-content">
  22.             <div className="goods-list">
  23.               {/* 外卖商品列表 */}
  24.               {foodsList.map(item => {
  25.                 return (
  26.                   <FoodsCategory
  27.                     key={item.tag}
  28.                     // 列表标题
  29.                     name={item.name}
  30.                     // 列表商品
  31.                     foods={item.foods}
  32.                   />
  33.                 )
  34.               })}
  35.             </div>
  36.           </div>
  37.         </div>
  38.       </div>
  40.       {/* 购物车 */}
  41.       <Cart />
  42.     </div>
  43.   )
  44. }
  46. export default App
复制代码
  结果
  

侧边栏渲染.交互

我们必要在获取列表解构的时间 拿到属于左侧列表的数据

然后循环的展示在menu组件中 只必要把异步请求的数据放到menu组件中就可以展示侧边栏了
  1. import classNames from 'classnames'
  2. import './index.scss'
  3. import {useDispatch, useSelector} from "react-redux";
  4. const Menu = () => {
  5.   //    获取dispatch
  6.   const  dispatch = useDispatch()
  7.   // 访问store拿到数据
  8.   const {foodsList} = useSelector(state => state.foods)
  9.   const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))
  10.   return (
  11.     <nav className="list-menu">
  12.       {/* 添加active类名会变成激活状态 */}
  13.       {menus.map((item, index) => {
  14.         return (
  15.           <div
  16.             key={item.tag}
  17.             className={classNames(
  18.               'list-menu-item',
  19.               'active'
  20.             )}
  21.           >
  22.             {item.name}
  23.           </div>
  24.         )
  25.       })}
  26.     </nav>
  27.   )
  28. }
  30. export default Menu
复制代码
  结果
  

接下来编写交互操纵 使用RTK来管理activeindex

  1. import {createSlice} from '@reduxjs/toolkit';
  2. import axios from "axios";
  3. const foodsState = createSlice({
  4.     name:'foods',
  5.     initialState: {
  6.         // 商品列表
  7.         foodsList:[],
  8.      // 菜单激活值
  9.         activeIndex:0,
  10.     },
  11.     reducers:{
  12.         setFoodsList(state, action){
  13.             state.foodsList=action.payload
  14.         },
  15.         changeActiveIndex(state, action){
  16.             state.activeIndex=action.payload
  17.         }
  18.     }
  19. });
  20. const {setFoodsList,changeActiveIndex} = foodsState.actions;
  21. //异步获取部分
  22. const fetchFoodsList = () => {
  23.     return async dispatch => {
  24.     //     异步逻辑
  25.        const res =  await axios.get(' http://localhost:3004/takeaway\n')
  26.     //     调用dispatch
  27.         dispatch(setFoodsList(res.data))
  28.         console.log(res.data)
  29.     }
  30. }
  31. const reducer = foodsState.reducer
  32. export {fetchFoodsList,changeActiveIndex}
  33. export default reducer
复制代码
然后开始编写menu组件的点击结果

   代码修改 menu/index.js
  1. import classNames from 'classnames'
  2. import './index.scss'
  3. import {useDispatch, useSelector} from "react-redux";
  4. import {changeActiveIndex} from "../../store/modules/takeaway";
  5. const Menu = () => {
  6.   //    获取dispatch
  7.   const  dispatch = useDispatch()
  8.   // 访问store拿到数据
  9.   const {foodsList,activeIndex} = useSelector(state => state.foods)
  10.   const menus = foodsList.map(item => ({ tag: item.tag, name: item.name }))
  11.   return (
  12.     <nav className="list-menu">
  13.       {/* 添加active类名会变成激活状态 */}
  14.       {menus.map((item, index) => {
  15.         return (
  16.           <div
  17.               onClick={()=>dispatch(changeActiveIndex(index))}
  18.             key={item.tag}
  19.             className={classNames(
  20.               'list-menu-item',
  21.                 activeIndex===index&& 'active'
  22.             )}
  23.           >
  24.             {item.name}
  25.           </div>
  26.         )
  27.       })}
  28.     </nav>
  29.   )
  30. }
  32. export default Menu
复制代码
  结果
  当点击的时间index就会切换到对应的index上 并且在点击当前index的时间选项高亮
  


   商品列表的切换表现
  点击侧边栏的时间 菜单栏必要表现对应侧边栏index的菜单
修改 app.js菜单栏标签的表现规则就行
  1. const App = () => {
  2. //    获取dispatch
  3. const  dispatch = useDispatch()
  4.   //   异步请求数据
  5.   useEffect(() => {
  6.     dispatch(fetchFoodsList())
  7.   }, [dispatch]);
  8. // 访问store拿到数据
  9. const {foodsList,activeIndex} = useSelector(state => state.foods)
  10.   return (
  11.     <div className="home">
  12.       {/* 导航 */}
  13.       <NavBar />
  15.       {/* 内容 */}
  16.       <div className="content-wrap">
  17.         <div className="content">
  18.           <Menu />
  20.           <div className="list-content">
  21.             <div className="goods-list">
  22.               {/* 外卖商品列表 */}
  23.               {foodsList.map((item,index) => {
  24.                 return (
  25.                 index===activeIndex&&  <FoodsCategory
  26.                     key={item.tag}
  27.                     // 列表标题
  28.                     name={item.name}
  29.                     // 列表商品
  30.                     foods={item.foods}
  31.                   />
  32.                 )
  33.               })}
  34.             </div>
  35.           </div>
  36.         </div>
  37.       </div>
  39.       {/* 购物车 */}
  40.       <Cart />
  41.     </div>
  42.   )
  43. }
复制代码
添加购物车

起首找到fooditem中的food对象 一会我们使用cartlist的时间要用到 id 和count

使用 RTK管理 状态cartlist
  1. import {createSlice} from '@reduxjs/toolkit';
  2. import axios from "axios";
  3. const foodsState = createSlice({
  4.     name:'foods',
  5.     initialState: {
  6.         // 商品列表
  7.         foodsList:[],
  8.      // 菜单激活值
  9.         activeIndex:0,
  10.         // 购物车列表
  11.         cartList:[]
  12.     },
  13.     reducers:{
  14.         // 修改商品列表
  15.         setFoodsList(state, action){
  16.             state.foodsList=action.payload
  17.         },
  18.         // 更改activeIndex
  19.         changeActiveIndex(state, action){
  20.             state.activeIndex=action.payload
  21.         },
  22.         // 添加购物车
  23.         addCart(state, action){
  24.         //    通过payload.id去匹配cartList匹配,匹配到代表添加过
  25.            const  item = state.cartList.find(item=>item.id ===action.payload.id)
  26.             if (item){
  27.                 item.count++
  28.             }else{
  29.                 state.cartList.push(action.payload)
  30.             }
  31.         }
  32.     }
  33. });
  34. const {setFoodsList,changeActiveIndex,addCart} = foodsState.actions;
  35. //异步获取部分
  36. const fetchFoodsList = () => {
  37.     return async dispatch => {
  38.     //     异步逻辑
  39.        const res =  await axios.get(' http://localhost:3004/takeaway\n')
  40.     //     调用dispatch
  41.         dispatch(setFoodsList(res.data))
  42.         console.log(res.data)
  43.     }
  44. }
  45. const reducer = foodsState.reducer
  46. export {fetchFoodsList,changeActiveIndex,addCart}
  47. export default reducer
复制代码
在fooditem.jsx编写cartList触发操纵
  1. import './index.scss'
  2. import {useDispatch} from "react-redux";
  3. import {addCart} from "../../../store/modules/takeaway";
  5. const Foods = ({
  6.   id,
  7.   picture,
  8.   name,
  9.   unit,
  10.   description,
  11.   food_tag_list,
  12.   month_saled,
  13.   like_ratio_desc,
  14.   price,
  15.   tag,
  16.   count =1
  17. }) => {
  18.   const  dispatch = useDispatch()
  19.   return (
  20.     <dd className="cate-goods">
  21.       <div className="goods-img-wrap">
  22.         <img src={picture} alt="" className="goods-img" />
  23.       </div>
  24.       <div className="goods-info">
  25.         <div className="goods-desc">
  26.           <div className="goods-title">{name}</div>
  27.           <div className="goods-detail">
  28.             <div className="goods-unit">{unit}</div>
  29.             <div className="goods-detail-text">{description}</div>
  30.           </div>
  31.           <div className="goods-tag">{food_tag_list.join(' ')}</div>
  32.           <div className="goods-sales-volume">
  33.             <span className="goods-num">月售{month_saled}</span>
  34.             <span className="goods-num">{like_ratio_desc}</span>
  35.           </div>
  36.         </div>
  37.         <div className="goods-price-count">
  38.           <div className="goods-price">
  39.             <span className="goods-price-unit">¥</span>
  40.             {price}
  41.           </div>
  42.           <div className="goods-count">
  43.             <span className="plus" onClick={()=>{dispatch(addCart({
  44.               id,
  45.               picture,
  46.               name,
  47.               unit,
  48.               description,
  49.               food_tag_list,
  50.               month_saled,
  51.               like_ratio_desc,
  52.               price,
  53.               tag,
  54.               count
  55.             }))}}></span>
  56.           </div>
  57.         </div>
  58.       </div>
  59.     </dd>
  60.   )
  61. }
  63. export default Foods
复制代码
  结果
  

统计订单地域


实现思路
  1. // 计算总价
  2. const totalPrice = cartList.reduce((a, c) => a + c.price * c.count, 0)
  4. {/* fill 添加fill类名购物车高亮*/}
  5. {/* 购物车数量 */}
  6. <div onClick={onShow} className={classNames('icon', cartList.length > 0 && 'fill')}>
  7.   {cartList.length > 0 && <div className="cartCornerMark">{cartList.length}</div>}
  8. </div>
复制代码

   结果
  

   cart.jsx全部代码
  1. import classNames from 'classnames'
  2. import Count from '../Count'
  3. import './index.scss'
  4. import {useSelector} from "react-redux";
  5. import {fill} from "lodash/array";
  7. const Cart = () => {
  8.     const{cartList} = useSelector(state => state.foods)
  9.   //   计算总价
  10.    const  totalPrice = cartList.reduce((a, c) => a+c.price*c.count,0)
  11.   const cart = []
  12.   return (
  13.     <div className="cartContainer">
  14.       {/* 遮罩层 添加visible类名可以显示出来 */}
  15.       <div
  16.         className={classNames('cartOverlay')}
  17.       />
  18.       <div className="cart">
  19.         {/* fill 添加fill类名可以切换购物车状态*/}
  20.         {/* 购物车数量 */}
  21.         <div className={classNames('icon')}>
  22.           {cartList.length>0 && <div className="cartCornerMark">{cartList.length}</div>}
  23.         </div>
  24.         {/* 购物车价格 */}
  25.         <div className="main">
  26.           <div className="price">
  27.             <span className="payableAmount">
  28.               <span className="payableAmountUnit">¥</span>
  29.               {totalPrice.toFixed(2)}
  30.             </span>
  31.           </div>
  32.           <span className="text">预估另需配送费 ¥5</span>
  33.         </div>
  34.         {/* 结算 or 起送 */}
  35.         {cartList.length > 0 ? (
  36.           <div className="goToPreview">去结算</div>
  37.         ) : (
  38.           <div className="minFee">¥20起送</div>
  39.         )}
  40.       </div>
  41.       {/* 添加visible类名 div会显示出来 */}
  42.       <div className={classNames('cartPanel')}>
  43.         <div className="header">
  44.           <span className="text">购物车</span>
  45.           <span className="clearCart">
  46.             清空购物车
  47.           </span>
  48.         </div>
  50.         {/* 购物车列表 */}
  51.         <div className="scrollArea">
  52.           {cart.map(item => {
  53.             return (
  54.               <div className="cartItem" key={item.id}>
  55.                 <img className="shopPic" src={item.picture} alt="" />
  56.                 <div className="main">
  57.                   <div className="skuInfo">
  58.                     <div className="name">{item.name}</div>
  59.                   </div>
  60.                   <div className="payableAmount">
  61.                     <span className="yuan">¥</span>
  62.                     <span className="price">{item.price}</span>
  63.                   </div>
  64.                 </div>
  65.                 <div className="skuBtnWrapper btnGroup">
  66.                   <Count
  67.                     count={item.count}
  68.                   />
  69.                 </div>
  70.               </div>
  71.             )
  72.           })}
  73.         </div>
  74.       </div>
  75.     </div>
  76.   )
  77. }
  79. export default Cart
复制代码
购物车列表功能


   修改takeaway.js内容如下 :
  
  1. import {createSlice} from '@reduxjs/toolkit';
  2. import axios from "axios";
  3. const foodsState = createSlice({
  4.     name:'foods',
  5.     initialState: {
  6.         // 商品列表
  7.         foodsList:[],
  8.      // 菜单激活值
  9.         activeIndex:0,
  10.         // 购物车列表
  11.         cartList:[]
  12.     },
  13.     reducers:{
  14.         // 修改商品列表
  15.         setFoodsList(state, action){
  16.             state.foodsList=action.payload
  17.         },
  18.         // 更改activeIndex
  19.         changeActiveIndex(state, action){
  20.             state.activeIndex=action.payload
  21.         },
  22.         // 添加购物车
  23.         addCart(state, action){
  24.         //    通过payload.id去匹配cartList匹配,匹配到代表添加过
  25.            const  item = state.cartList.find(item=>item.id ===action.payload.id)
  26.             if (item){
  27.                 item.count++
  28.             }else{
  29.                 state.cartList.push(action.payload)
  30.             }
  31.         },
  32.     //     count增
  33.         increCount(state, action){
  34.             const  item = state.cartList.find(item=>item.id ===action.payload.id)
  35.             item.count++
  36.         },
  37.     //     count减
  38.         decreCount(state, action){
  39.             const  item = state.cartList.find(item=>item.id ===action.payload.id)
  40.              // 只有一项的时候将商品移除购物车
  41.             if (item.count <=1){
  42.                 state.cartList=  state.cartList.filter(item=>item.id !=action.payload.id)
  43.                 return
  44.             }
  45.             item.count--
  46.         },
  47.     //     清除购物车
  48.         clearCart(state){
  49.             state.cartList=[]
  50.         }
  51.     }
  52. });
  53. const {clearCart,decreCount,increCount,setFoodsList,changeActiveIndex,addCart} = foodsState.actions;
  54. //异步获取部分
  55. const fetchFoodsList = () => {
  56.     return async dispatch => {
  57.     //     异步逻辑
  58.        const res =  await axios.get(' http://localhost:3004/takeaway\n')
  59.     //     调用dispatch
  60.         dispatch(setFoodsList(res.data))
  61.         console.log(res.data)
  62.     }
  63. }
  64. const reducer = foodsState.reducer
  65. export {fetchFoodsList,changeActiveIndex,addCart,clearCart,decreCount,increCount}
  66. export default reducer
复制代码
购物车列表的表现和隐蔽



  1. import classNames from 'classnames'
  2. import Count from '../Count'
  3. import './index.scss'
  4. import {useDispatch, useSelector} from "react-redux";
  5. import {clearCart, decreCount, increCount} from "../../store/modules/takeaway";
  6. import {useState} from "react";
  8. const Cart = () => {
  9.     const  dispatch =useDispatch()
  10.     const{cartList} = useSelector(state => state.foods)
  11.   //   计算总价
  12.    const  totalPrice = cartList.reduce((a, c) => a+c.price*c.count,0)
  13. const[visible,setVisible]=useState(false)
  14.   return (
  15.     <div className="cartContainer">
  16.       {/* 遮罩层 添加visible类名可以显示出来 */}
  17.       <div
  18.           onClick={()=>setVisible(false)}
  19.         className={classNames('cartOverlay',visible&&'visible')}
  20.       />
  21.       <div className="cart">
  22.         {/* fill 添加fill类名可以切换购物车状态*/}
  23.         {/* 购物车数量 */}
  24.         <div onClick={()=>setVisible(cartList.length!=0)} className={classNames('icon')}>
  25.           {cartList.length>0 && <div className="cartCornerMark">{cartList.length}</div>}
  26.         </div>
  27.         {/* 购物车价格 */}
  28.         <div className="main">
  29.           <div className="price">
  30.             <span className="payableAmount">
  31.               <span className="payableAmountUnit">¥</span>
  32.               {totalPrice.toFixed(2)}
  33.             </span>
  34.           </div>
  35.           <span className="text">预估另需配送费 ¥5</span>
  36.         </div>
  37.         {/* 结算 or 起送 */}
  38.         {cartList.length > 0 ? (
  39.           <div className="goToPreview">去结算</div>
  40.         ) : (
  41.           <div className="minFee">¥20起送</div>
  42.         )}
  43.       </div>
  44.       {/* 添加visible类名 div会显示出来 */}
  45.       <div className={classNames('cartPanel',visible&&'visible')}>
  46.         <div className="header">
  47.           <span className="text">购物车</span>
  48.           <span onClick={()=>dispatch(clearCart())} className="clearCart">
  49.             清空购物车
  50.           </span>
  51.         </div>
  53.         {/* 购物车列表 */}
  54.         <div className="scrollArea">
  55.           {cartList.map(item => {
  56.             return (
  57.               <div className="cartItem" key={item.id}>
  58.                 <img className="shopPic" src={item.picture} alt="" />
  59.                 <div className="main">
  60.                   <div className="skuInfo">
  61.                     <div className="name">{item.name}</div>
  62.                   </div>
  63.                   <div className="payableAmount">
  64.                     <span className="yuan">¥</span>
  65.                     <span className="price">{item.price}</span>
  66.                   </div>
  67.                 </div>
  68.                 <div className="skuBtnWrapper btnGroup">
  69.                   <Count
  70.                       onPlus={()=>dispatch(increCount({id:item.id}))}
  71.                     count={item.count}
  72.                       onMinus={()=>dispatch(decreCount({id:item.id}))}
  73.                   />
  74.                 </div>
  75.               </div>
  76.             )
  77.           })}
  78.         </div>
  79.       </div>
  80.     </div>
  81.   )
  82. }
  84. export default Cart
复制代码
到这里redux的入门, 实践, 小案例就完成了 之后大概会更新一些关于redux底层原理的文章 会加入到此中
zustand

轻量级的状态管理工具
引入 :npm install zustand
使用一个异步请求的方式 看看怎样快速上手
  1. import React, {useEffect} from 'react';
  2. import {create} from "zustand";
  4. const URL = 'http://geek.itheima.net/v1_0/channels'
  6. const useStore = create((set) => {
  7.     return {
  8.         count: 0,
  9.         ins: () => {
  10.             // 使用参数set 参数为对象 或者方法就可以操作状态
  11.             return set(state => ({count: state.count + 1}))
  12.         },
  13.         channelList: [],
  14.         // 异步请求方式
  15.         fetchChannelList: async () => {
  16.             const res = await fetch(URL)
  17.             const jsonData = await res.json()
  18.             set({channelList: jsonData.data.channels})
  19.         }
  20.     }
  21. })
  22. const ZustandDemo = () => {
  23.     const {channelList, fetchChannelList} = useStore()
  24.     useEffect(() => {
  25.         fetchChannelList()
  26.     }, [fetchChannelList])
  27.     return (
  28.         <ul>
  29.             {channelList.map((item) => (
  30.                 <li key={item.id}>{item.name}</li>
  31.             ))}
  32.         </ul>
  33.     );
  34. };
  36. export default ZustandDemo;
复制代码
切片模式

当一个store过于大的时间 可以接纳切片的方式 进行区分 并且以一个root引入用于使用


React 路由

路由就是关键字和组件的映射关系,我们可以用关键字访问和展示对应组件
安装情况
  1. npm i react-router-dom
复制代码
快速上手 demo

需求: 创建一个可以切换登录页和文章页的路由体系
找到 index.js 创建路由实例对象
语法: 链接组件可以使jsx 也可以是导出的组件 path是访问的路径
  1. createBrowserRouter([
  2.   {
  3.     path:'/login',
  4.     element: <div>登录</div>
  5.   })
复制代码

   代码:
  index.js
  PS : 这里没有app的原因实在就是路由可以自己选择 有没有app作为入口完全看心情 之后会有路由默认设置所以不误在意
  1. const router = createBrowserRouter([{
  2.     path:'/login',
  3.     element: <div>我是登录页面</div>
  4. },{
  5.     path:'/article',
  6.     element: <div>我是文章页面</div>
  7. }
  8. ])
  10. const root = ReactDOM.createRoot(document.getElementById('root'));
  11. root.render(
  12.   <React.StrictMode>
  13.       <RouterProvider router={router}>
  14.       </RouterProvider>
  15.   </React.StrictMode>
  16. );
复制代码
  结果
  

抽象路由模块

之前的快速上手 简单的了解了一下路由的语法和使用 ,如今模拟一下日常的开发使用 ,我们必要将路由模块抽象出来

我们创建路由必要对应的文件夹 放入page文件夹下 一样寻常我们路由的文件夹还会存放一些组件必要的其他资源,内容还是刚才的内容

之后创建 router文件夹存放路由js文件

之后只必要在 根目次下的index.js中把路由引入进来 就完成了抽象结果
路由导航

路由体系中的多个路由之间必要进行路由跳转，并且在跳转的同时有大概必要转达参数进行通讯

声明式导航

声明式导航是指在代码中 通过 <Link/>标签去设置要跳转去哪里
语法 : <Linl to="/article">文章</Link>
   Login组件内容
  1. import {Link} from "react-router-dom";
  3. export const Login = () => {
  4.     return (
  5.         <div>
  6.             <div>我是登录页面</div>
  7.         <Link to="/article">文章</Link>
  8.         </div>
  9.     )
  10. }
复制代码

它实在被解析成一个a链接 指向文章页的访问地点(path)
编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，以参数+触发变乱来控制跳转比起声明式要更加灵活
  1. import {Link, useNavigate} from "react-router-dom";
  3. export const Login = () => {
  4.    const nav =  useNavigate()
  6.     return (
  7.         <div>
  8.             <div>我是登录页面</div>
  9.         {/*    声明式*/}
  10.         <Link to="/article">文章</Link>
  11.         {/*    编程式*/}
  12.         <button onClick={()=>nav("/article")}>文章</button>
  13.         </div>
  14.     )
  15. }
复制代码
传参


useSearchParams

   代码
  Login.jsx
  1. <button onClick={()=>nav('/article?name="jack"')}>文章</button>
复制代码
Article.jsx
  1. import {useSearchParams} from "react-router-dom";
  3. export const Article = () => {
  4.     const [params] = useSearchParams()
  5.    const  name = params.get('name')
  6.     return (
  7.         <div>我是文章页面
  8.             {name}
  9.         </div>
  10.     )
  11. }
复制代码
  结果
  

useParams

这种方式类似 vue的动态路由传参,
   结果
  

嵌套路由

就是多级路由的嵌套 在开发中通常必要来回的跳转 有一级路由包罗多个二级路由等等嵌套情况
   比如下图:
  看成一个管理体系 一个一级路由包罗两个二级路由
  左侧的列表用于展示路由关键字
  右边的路由出口展示点击对应关键字出现的内容
  


案例

分别创建内容 一级路由 layout 和两个二级路由

然后编写嵌套路由必要的 router
  1. {
  2.         path: '/',
  3.         element: <Layout/>,
  4.         children: [
  5.             {
  6.                 path: 'board',
  7.                 element: <Board/>
  8.             },
  9.             {
  10.                 path: 'about',
  11.                 element: <About/>
  12.             }
  13.         ]
  14.     }
复制代码
  layout代码
  1. import {Link, Outlet} from "react-router-dom";
  3. export const Layout = () => {
  4.     return (
  5.         <div>一级路由 layout
  6.             <div><Link to="/board">面板</Link></div>
  7.             <div><Link to="/about">关于</Link></div>
  8.             <Outlet/>
  9.         </div>
  10.     )
  11. }
复制代码
  结果
  

默认二级路由

当访问的是一级路由的时间 默认的二级路由可以得到渲染
语法:
layout
  1. export const Layout = () => {
  2.     return (
  3.         <div>一级路由 layout
  4.             <div><Link to="/board">面板</Link></div>
  5.             <div><Link to="/">关于</Link></div>
  6.             <Outlet/>
  7.         </div>
  8.     )
  9. }
复制代码
router.js
  1.     {
  2.         path: '/',
  3.         element: <Layout/>,
  4.         children: [
  5.             {
  6.                 path: 'board',
  7.                 element: <Board/>
  8.             },
  9.             {
  10.                 index: true,
  11.                 element: <About/>
  12.             }
  13.         ]
  14.     }
复制代码
  结果
  

404路由

当浏览器输入的路径在路由中无法找到或者不存在 我们就必要一个可以兜底的组件 来提拔用户体验

   NOTFOUND JS
  1. export const Notfound = () => {
  2.     return (
  3.         <div>
  4.             this is NotFound Page
  5.         </div>
  6.     )
  7. }
复制代码
  router
  1. {
  2.     path: '*',
  3.     element: <Notfound/>
  4. }
复制代码
  结果
  

路由模式

各个主流框架的路由常用的路由模式有俩种，history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建
路由模式url表现底层原理是否必要后端支持historyurl/loginhistory对象 + pushState变乱必要hashurl/#/login监听hashChange变乱不必要 Hooks

useNavigate

用于编程式导航
语法:
  1.   const nav =  useNavigate()
  2.    <button onClick={()=>nav("/article")}>文章</button>
复制代码
useSearchParams

用于路由跳转的时间担当转达的参数
  1. <button onClick={()=>nav('/article?name="jack"')}>文章</button>
复制代码
这个时间我们在文章组件中编写
  1. import {useSearchParams} from "react-router-dom";
  3. export const Article = () => {
  4.     const [params] = useSearchParams()
  5.    const  name = params.get('name')
  6.     return (
  7.         <div>我是文章页面
  8.             {name}
  9.         </div>
  10.     )
  11. }
复制代码
useParams

这种方式类似 vue的动态路由传参,
极客博客

项目配置

初始化项目 这里依赖的使用:
   规范src目次
  1. -src
  2.   -apis           项目接口函数
  3.   -assets         项目资源文件，比如，图片等
  4.   -components     通用组件
  5.   -pages          页面组件
  6.   -store          集中状态管理
  7.   -utils          工具，比如，token、axios 的封装等
  8.   -App.js         根组件
  9.   -index.css      全局样式
  10.   -index.js       项目入口
复制代码

路径别名

   项目配景：在业务开发过程中文件夹的嵌套层级大概会比较深，通过传统的路径选择会比较贫困也容易出错，设置路径别名可以简化这个过程
  安装 npm i @craco/craco -D
然后创建 craco.config.js
  1. const path = require('path')
  3. module.exports = {
  4.   // webpack 配置
  5.   webpack: {
  6.     // 配置别名
  7.     alias: {
  8.       // 约定：使用 @ 表示 src 文件所在路径
  9.       '@': path.resolve(__dirname, 'src')
  10.     }
  11.   }
  12. }
复制代码
更换packge.json的启动方式 就可以使用了
  1.   "scripts": {
  2.     "start": "craco start",
  3.     "build": "craco build",
  4.     "test": "craco test",
  5.     "eject": "react-scripts eject"
  6.   }
复制代码
  配置代码编辑器识别
  在跟目次创建 jsconfig.json
  1. {
  2.   "compilerOptions": {
  3.     "baseUrl": ".",
  4.     "paths": {
  5.       "@/*": [
  6.         "src/*"
  7.       ]
  8.     }
  9.   }
  10. }
复制代码
这样就有路径提示了
安装scss

安装完之后在index.scss中写下样式查看是否安装乐成

组件库antd

组件库资助我们提拔开发服从，此中使用最广的就是antD
导入依赖: npm i antd
安装图标库: npm install @ant-design/icons --save
   测试
  1. import {Button} from "antd";
  3. function App() {
  4.     return (
  5.         <div>
  6.             this is a web app
  7.             <Button type='primary'>test</Button>
  8.         </div>
  9.     );
  10. }
  12. export default App;
复制代码
  结果
  

配置路由

   导入依赖
  
在pages中创建好对应的文件夹和组件

然后配置对应的路由文件

  1. import {createBrowserRouter} from "react-router-dom";
  2. import {Layout} from "../pages/Layout";
  3. import {Login} from "../pages/Login";
  5. const router = createBrowserRouter([
  6.     {
  7.         path: '/',
  8.         element: <Layout/>
  9.     },
  10.     {
  11.         path: '/login',
  12.         element: <Login/>
  13.     }
  14. ])
复制代码
之后使用 provider 将路由放入根文件 使用
index.js:
  1. import React from 'react';
  2. import ReactDOM from 'react-dom/client';
  3. import './index.scss';
  4. import {RouterProvider} from "react-router-dom";
  5. import router from "./router";
  7. const root = ReactDOM.createRoot(document.getElementById('root'));
  8. root.render(
  9.     <RouterProvider router={router}>
  10.     </RouterProvider>
  11. );
复制代码
配置完重启 这样基础的路由就配置好了

封装requset请求模块

因为项目中会发送很多网络请求,所以我们可以将 axios做好同一封装 方便同一管理和复用

   导入依赖
  1. npm i axios
复制代码
然后在utils中编写 request配置js
  1. import axios from 'axios'
  3. const request = axios.create({
  4.     baseURL: 'http://geek.itheima.net/v1_0',
  5.     timeout: 5000
  6. })
  8. // 添加请求拦截器
  9. request.interceptors.request.use((config) => {
  10.     return config
  11. }, (error) => {
  12.     return Promise.reject(error)
  13. })
  15. // 添加响应拦截器
  16. request.interceptors.response.use((response) => {
  17.     // 2xx 范围内的状态码都会触发该函数。
  18.     // 对响应数据做点什么
  19.     return response.data
  20. }, (error) => {
  21.     // 超出 2xx 范围的状态码都会触发该函数。
  22.     // 对响应错误做点什么
  23.     return Promise.reject(error)
  24. })
  26. export {request}
复制代码
在utils中创建 index.js 作为同一的工具类使用入口,方便管理工具类
  1. import {request} from "@/utils/request";
  3. export {request}
复制代码
登录模块

@/pages/login/index.jsx 使用 antd 创建登录页面的内容解构
  1. import './index.sass'
  2. import {Button, Card, Form, Input} from "antd";
  3. import logo from "@/assets/logo.png"
  5. export const Login = () => {
  6.     return (
  7.         <div className="login">
  8.             <Card className="login-container">
  9.                 <img className="login-logo" src={logo} alt=""/>
  10.                 {/* 登录表单 */}
  11.                 <Form>
  12.                     <Form.Item>
  13.                         <Input size="large" placeholder="请输入手机号"/>
  14.                     </Form.Item>
  15.                     <Form.Item>
  16.                         <Input size="large" placeholder="请输入验证码"/>
  17.                     </Form.Item>
  18.                     <Form.Item>
  19.                         <Button type="primary" htmlType="submit" size="large" block>
  20.                             登录
  21.                         </Button>
  22.                     </Form.Item>
  23.                 </Form>
  24.             </Card>
  25.         </div>
  26.     )
  27. }
复制代码
样式文件 index.css
  1. .login {
  2.   width: 100%;
  3.   height: 100%;
  4.   position: absolute;
  5.   left: 0;
  6.   top: 0;
  7.   background: center/cover url('~@/assets/login.png');
  9.   .login-logo {
  10.     width: 200px;
  11.     height: 60px;
  12.     display: block;
  13.     margin: 0 auto 20px;
  14.   }
  16.   .login-container {
  17.     width: 440px;
  18.     height: 360px;
  19.     position: absolute;
  20.     left: 50%;
  21.     top: 50%;
  22.     transform: translate(-50%, -50%);
  23.     box-shadow: 0 0 50px rgb(0 0 0 / 10%);
  24.   }
  26.   .login-checkbox-label {
  27.     color: #1890ff;
  28.   }
  29. }
复制代码

表单校验

使用 antd form组件中的表单校验属性来完成 表单校验

如今在login组件中加入基础的表单校验
  1.   {/* 登录表单 */}
  2.                 <Form>
  3.                     <Form.Item
  4.                         name="mobile"
  5.                         rules={[
  6.                             {
  7.                                 required: true,
  8.                                 message: '请输入11位手机号'
  9.                             }
  10.                         ]}>
  11.                         <Input size="large" placeholder="请输入手机号"/>
  12.                     </Form.Item>
  13.                     <Form.Item
  14.                         name="code"
  15.                         rules={[
  16.                             {
  17.                                 required: true,
  18.                                 message: '请输入验证码'
  19.                             }
  20.                         ]}>
  21.                         <Input size="large" placeholder="请输入验证码"/>
  22.                     </Form.Item>
复制代码

基础校验设置好之后 我们必要根据业务来计划定制校验 如

  1.                   <Form.Item
  2.                         name="mobile"
  3.                         rules={[
  4.                             {
  5.                                 required: true,
  6.                                 message: '请输入手机号'
  7.                             },
  8.                             {
  9.                                 pattern: /^1[3-9]\d{9}$/,
  10.                                 message: '请输入正确的手机号'
  11.                             }
  12.                         ]}>
  13.                         <Input size="large" placeholder="请输入手机号"/>
  14.                     </Form.Item>
复制代码
  提交数据
  继续查看官方文档 案例 内里有一个 onFinish 的回调方法 ,并且放到form组件的属性里就可以看到转达的信息了

   代码修改
  1.   const onFinish = (values) => {
  2.         console.log('Success:', values);
  3.     };
  5. <Form onFinish={onFinish} validateTrigger="onBlur"></Form>
复制代码
设置好之后我们再次点击登录按钮就可以在控制台看到转达的json信息了

使用Redux管理token

token可以作为用户表现数据 实在一样寻常我们的登录操纵就是为了获取对应账号下的token权限,这个token必要我们在前端全局化的共享 所以必要使用 redux来管理
   依赖
  1. npm i react-redux @reduxjs/toolkit
复制代码
  配置redux
  在store文件夹创建对应的文件结构

然后编写 user.js
  1. import {createSlice} from '@reduxjs/toolkit'
  2. import {request} from '@/utils'
  4. const userStore = createSlice({
  5.     name: 'user',
  6.     // 数据状态
  7.     initialState: {
  8.         token: ''
  9.     },
  10.     // 同步修改方法
  11.     reducers: {
  12.         setToken(state, action) {
  13.             state.userInfo = action.payload
  14.         }
  15.     }
  16. })
  18. // 解构出actionCreater
  19. const {setToken} = userStore.actions
  21. // 获取reducer函数
  22. const userReducer = userStore.reducer
  24. // 异步方法封装
  25. const fetchLogin = (loginForm) => {
  26.     return async (dispatch) => {
  27.         const res = await request.post('/authorizations', loginForm)
  28.         dispatch(setToken(res.data.token))
  29.     }
  30. }
  32. export {fetchLogin}
  34. export default userReducer
复制代码
在index.js配置同一管理reducer
  1. import {configureStore} from '@reduxjs/toolkit'
  3. import userReducer from './modules/user'
  5. export default configureStore({
  6.     reducer: {
  7.         // 注册子模块
  8.         user: userReducer
  9.     }
  10. })
复制代码
在src下目次中的index.js注入store
  1. import {Provider} from "react-redux";
  2. import store from "./store";
  4. const root = ReactDOM.createRoot(document.getElementById('root'));
  5. root.render(
  6.     <Provider store={store}>
  7.         <RouterProvider router={router}/>
  8.     </Provider>
  9. );
复制代码
触发登录操纵

我们使用的是黑马的后端模版 所以必要使用它提供的数据
  1. 手机号 13888888888
  2. code 246810
复制代码
输入之后就可以看到乐成的拿到了 该用户的 token

redux也乐成的保存的token数据

   登岸后的操纵
  
在login jsx中修改onfinish方法内容实现跳转
PS: 篇幅问题只展示了js代码 return中的样式就不再过多展示
  1. import './index.scss'
  2. import {Button, Card, Form, Input, message} from "antd";
  3. import logo from "@/assets/logo.png"
  4. import {useDispatch} from "react-redux";
  5. import {fetchLogin} from "@/store/modules/user";
  6. import {useNavigate} from "react-router-dom";
  8. export const Login = () => {
  9.     const dispatch = useDispatch();
  10.     const navigate = useNavigate();
  11.     const onFinish = async (values) => {
  12.         await dispatch(fetchLogin(values))
  13.         //     跳转到主页
  14.         navigate('/')
  15.         message.success('登陆成功')
  16.     };
  17. }
复制代码
  结果
  

token长期化

使用localStorage+redux管理token
编写逻辑 :先查询本地有没有 如果没有就请求,然后保存在本地
   修改reducer请求token的方法内容
  这里为什么没有用sessionStorage而是选择用localStorage呢 因为我们必要更长时间的长期化 session关闭浏览器就被清空了,之后登出的时间会显式的清除token
  1. const userStore = createSlice({
  2.     name: 'user',
  3.     // 数据状态
  4.     initialState: {
  5.         token: sessionStorage.getItem('token_key') || ''
  6.     },
  7.     // 同步修改方法
  8.     reducers: {
  9.         setToken(state, action) {
  10.             state.token = action.payload
  11.             sessionStorage.setItem('token_key', state.token)
  12.         }
  13.     }
  14. })
复制代码
封装token操纵方法

创建工具类

  1. // 封装存取方法
  3. const TOKENKEY = 'token_key'
  5. function setToken (token) {
  6.   return localStorage.setItem(TOKENKEY, token)
  7. }
  9. function getToken () {
  10.   return localStorage.getItem(TOKENKEY)
  11. }
  13. function clearToken () {
  14.   return localStorage.removeItem(TOKENKEY)
  15. }
  17. export {
  18.   setToken,
  19.   getToken,
  20.   clearToken
  21. }
复制代码
然后在入口index导入工具类
  1. import {request} from "@/utils/request";
  2. import {clearToken, getToken, setToken} from "@/utils/token";
  4. export {request, getToken, setToken, clearToken}
复制代码
  修改获取的token的代码改为使用工具类
  1. const userStore = createSlice({
  2.     name: 'user',
  3.     // 数据状态
  4.     initialState: {
  5.         token: getToken() || ''
  6.     },
  7.     // 同步修改方法
  8.     reducers: {
  9.         setToken(state, action) {
  10.             state.token = action.payload
  11.             //这里是使用别名的setToken方法 是再import setToken as _setToken
  12.             _setToken(action.payload)
  13.         }
  14.     }
  15. })
复制代码
在Axios请求中携带token

后端必要token来判定是否能够使用接口 ,所以我们必要修改request工具来让他携带token请求

在请求拦截此中拿到token并且注入token
  1. // 添加请求拦截器
  2. request.interceptors.request.use((config) => {
  3.     // 如果有token就携带没有就正常
  4.     const token = getToken()
  5.     // 按照后端的要求加入token
  6.     if (token) {
  7.         config.headers.Authorization = `Bearer ${token}`
  8.     }
  9.     return config
  10. }, (error) => {
  11.     return Promise.reject(error)
  12. })
复制代码
  测试
  

使用token做路由权限控制

在没有token的时间 不允许访问必要权限的路由

创建组件 AuthRoute

  1. // 封装高级组件
  2. //核心逻辑:根据token控制跳转
  3. import {getToken} from "@/utils";
  4. import {Navigate} from "react-router-dom";
  6. export function AuthRoute({children}) {
  7.     const token = getToken();
  8.     if (token) {
  9.         return <>{children}</>
  10.     } else {
  11.         return <Navigate to={'/login'} replace={true}/>
  12.     }
  13. }
复制代码
修改router.js
  1. import {createBrowserRouter} from "react-router-dom";
  2. import {Layout} from "../pages/Layout";
  3. import {Login} from "../pages/Login";
  4. import {AuthRoute} from "@/components/AuthRoute";
  6. const router = createBrowserRouter([
  7.     {
  8.         path: '/',
  9.         element: <AuthRoute><Layout/></AuthRoute>
  10.     },
  11.     {
  12.         path: '/login',
  13.         element: <Login/>
  14.     }
  15. ])
  16. export default router
复制代码
删除token 之后革新界面 就会被强制定向到 login
主页面

   依赖
  

用来初始化样式的第三方库
  1. npm install normalize.css
复制代码
然后将其引入到程序入门 index.js
实现步骤
   主页面模版
  1. import {Layout, Menu, Popconfirm} from 'antd'
  2. import {DiffOutlined, EditOutlined, HomeOutlined, LogoutOutlined,} from '@ant-design/icons'
  3. import './index.scss'
  4. import {Outlet, useNavigate} from "react-router-dom";
  6. const {Header, Sider} = Layout
  8. const items = [
  9.     {
  10.         label: '首页',
  11.         key: '/',
  12.         icon: <HomeOutlined/>,
  13.     },
  14.     {
  15.         label: '文章管理',
  16.         key: '/article',
  17.         icon: <DiffOutlined/>,
  18.     },
  19.     {
  20.         label: '创建文章',
  21.         key: '/publish',
  22.         icon: <EditOutlined/>,
  23.     },
  24. ]
  26. const GeekLayout = () => {
  27.     const navigate = useNavigate();
  28.     const onMenuClick = (router) => {
  29.         console.log(router)
  30.         navigate(router.key)
  31.     }
  32.     return (
  33.         <Layout>
  34.             <Header className="header">
  35.                 <div className="logo"/>
  36.                 <div className="user-info">
  37.                     <span className="user-name">冷环渊</span>
  38.                     <span className="user-logout">
  39.             <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
  40.               <LogoutOutlined/> 退出
  41.             </Popconfirm>
  42.           </span>
  43.                 </div>
  44.             </Header>
  45.             <Layout>
  46.                 <Sider width={200} className="site-layout-background">
  47.                     <Menu
  48.                         mode="inline"
  49.                         theme="dark"
  50.                         defaultSelectedKeys={['1']}
  51.                         items={items}
  52.                         onClick={onMenuClick}
  53.                         style={{height: '100%', borderRight: 0}}></Menu>
  54.                 </Sider>
  55.                 <Layout className="layout-content" style={{padding: 20}}>
  56.                     <Outlet/>
  57.                 </Layout>
  58.             </Layout>
  59.         </Layout>
  60.     )
  61. }
  62. export default GeekLayout
复制代码
  主页面样式文件
  1. .ant-layout {
  2.   height: 100%;
  3. }
  5. .header {
  6.   padding: 0;
  7. }
  9. .logo {
  10.   width: 200px;
  11.   height: 60px;
  12.   background: url('~@/assets/logo.png') no-repeat center / 160px auto;
  13. }
  15. .layout-content {
  16.   overflow-y: auto;
  17. }
  19. .user-info {
  20.   position: absolute;
  21.   right: 0;
  22.   top: 0;
  23.   padding-right: 20px;
  24.   color: #fff;
  26.   .user-name {
  27.     margin-right: 20px;
  28.   }
  30.   .user-logout {
  31.     display: inline-block;
  32.     cursor: pointer;
  33.   }
  34. }
  36. .ant-layout-header {
  37.   padding: 0 !important;
  38. }
复制代码
二级路由设置



配置二级路由

  1. const router = createBrowserRouter([
  2.     {
  3.         path: '/',
  4.         element: <AuthRoute><GeekLayout/></AuthRoute>,
  5.         children: [{
  6.             path: '/',
  7.             element: <Home></Home>
  8.         }, {
  9.             path: 'article',
  10.             element: <Article></Article>
  11.         }, {
  12.             path: 'publish',
  13.             element: <Publish></Publish>
  14.         }]
  15.     },
  16.      <!--....省略-->
复制代码
渲染对应关系
  1.      <Layout className="layout-content" style={{padding: 20}}>
  2.                     <Outlet></Outlet>
  3.                 </Layout>
复制代码
路由联动

将路由的key设置成路由的跳转地点
  1. const items = [
  2.     {
  3.         label: '首页',
  4.         key: '/',
  5.         icon: <HomeOutlined/>,
  6.     },
  7.     {
  8.         label: '文章管理',
  9.         key: '/article',
  10.         icon: <DiffOutlined/>,
  11.     },
  12.     {
  13.         label: '创建文章',
  14.         key: '/publish',
  15.         icon: <EditOutlined/>,
  16.     },
  17. ]
  18. const GeekLayout = () => {
  19.     const navigate = useNavigate();
  20.     const onMenuClick = (router) => {
  21.         console.log(router)
  22.         navigate(router.key)
  23.     }
  24.     return (
  25.         <Layout>
  26.             <!--省略-->
  27.             <Layout>
  28.                 <Sider width={200} className="site-layout-background">
  29.                     <Menu
  30.                         mode="inline"
  31.                         theme="dark"
  32.                         defaultSelectedKeys={['1']}
  33.                         items={items}
  34.                         onClick={onMenuClick}
  35.                         style={{height: '100%', borderRight: 0}}></Menu>
  36.                 </Sider>
  37.                 <Layout className="layout-content" style={{padding: 20}}>
  38.                     <Outlet/>
  39.                 </Layout>
  40.             </Layout>
  41.         </Layout>
  42.     )
  43. }
复制代码
菜单点击高亮

  ueslocation获取当前的路由位置,并且将MENU中的属性defaultSelectedKeys -> SelectedKeys内容为获取到的pathname
  1. const GeekLayout = () => {
  2.     const navigate = useNavigate();
  3.     const onMenuClick = (router) => {
  4.         console.log(router)
  5.         navigate(router.key)
  6.     }
  7.     // 获取到当前点击的路由
  8.     const location = useLocation();
  9.     const selectedKey = location.pathname;
  10.     return (
  11.         <Layout>
  12.             <Header className="header">
  13.           <!--省略-->
  14.             </Header>
  15.             <Layout>
  16.                 <Sider width={200} className="site-layout-background">
  17.                     <Menu
  18.                         mode="inline"
  19.                         theme="dark"
  20.                         SelectedKeys={selectedKey}
  21.                         items={items}
  22.                         onClick={onMenuClick}
  23.                         style={{height: '100%', borderRight: 0}}></Menu>
  24.                 </Sider>
  25.   <!--省略-->
  26.             </Layout>
  27.         </Layout>
  28.     )
  29. }
  30. export default GeekLayout
复制代码
  结果
  

展示个人信息

实现步骤
   修改 store/module/user.js
  1. import {createSlice} from '@reduxjs/toolkit'
  2. import {getToken, request, setToken as _setToken} from '@/utils'
  4. const userStore = createSlice({
  5.     name: 'user',
  6.     // 数据状态
  7.     initialState: {
  8.         token: getToken() || '',
  9.         userInfo: {}
  10.     },
  11.     // 同步修改方法
  12.     reducers: {
  13.         setToken(state, action) {
  14.             state.token = action.payload
  15.             _setToken(action.payload)
  16.         },
  17.         setUserInfo(state, action) {
  18.             state.userInfo = action.payload
  19.         }
  20.     }
  21. })
  23. // 解构出actionCreater
  24. const {setToken, setUserInfo} = userStore.actions
  26. // 获取reducer函数
  27. const userReducer = userStore.reducer
  29. // 异步方法封装
  30. const fetchLogin = (loginForm) => {
  31.     return async (dispatch) => {
  32.         const res = await request.post('/authorizations', loginForm)
  33.         dispatch(setToken(res.data.token))
  34.     }
  35. }
  36. const fetchUserInfo = () => {
  37.     return async (dispatch) => {
  38.         const res = await request.get('/user/profile')
  39.         dispatch(setUserInfo(res.data))
  40.     }
  41. }
  42. export {fetchLogin, fetchUserInfo}
  44. export default userReducer
复制代码
  主页面布局表现
  这里展示的是新增的代码 必要去修改header里的user-name的内容改为我们获取到的username
  1.     const dispatch = useDispatch()
  2.     const name = useSelector(state => state.user.userInfo.name)
  3.     useEffect(() => {
  4.         dispatch(fetchUserInfo())
  5.     }, [dispatch])
  7. <Header className="header">
  8.                 <div className="logo"/>
  9.                 <div className="user-info">
  10.                     <span className="user-name">{name}</span>
  11.                     <span className="user-logout">
  12.             <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
  13.               <LogoutOutlined/> 退出
  14.             </Popconfirm>
  15.           </span>
  16.                 </div>
  17.             </Header>
复制代码

退出登录


   绑定变乱
  在layout.jsx中找到退出相关的组件Popconfirm
  这个组件有是否确认变乱的绑定方法 onConfirm={onConfirm}
  ​ 在store文件夹下user.js的reducer中增加清除用户信息的方法
  1. // 同步修改方法
  2.     reducers: {
  3.         clearUserInfo(state) {
  4.             state.token = ''
  5.             state.userInfo = {}
  6.             clearToken()
  7.         }
复制代码
在相应变乱方法中调用方法 清除用户信息
  1.    const onConfirm = () => {
  2.         dispatch(clearUserInfo())
  3.         navigate('/login')
  4.     }
复制代码

   结果
  点击确认退出后 乐成被定向到登录页面

处理失效token

为了方便管理以及控制性能 token一样寻常都会有一个有效时间, 通常后端token失效都会返回401 所以我们可以监控后端返回的状态码 来做后续操纵 如 退出登录 或 续费token

来到 request工具类中的相应拦截器 拿到相应结果并且校验状态码是否是401
  1. request.interceptors.response.use((response) => {
  2.     // 2xx 范围内的状态码都会触发该函数。
  3.     // 对响应数据做点什么
  4.     return response.data
  5. }, (error) => {
  6.     // 超出 2xx 范围的状态码都会触发该函数。
  7.     // 401代表token失效 需要清除当前token
  8.     if (error.response.status === 401) {
  9.         clearToken()
  10.         // 这里有问题 是因为使用createBrownRouter创建的实例无法使用navigate,暂时先这么写 后续会修改
  11.         router.navigate('/login').then(() => {
  12.             window.location.reload()
  13.         })
  14.     }
  15.     return Promise.reject(error)
  16. })
复制代码
  怎样查看结果?
  在控制台将本地的token修改几位 革新就可以触发401 之后查看结果是否乐成
  主页可视化图表

使用 echarts
  1. npm i echarts
复制代码
  基础demo
  从官方文档复制个demo进来
  1. import {useEffect, useRef} from "react";
  2. import * as echarts from 'echarts'
  4. export const Home = () => {
  5.     const chartRef = useRef(null)
  6.     useEffect(() => {
  7.         // 1. 生成实例
  8.         const myChart = echarts.init(chartRef.current)
  9.         // 2. 准备图表参数
  10.         const option = {
  11.             xAxis: {
  12.                 type: 'category',
  13.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  14.             },
  15.             yAxis: {
  16.                 type: 'value'
  17.             },
  18.             series: [
  19.                 {
  20.                     data: [120, 200, 150, 80, 70, 110, 130],
  21.                     type: 'bar'
  22.                 }
  23.             ]
  24.         }
  25.         // 3. 渲染参数
  26.         myChart.setOption(option)
  27.     }, [])
  29.     return (
  30.         <div>
  31.             <div ref={chartRef} style={{width: '400px', height: '300px'}}/>
  32.         </div>
  33.     )
  35. }
复制代码
封装echarts组件

将内容抽象出来,将不一样的部门抽象为参数适配

然后将图标代码提取出来 开始修改: 将title, x数据, y数据, 样式作为参数
  1. import {useEffect, useRef} from 'react'
  2. import * as echarts from 'echarts'
  4. const BarChart = ({title, xData, sData, style = {width: '400px', height: '300px'}}) => {
  5.     const chartRef = useRef(null)
  6.     useEffect(() => {
  7.         // 1. 生成实例
  8.         const myChart = echarts.init(chartRef.current)
  9.         // 2. 准备图表参数
  10.         const option = {
  11.             title: {
  12.                 text: title
  13.             },
  14.             xAxis: {
  15.                 type: 'category',
  16.                 data: xData
  17.             },
  18.             yAxis: {
  19.                 type: 'value'
  20.             },
  21.             series: [
  22.                 {
  23.                     data: sData,
  24.                     type: 'bar'
  25.                 }
  26.             ]
  27.         }
  28.         // 3. 渲染参数
  29.         myChart.setOption(option)
  30.     }, [sData, xData])
  31.     return <div ref={chartRef} style={style}></div>
  32. }
  34. export {BarChart}
复制代码
  修改home内容
  1. import {BarChart} from "@/pages/Home/components/BarChat";
  3. export const Home = () => {
  4.     return (
  5.         <div>
  6.             <BarChart
  7.                 title={'三个框架满意度'}
  8.                 xData={['Vue', 'React', 'Angular']}
  9.                 sData={[2000, 5000, 1000]}/>
  11.             <BarChart
  12.                 title={'三个框架使用数量'}
  13.                 xData={['Vue', 'React', 'Angular']}
  14.                 sData={[200, 500, 100]}
  15.                 style={{width: '500px', height: '400px'}}/>
  16.         </div>
  17.     )
  19. }
复制代码
API封装

我们必要优化项目格式, 必要将接口请求维护在一个固定的模块里,但是怎样编写每个团队都有区别 仅提供参考


  1. // 用户相关的所有请求
  2. import {request} from "@/utils";
  4. //登录请求
  5. export function loginAPI(formData) {
  6.     return request({
  7.         url: '/authorizations',
  8.         method: 'POST',
  9.         data: formData
  10.     })
  11. }
  13. // 获取用户信息
  14. export function getProfileAPI() {
  15.     return  request({
  16.         url: '/user/profile',
  17.         method: 'GET',
  18.     })
  19. }
复制代码
  修改 store中user.js的调用方式
  1. // 异步方法封装
  2. const fetchLogin = (loginForm) => {
  3.     return async (dispatch) => {
  4.         const res = await loginAPI(loginForm)
  5.         dispatch(setToken(res.data.token))
  6.     }
  7. }
  8. const fetchUserInfo = () => {
  9.     return async (dispatch) => {
  10.         const res = await getProfileAPI()
  11.         dispatch(setUserInfo(res.data))
  12.     }
  13. }
复制代码
文章发布

基础文章结构

开发三个步骤:
   静态结构
  publish/index.js
  1. import {
  2.   Card,
  3.   Breadcrumb,
  4.   Form,
  5.   Button,
  6.   Radio,
  7.   Input,
  8.   Upload,
  9.   Space,
  10.   Select
  11. } from 'antd'
  12. import { PlusOutlined } from '@ant-design/icons'
  13. import { Link } from 'react-router-dom'
  14. import './index.scss'
  16. const { Option } = Select
  18. const Publish = () => {
  19.   return (
  20.     <div className="publish">
  21.       <Card
  22.         title={
  23.           <Breadcrumb items={[
  24.             { title: <Link to={'/'}>首页</Link> },
  25.             { title: '发布文章' },
  26.           ]}
  27.           />
  28.         }
  29.       >
  30.         <Form
  31.           labelCol={{ span: 4 }}
  32.           wrapperCol={{ span: 16 }}
  33.           initialValues={{ type: 1 }}
  34.         >
  35.           <Form.Item
  36.             label="标题"
  37.             name="title"
  38.             rules={[{ required: true, message: '请输入文章标题' }]}
  39.           >
  40.             <Input placeholder="请输入文章标题" style={{ width: 400 }} />
  41.           </Form.Item>
  42.           <Form.Item
  43.             label="频道"
  44.             name="channel_id"
  45.             rules={[{ required: true, message: '请选择文章频道' }]}
  46.           >
  47.             <Select placeholder="请选择文章频道" style={{ width: 400 }}>
  48.               <Option value={0}>推荐</Option>
  49.             </Select>
  50.           </Form.Item>
  51.           <Form.Item
  52.             label="内容"
  53.             name="content"
  54.             rules={[{ required: true, message: '请输入文章内容' }]}
  55.           ></Form.Item>
  57.           <Form.Item wrapperCol={{ offset: 4 }}>
  58.             <Space>
  59.               <Button size="large" type="primary" htmlType="submit">
  60.                 发布文章
  61.               </Button>
  62.             </Space>
  63.           </Form.Item>
  64.         </Form>
  65.       </Card>
  66.     </div>
  67.   )
  68. }
  70. export default Publish
复制代码
index.scss
  1. .publish {
  2.   position: relative;
  3. }
  5. .ant-upload-list {
  6.   .ant-upload-list-picture-card-container,
  7.   .ant-upload-select {
  8.     width: 146px;
  9.     height: 146px;
  10.   }
  11. }
  13. .publish-quill {
  14.   .ql-editor {
  15.     min-height: 300px;
  16.   }
  17. }
复制代码
  结果
  

富文本编辑器

导入依赖:
  1. npm i react-quill@2.0.0-beta.2
复制代码
开发方式:
在必要放入富文本编辑器的位置放入代码
  1. //在文章头部导入需要的样式      
  2. import 'react-quill/dist/quill.snow.css'
  4. {/*富文本编辑器*/}
  5.                     <Form.Item
  6.                         label="内容"
  7.                         name="content"
  8.                         rules={[{required: true, message: '请输入文章内容'}]}
  9.                     > <ReactQuill
  10.                         className="publish-quill"
  11.                         theme="snow"
  12.                         placeholder="请输入文章内容"
  13.                     /></Form.Item>
复制代码
  结果
  

频道数据渲染


   添加apis
  

  1. import {request} from "@/utils";
  3. // 获取文章频道列表
  4. export function getChannels() {
  5.     return request({
  6.         url: '/channels',
  7.         method: 'GET'
  8.     })
  10. }
复制代码
  发布界面
  
  1.     const [channels, setChannels] = useState([]);
  2.     useEffect(() => {
  3.         async function getChannelList() {
  4.             const res = await getChannels();
  5.             setChannels(res.data.channels)
  6.         }
  8.         getChannelList()
  9.     }, []);
  11.   return (    <Form.Item
  12.                  label="频道"
  13.                  name="channel_id"
  14.                  rules={[{required: true, message: '请选择文章频道'}]}
  15.                 >
  16.                         <Select placeholder="请选择文章频道" style={{width: 300}}>
  17.                             {channels.map((item) => (
  18.                                 <Option key={item.id} value={item.id}>{item.name}</Option>
  19.                             ))}
  20.                         </Select>
  21.                </Form.Item>)
复制代码
  提交接口
  
这里由于react和富文本的兼容问题 我们必要手动的获取到富文本的内容将他放入到对应表单属性的value中
  1.     const [form] = Form.useForm();
  2.     const onFinish = (formValue) => {
  3.         console.log(formValue)
  4.     }
  5.     const onRichTextChange = (value) => {
  6.         form.setFieldsValue({content: value});
  7.     };
  8. return(
  9.            {/*富文本编辑器*/}
  10.                     <Form.Item
  11.                         label="内容"
  12.                         name="content"
  13.                         rules={[{required: true, message: '请输入文章内容'}]}
  14.                     > <ReactQuill
  15.                         className="publish-quill"
  16.                         theme="snow"
  17.                         placeholder="请输入文章内容"
  18.                         onChange={onRichTextChange}
  19.                     ></ReactQuill></Form.Item>)
复制代码
  结果
  

发布基础文章

在文章apis中新增请求方法
  1. // 提交文章表单
  2. export function createArticleAPI(data) {
  3.     return request({
  4.         url: '/mp/articles?draft=false',
  5.         method: 'POST',
  6.         data
  7.     })
  8. }
复制代码
提交表单
  1.     const onFinish = (formValue) => {
  2.         const {channel_id, content, title} = formValue
  3.         const reqData = {
  4.             content,
  5.             title,
  6.             cover: {
  7.                 type: 0,
  8.                 images: []
  9.             }, channel_id
  10.         }
  11.         //   提交数据
  12.         createArticleAPI(reqData)
  13.     }
复制代码
  结果
  

上传封面

基础上传

我们必要一个上传小组件 类似下图:

   结构代码
  将代码放入 publish组件内容标签的上面 ,

  1. import { useState } from 'react'
  3. const Publish = () => {
  4.   // 上传图片
  5.   const [imageList, setImageList] = useState([])
  6.   const onUploadChange = (info) => {
  7.       setImageList(info.fileList)
  8.   }
  9.   return (
  10.            <Form.Item label="封面">
  11.       <Form.Item name="type">
  12.         <Radio.Group>
  13.           <Radio value={1}>单图</Radio>
  14.           <Radio value={3}>三图</Radio>
  15.           <Radio value={0}>无图</Radio>
  16.         </Radio.Group>
  17.       </Form.Item>
  18.       <Upload
  19.         name="image"
  20.         listType="picture-card"
  21.         showUploadList
  22.         action={'http://geek.itheima.net/v1_0/upload'}
  23.         onChange={onUploadChange}
  24.       >
  25.         <div style={{ marginTop: 8 }}>
  26.           <PlusOutlined />
  27.         </div>
  28.       </Upload>
  29.     </Form.Item>
  30.   )
  31. }
复制代码
  结果
  

上传乐成了
切换封面类型

我们必要根据封面的是三个单选框的选项来决定是否必要表现上传图标

通过 Radio组件的onChange回调函数就可以拿到我们的对应选项 ,
这样在选择无图的时间 上传组件就会隐蔽
  1. // 记录图片上传类型选择
  2.     const [imageType, setImageType] = useState(0)
  3.     // 类型选择回调
  4.     const onTypeChange = (value) => {
  5.         setImageType(value.target.value)
  6.     }
  8. <Form.Item label="封面">
  9.          <Form.Item name="type">
  10.                  <Radio.Group onChange={onTypeChange}>
  11.                                 <Radio value={1}>单图</Radio>
  12.                                 <Radio value={3}>三图</Radio>
  13.                                 <Radio value={0}>无图</Radio>
  14.                             </Radio.Group>
  15.                         </Form.Item>
  16.                         {imageType > 0 && <Upload
  17.                             name="image"
  18.                             listType="picture-card"
  19.                             showUploadList
  20.                             action=                  {'http://geek.itheima.net/v1_0/upload'}
  21.                             onChange={onUploadChange}
  22.                         >
  23.                             <div style={{marginTop: 8}}>
  25.                             </div>
  26.                         </Upload>}
  27.                     </Form.Item>
复制代码
  结果
  无图:

有图:

这里必要注意就是我们之前的静态模版有一个默认属性 type是1 这会导致上传组件的表现有问题,改为和 state一样的 0 即可

控制上传图片的数量

我们必要控制 如:

只必要将上传绑定的type表现他的最大数量就行了,
ps: 问题 安全性不高 而且之前更换掉的图片还是会占用信息

发表带图片的文章

我们之前上传基础文章的时间 有一个属性 : cover是空白的 如今我们必要将imagelist和这个cover绑定 就可以上传封面了

   修改方法 onFinish
  1.     const onFinish = (formValue) => {
  2.         // 判断type和图片数量是否相等
  3.         if (imageList.length !== imageType) {
  4.             return message.warning('封面类型和图片数量不匹配')
  5.         }
  6.         const {channel_id, content, title} = formValue
  7.         const reqData = {
  8.             content,
  9.             title,
  10.             cover: {
  11.                 type: imageType,
  12.                 images: imageList.map(item => item.response.data.url)
  13.             }, channel_id
  14.         }
  15.         //   提交数据
  16.         createArticleAPI(reqData).then(data => {
  17.             if (data.message === 'OK') {
  18.                 message.success('文章发布成功')
  19.                 form.resetFields()
  20.                 setImageType(0)
  21.             }
  22.         })
  23.     }
复制代码
  结果
  

提交之后的信息

上传乐成
校验类型

我们必要制止 三图封面只上传了两张图片的情况 所以还必要在上传方法中增加一些判定
  1. const onFinish = (formValue) => {
  2.         // 判断type和图片数量是否相等
  3.         if (imageList.length !== imageType) {
  4.             return message.warning('封面类型和图片数量不匹配')
  5.         }
  6.         const {channel_id, content, title} = formValue
  7.         const reqData = {
  8.             content,
  9.             title,
  10.             cover: {
  11.                 type: imageType,
  12.                 images: imageList.map(item => item.response.data.url)
  13.             }, channel_id
  14.         }
  15.         //   提交数据
  16.         createArticleAPI(reqData)
  17.     }
复制代码
文章列表

放入结构

小细节:
  1. import {Link} from 'react-router-dom'
  2. // 导入资源
  3. import {Breadcrumb, Button, Card, DatePicker, Form, Radio, Select, Space, Table, Tag} from 'antd'
  4. import locale from 'antd/es/date-picker/locale/zh_CN'
  5. import {DeleteOutlined, EditOutlined} from "@ant-design/icons";
  7. const {Option} = Select
  8. const {RangePicker} = DatePicker
  10. export const Article = () => {
  11.     // 准备列数据
  12.     const columns = [
  13.         {
  14.             title: '封面',
  15.             dataIndex: 'cover',
  16.             width: 120,
  17.             render: cover => {
  18.                 return <img src={cover.images[0] || 'img404'} width={80} height={60} alt=""/>
  19.             }
  20.         },
  21.         {
  22.             title: '标题',
  23.             dataIndex: 'title',
  24.             width: 220
  25.         },
  26.         {
  27.             title: '状态',
  28.             dataIndex: 'status',
  29.             render: data => <Tag color="green">审核通过</Tag>
  30.         },
  31.         {
  32.             title: '发布时间',
  33.             dataIndex: 'pubdate'
  34.         },
  35.         {
  36.             title: '阅读数',
  37.             dataIndex: 'read_count'
  38.         },
  39.         {
  40.             title: '评论数',
  41.             dataIndex: 'comment_count'
  42.         },
  43.         {
  44.             title: '点赞数',
  45.             dataIndex: 'like_count'
  46.         },
  47.         {
  48.             title: '操作',
  49.             render: data => {
  50.                 return (
  51.                     <Space size="middle">
  52.                         <Button type="primary" shape="circle" icon={<EditOutlined/>}/>
  53.                         <Button
  54.                             type="primary"
  55.                             danger
  56.                             shape="circle"
  57.                             icon={<DeleteOutlined/>}
  58.                         />
  59.                     </Space>
  60.                 )
  61.             }
  62.         }
  63.     ]
  64.     // 准备表格body数据
  65.     const data = [
  66.         {
  67.             id: '8218',
  68.             comment_count: 0,
  69.             cover: {
  70.                 images: [],
  71.             },
  72.             like_count: 0,
  73.             pubdate: '2019-03-11 09:00:00',
  74.             read_count: 2,
  75.             status: 2,
  76.             title: 'wkwebview离线化加载h5资源解决方案'
  77.         }
  78.     ]
  79.     return (
  80.         <div>
  81.             <Card
  82.                 title={
  83.                     <Breadcrumb items={[
  84.                         {title: <Link to={'/'}>首页</Link>},
  85.                         {title: '文章列表'},
  86.                     ]}/>
  87.                 }
  88.                 style={{marginBottom: 20}}
  89.             >
  90.                 <Form initialValues={{status: ''}}>
  91.                     <Form.Item label="状态" name="status">
  92.                         <Radio.Group>
  93.                             <Radio value={''}>全部</Radio>
  94.                             <Radio value={0}>草稿</Radio>
  95.                             <Radio value={2}>审核通过</Radio>
  96.                         </Radio.Group>
  97.                     </Form.Item>
  99.                     <Form.Item label="频道" name="channel_id">
  100.                         <Select
  101.                             placeholder="请选择文章频道"
  102.                             defaultValue="lucy"
  103.                             style={{width: 120}}
  104.                         >
  105.                             <Option value="jack">Jack</Option>
  106.                             <Option value="lucy">Lucy</Option>
  107.                         </Select>
  108.                     </Form.Item>
  110.                     <Form.Item label="日期" name="date">
  111.                         {/* 传入locale属性 控制中文显示*/}
  112.                         <RangePicker locale={locale}></RangePicker>
  113.                     </Form.Item>
  115.                     <Form.Item>
  116.                         <Button type="primary" htmlType="submit" style={{marginLeft: 40}}>
  117.                             筛选
  118.                         </Button>
  119.                     </Form.Item>
  120.                 </Form>
  121.             </Card>
  122.             {/*表格区域*/}
  123.             <Card title={`根据筛选条件共查询到 count 条结果：`}>
  124.                 <Table rowKey="id" columns={columns} dataSource={data}/>
  125.             </Card>
  126.         </div>
  127.     )
  128. }
复制代码
频道模块渲染

我们这次接纳 自定义业务hook的方式实现获取频道信息


   代码
  1. // 封装获取频道列表的逻辑
  2. import {useEffect, useState} from "react";
  3. import {getChannels} from "@/apis/article";
  5. function useChannel() {
  6. //     1. 获取频道列表的所有逻辑
  7.     const [channels, setChannels] = useState([]);
  8.     useEffect(() => {
  9.         async function getChannelList() {
  10.             const res = await getChannels();
  11.             setChannels(res.data.channels)
  12.         }
  14.         getChannelList()
  15.     }, [])
  16. //     2. 把数据导出
  17.     return {channels};
  18. }
  20. export {useChannel}
复制代码
这样就可以去改造一下之前的publish获取频道的逻辑 也可以在新的组件中直接使用频道数据
   将数据放入文章编辑中
  找到频道标签 修改options
  1.   {channels.map(item => <Option value={item.id}>{item.name}</Option>)}
复制代码
  结果
  

渲染文章列表数据


   请求方法 /apis/article.js
  1. //获取文章列表
  2. export function getArticleAPI(params) {
  3.     return request({
  4.         url: '/mp/articles',
  5.         method: 'GET',
  6.         params
  7.     })
  8. }
复制代码
  Article 组件
  1. import {Link} from 'react-router-dom'// 导入资源import {Breadcrumb, Button, Card, DatePicker, Form, Radio, Select, Space, Table, Tag} from 'antd'import locale from 'antd/es/date-picker/locale/zh_CN'import {useChannel} from "@/hooks/useChannel";import {useEffect, useState} from "react";import {getArticleAPI} from "@/apis/article";import {DeleteOutlined, EditOutlined} from "@ant-design/icons";const {Option} = Selectconst {RangePicker} = DatePickerexport const Article = () => {    // 获取频道数据    const {channels} = useChannel()    // 准备列数据    const columns = [        {            title: '封面',            dataIndex: 'cover',            width: 120,            render: cover => {                return <img src={cover.images[0] || 'img404'} width={80} height={60} alt=""/>            }        },        {            title: '标题',            dataIndex: 'title',            width: 220        },        {            title: '状态',            dataIndex: 'status',            render: data => <Tag color="green">考核通过</Tag>        },        {            title: '发布时间',            dataIndex: 'pubdate'        },        {            title: '阅读数',            dataIndex: 'read_count'        },        {            title: '评论数',            dataIndex: 'comment_count'        },        {            title: '点赞数',            dataIndex: 'like_count'        },        {            title: '操纵',            render: data => {                return (                    <Space size="middle">                        <Button type="primary" shape="circle" icon={<EditOutlined/>}/>                        <Button                            type="primary"                            danger                            shape="circle"                            icon={<DeleteOutlined/>}                        />                    </Space>                )            }        }    ]    // 获取文章列表    const [list, setList] = useState([])    useEffect(() => {        async function getList() {            const res = await getArticleAPI();            setList(res.data.results)        }        getList()    }, []);    return (        <div>            <Card                title={                    <Breadcrumb items={[                        {title: <Link to={'/'}>首页</Link>},                        {title: '文章列表'},                    ]}/>                }                style={{marginBottom: 20}}            >                <Form initialValues={{status: ''}}>                    <Form.Item label="状态" name="status">                        <Radio.Group>                            <Radio value={''}>全部</Radio>                            <Radio value={0}>草稿</Radio>                            <Radio value={2}>考核通过</Radio>                        </Radio.Group>                    </Form.Item>                    <Form.Item label="频道" name="channel_id">                        <Select                            placeholder="请选择文章频道"                            style={{width: 120}}                        >                            {channels.map(item => <Option value={item.id}>{item.name}</Option>)}
  2.                         </Select>                    </Form.Item>                    <Form.Item label="日期" name="date">                        {/* 传入locale属性 控制中文表现*/}                        <RangePicker locale={locale}></RangePicker>                    </Form.Item>                    <Form.Item>                        <Button type="primary" htmlType="submit" style={{marginLeft: 40}}>                            筛选                        </Button>                    </Form.Item>                </Form>            </Card>            {/*表格地域*/}            <Card title={`根据筛选条件共查询到 ${list.length} 条结果：`}>                <Table rowKey="id" columns={columns} dataSource={list}/>            </Card>        </div>    )}
复制代码
文章状态

我们必要根据不同的文章状态表现不同的tag , 我们在用枚举渲染的方式实现这个多种状态的表现,
我们之前的代码中有专门控制每一列表现的数组

这里我们就可以根据 拿到的数据 利用 render属性 来渲染出来必要的tag
通过接口文档我们知道目前支持两种状态 :

   文章列表组件中添加
  
  1.     // 文章状态枚举
  2.     const status = {
  3.         1:<Tag color={"warning"}>待审核</Tag>,
  4.         2:<Tag color={"success"}>审核通过</Tag>
  5.     }
  6.    
  7.             {
  9.             title: '状态',
  10.             dataIndex: 'status',
  11.             render: data => status[data]
  12.         }
复制代码
  结果
  

文章筛选

我们必要根据 :

来筛选必要的文章
本质就是给请求列表的接口转达不同的参数
   接口文档的参数
  

  1.     // 查询筛选参数
  2.     const [reqData, setReqData] = useState(
  3.         {
  4.             status: '',
  5.             channel_id: '',
  6.             begin_pubdate: '',
  7.             end_pubdate: '',
  8.             page: 1,
  9.             per_page: 4,
  10.         }
  11.     );
复制代码
这里我们利用 useEffect的机制 维护的依赖项有变动 就会重新执行内部代码 ,拉取文章数据 所以我们必要将reqdata放入之前请求列表的参数中个,之前这个参数是没有转达的
   完备代码
  1.   // 查询筛选参数
  2.     const [reqData, setReqData] = useState(
  3.         {
  4.             status: '',
  5.             channel_id: '',
  6.             begin_pubdate: '',
  7.             end_pubdate: '',
  8.             page: 1,
  9.             per_page: 4,
  10.         }
  11.     );
  12.     const onReqFinish = (formValue) => {
  13.         // 1. 准备参数
  14.         const {channel_id, date, status} = formValue
  15.         setReqData({
  16.             status,
  17.             channel_id,
  18.             begin_pubdate: date[0].format('YYYY-MM-DD'),
  19.             end_pubdate: date[1].format('YYYY-MM-DD'),
  20.         })
  21.     }
  22.     // 获取频道数据
  23.     const {channels} = useChannel()
  24.     // 获取文章列表
  25.     const [list, setList] = useState([])
  26.     useEffect(() => {
  27.         async function getList() {
  28.             const res = await getArticleAPI(reqData);
  29.             setList(res.data.results)
  30.         }
  32.         getList()
  33.     }, [reqData]);
复制代码
  结果
  

分页实现

分页公式 : 页数 = 总数/每条数
思路 : 将页数作为请求参数重新渲染文章列表
找到文章列表对应的table标签 配置 pagination属性
   补充 维护一个count
  

在请求文章列表的时间 把这个属性放入count维护即可
  1.     useEffect(() => {
  2.         async function getList() {
  3.             const res = await getArticleAPI(reqData);
  4.             setList(res.data.results)
  5.             setCount(res.data.total_count)
  6.         }
  8.         getList()
  9.     }, [reqData]);
复制代码
  代码
  简单的分页就完成了 :

  1.             {/*表格区域*/}
  2.             <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
  3.                 <Table rowKey="id" columns={columns} dataSource={list} pagination={{
  4.                     total: count,
  5.                     pageSize: reqData.per_page,
  6.                 }}/>
  7.             </Card>
复制代码

   根据对应的页数来请求对应文章
  pagination中使用 onchange 变乱来完成对应页数的请求
标签改动:
  1.                <Table rowKey="id" columns={columns} dataSource={list} pagination={{
  2.                     total: count,
  3.                     pageSize: reqData.per_page,
  4.                     onChange: onPageChange
  5.                 }}/>
复制代码
新增方法:
page 参数会拿到点击的对应页数 ,根据特性我们只必要改变参数 就会触发useEffect来更新数据
  1.     const onPageChange = (page) => {
  2.         setReqData({
  3.             ...reqData,
  4.             page: page
  5.         })
  6.     }
复制代码
文章删除

在 /APIS/Article.js新增请求方法
  1. //删除文章
  2. export function deleteArticleAPI(data) {
  3.     return request({
  4.         url: `/mp/articles/${data.id}`,
  5.         method: 'DELETE',
  6.     })
  7. }
复制代码
  添加静态文件
  在行数据数组中找到 操纵 添加确认组件 绑定onConfirm变乱
  1.              <Popconfirm
  2.                             title="确认删除该条文章吗?"
  3.                             onConfirm={() => delArticle(data)}
  4.                             okText="确认"
  5.                             cancelText="取消"
  6.                         >
  7.                             <Button
  8.                                 type="primary"
  9.                                 danger
  10.                                 shape="circle"
  11.                                 icon={<DeleteOutlined/>}
  12.                             />
  13.                         </Popconfirm>
复制代码
  变乱代码
  1.     const delArticle = async (data) => {
  2.         await deleteArticleAPI(data)
  3.         // 更新列表
  4.         setReqData({
  5.             ...reqData
  6.         })
  7.     }
复制代码
编辑文章

我们点击编辑按钮的时间 必要携带文章id 跳转到文章编写页面,
  1. const navigate = useNavigate();
  2. //样式代码
  3. <Button type="primary" shape="circle" icon={<EditOutlined/>} onClick={() => navigate(`/publish?id=${data.id}`)}/>
复制代码
  结果
  

载入文章数据

通过传入的id获取到文章数据 使用表单组件的实例方法 setFieldsValue填进去即可
在 /APIS/Article.js新增请求方法
  1. //获取文章数据
  2. export function getArticleById(id) {
  3.     return request({
  4.         url: `/mp/articles/${id}`,
  5.     })
  6. }
复制代码
  使用 钩子来做到革新就回填数据
  1.     // 载入文章数据
  2.     const [searchParams] = useSearchParams();
  3.     // 文章数据
  4.     const articleId = searchParams.get('id');
  5.     useEffect(() => {
  6.         async function getArticleDetail() {
  7.             const res = await getArticleById(articleId)
  8.             const {cover, ...infoValue} = res.data
  9.             form.setFieldsValue({...infoValue, type: cover.type})
  10.             setImageType(cover.type)
  11.             setImageList(cover.images.map(url => ({url})))
  12.         }
  14.         if (articleId) {
  15.             getArticleDetail()
  16.         }
  17.     }, [articleId, form])
复制代码
这里必要在 上传框加入一个属性 fileList
  1. {imageType > 0 && <Upload
  2.                             name="image"
  3.                             listType="picture-card"
  4.                             showUploadList
  5.                             action={'http://geek.itheima.net/v1_0/upload'}
  6.                             onChange={onUploadChange}
  7.                             maxCount={imageType}
  8.                             fileList={imageList}
  9.                         >
  10.                             <div style={{marginTop: 8}}>
  11.                                 <PlusOutlined/>
  12.                             </div>
  13.                         </Upload>}
复制代码
根据id 展示状态

找到 title中的发布文章 判定是否有id
  1.             <Card
  2.                 title={
  3.                     <Breadcrumb items={[
  4.                         {title: <Link to={'/'}>首页</Link>},
  5.                         {title: `${articleId ? '编辑文章' : '发布文章'}`}
  6.                     ]}
  7.                     />
  8.                 }
  9.             >
复制代码
更新文章

做完内容修改后 必要确认更新文章内容 并且校对文章数据 然后更新文章
我们必要适配url参数 因为我们的图片每个接口的转达必要的格式不同
   新增更新文章方法
  /apis/article.js
  1. // 修改文章表单
  2. export function updateArticleAPI(data) {
  3.     return request({
  4.         url: `/mp/articles/${data.id}?draft=false`,
  5.         method: 'PUT',
  6.         data
  7.     })
  8. }
复制代码
  修改 onfinish方法
  1.     const onFinish = (formValue) => {
  2.         // 判断type和图片数量是否相等
  3.         if (imageList.length !== imageType) {
  4.             return message.warning('封面类型和图片数量不匹配')
  5.         }
  6.         const {channel_id, content, title} = formValue
  7.         const reqData = {
  8.             content,
  9.             title,
  10.             cover: {
  11.                 type: imageType,
  12.                 // 编辑url的时候也需要做处理
  13.                 images: imageList.map(item => {
  14.                     if (item.response) {
  15.                         return item.response.data.url
  16.                     } else {
  17.                         return item.url
  18.                     }
  19.                 })
  20.             }, channel_id
  21.         }
  22.         //   提交数据
  23.         // 需要判断 新增和修改接口的调用
  24.         if (articleId) {
  25.             updateArticleAPI({...reqData, id: articleId}).then(data => {
  26.                 if (data.message === 'OK') {
  27.                     message.success('文章修改成功')
  28.                 }
  29.             })
  30.         } else {
  31.             createArticleAPI(reqData).then(data => {
  32.                 if (data.message === 'OK') {
  33.                     message.success('文章发布成功')
  34.                     form.resetFields()
  35.                     setImageType(0)
  36.                 }
  37.             })
  38.         }
  40.     }
复制代码
  结果
  

打包优化

CRA自带的打包命令
  1. npm run build
  3. # 静态服务器
  4. npm install -g serve
  5. #启动
  6. serve -s build
复制代码
之后就可以在项目文件夹看到

我们必要安装一个本地服务器 就可以跑起来打包好的项目了
配置路由懒加载

就是使路由在必要js的时间 才会获取 可以提高项目标首次启动时间

将路由中组件的导入方式改为lazy
  1. import {createBrowserRouter} from "react-router-dom";
  3. import {Login} from "@/pages/Login";
  4. import {AuthRoute} from "@/components/AuthRoute";
  5. import GeekLayout from "@/pages/Layout";
  6. import {lazy, Suspense} from "react";
  8. // 使用 lazy进行导入
  10. const Home = lazy(() => import("@/pages/Home"));
  11. const Article = lazy(() => import('@/pages/Article'))
  12. const Publish = lazy(() => import('@/pages/Publish'))
  14. const router = createBrowserRouter([
  15.     {
  16.         path: '/',
  17.         element: <AuthRoute><GeekLayout/></AuthRoute>,
  18.         children: [{
  19.             path: '/',
  20.             element: <Suspense fallback={'加载中'}><Home></Home></Suspense>
  21.         }, {
  22.             path: 'article',
  23.             element: <Suspense fallback={'加载中'}><Article></Article></Suspense>
  24.         }, {
  25.             path: 'publish',
  26.             element: <Suspense fallback={'加载中'}><Publish></Publish></Suspense>
  27.         }]
  28.     },
  29.     {
  30.         path: '/login',
  31.         element: <Login/>
  32.     }
  33. ])
  34. export default router
复制代码
只能看看语法了 目前有React18 不知道为什么提示我使用的不对
CDN

意义就是 加载离本地最近的服务器上的文件

Hooks

  ueslocation获取当前的路由位置
  1. // 获取到当前点击的路由
  2.     const location = useLocation();
  3.     const selectedKey = location.pathname;
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4