React快速上手到项目实战总篇

React核心代价与前置知识

时刻保持对知识的渴望 家人们 开学!!!
   核心代价
  

• 组件化（易开发易维护）
  
  
  
  
• 数据驱动视图 ：定义好数据和ui的表现规则 即UI=f(state)
  
  
  
  • 只关注业务数据修改，不在操纵DOM 增加开发服从
    
  
  

  使用vite创建Recat项目

开发规范

使用 prettier & eslint 规范开发

• eslint 检查语法语义
  
• prettier 检查代码风格
  

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的特点：

• Vite打包项目 在启动和代码更新时更快
  
• vite使用了 es Module 语法（仅开发情况）
  

React JSX语法

内容 ：

• JSX语法
  
• 组件和props
  
• 实战： 列表页
  

JSX特点:

• JSX是js的扩展 写在js代码内里 组件的ui结构
  
• 语法和html很相似
  
• 不光是React独有
  

标签

• 首字母巨细写的区别 ， 大写字母是自定义组件
  
• 标签必须闭合 如<input>在jsx黑白法的
  
• 每段JSX中只有一个根节点
  

属性

和html根本相似

• class要改为 className
  
• style要使用js对象 不能是string 而且key必要使用驼峰写法
  

如下

在JSX中插入js变量

• 使用{}可以插入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. }

复制代码

结果 ：

循环

• 使用map来循环
  
• 每一个循环项（item）都要有key
  
• key必要具有唯一性
  

   实现

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 齐备皆是组件

• 组件拥有一个ui片段
  
• 拥有独立的逻辑和表现
  
• 可大可小 可以嵌套
  

   组件拆分的代价和意义
  

• 组件嵌套来构造的 ui 结构 和 html 一样没有学习成本
  
• 精良的拆分组件利于代码维护和多人协同开发
  
• 封装公共组件或者直接使用第三方组件复用代码
  

好的组件化 逻辑是清楚的 更能提拔开发服从并且更加的雅观易读

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

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

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

• 组件可以嵌套 有层级关系
  
• 父组件可以向子组件转达数据
  
• 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. }

复制代码

小结：

• 怎样定义和使用组件
  
• props-父组件给子组件转达数据
  
• 重构列表页 抽象出QuestionCard
  

   结果
  

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. }

复制代码

兄弟组件转达

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

• 实在就是有共同父组件的两个子组件转达信息
  
• a 转达给父组件 然后由父组件 转达给 b
  

   代码

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('')

复制代码

• useState是一个函数 返回值是一个数组
  
• 数组中的第一个参数是状态变量,第二个参数是set函数用于修改状态
  
• 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 组件通讯

• 使用createContext 方法创建一个上下文对象 ctx=
  
• 在顶层组件 app 中 通过 ctx.Provider提供数据
  
• 在底层组件 通过 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是一个函数,可以把它叫做副作用函数,函数内部可以放置要执行的操纵
  
• 参数2是一个数组 ,数组里放置依赖项,不同依赖项会影响第一个参数的执行,当该参数是一个空数组的时间,副作用函数只会在组件渲染完毕后执行一次
  

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

• 定义redcuer函数 (根据不同的action 返回不同的新状态)
  
• 在组件中调用 useReducer 传入reducer函数和初始状态
  
• 变乱触发的时间,通过 dispatch函数 通过reducer要返回什么状态并且渲染UI
  

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

作用：它在每次重新渲染的时间能够缓存盘算的结果
   小案例
  

• 我们设置一个盘算结果的方法 这个方法直接用 大括号的方式渲染
  
• 设置两个按钮 每次usestate发生变化 都会渲染页面 会导致两个按钮无论点击哪一个都会导致盘算结果方法的内容出现变化
  

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) 可以独立于框架运行

使用思路:

• 定义一个reducer函数 根据当前想要做的修改返回一个新的状态
  
• 使用createStore方法传入reducer函数 天生一个store实例对象
  
  
  • subscribe方法 订阅数据的变化(数据一旦变化，可以得到通知)
    
  • dispatch方法提交action对象 告诉reducer你想怎么改数据
    
  • getstate方法 获取最新的状态数据更新到视图中
    
  
  

配置Redux

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

• 简化store配置
  
• 内置immer可变式状态修改
  
• 内置thunk更好的异步创建
  

调试工具安装

谷歌浏览器搜索 redux-devtool安装 工具
   依赖安装

1. #redux工具包
2. npm i @reduxjs/toolkit react-redux
3. #调试工具包
4. npm install --save-dev redux-devtools-extension

复制代码

store目次机构计划

• 通常会合状态管理的部门都会单独创建一个store目次
  
• 应用通常会有多个子store模块,所以创建一个modules进行内部业务的区分
  
• store中的入口文件index.js 的作用是组合所有modules的子模块 并且导出store
  

快速上手

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

• 使用 Reacttoolkit 创建 counterStore
  
  1. import {createSlice} from "@reduxjs/toolkit";
  3. const counterStore= createSlice({
  4.     name: "counter",
  5.     // 初始化 state
  6.     initialState: {
  7.         count: 0
  8.     },
  9.     // 修改状态的方法
  10.     reducers:{
  11.         increment(state){
  12.             state.count++
  13.         },
  14.         decrement(state){
  15.             state.count--
  16.         }
  17.     }
  18. })
  20. // 解构函数
  21. const {increment,decrement}= counterStore.actions
  22. // 获取reducer
  23. const reducer = counterStore.reducer;
  24. export {increment,decrement}
  25. export default reducer

  复制代码
• 在index.js聚集counter
  
  1. import {configureStore} from "@reduxjs/toolkit";
  2. import counterStore from "./modules/counterStore";
  3. const store = configureStore({
  4.     reducer:{
  5.         couner: counterStore,
  6.     }
  7. })
  9. export default store

  复制代码
• 为React 注入store, react-redux负责把Redux和React链接 起来，内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中 找到项目中的index.js
  
  1. const root = ReactDOM.createRoot(document.getElementById('root'));
  2. root.render(
  3.   <React.StrictMode>
  4.       <Provider store={store}>
  5.           <App />
  6.       </Provider>
  7.   </React.StrictMode>
  8. );

  复制代码
• 使用useSelector 获取到数据
  
  1. import {useSelector} from "react-redux";
  3. function App() {
  4.   const {count} = useSelector(state => state.counter);
  5.   return (
  6.     <div className="App">
  7.       {count}
  8.     </div>
  9.   );
  10. }

  复制代码
• 使用 钩子函数 useDispatch
  
  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;

  复制代码
• 查看结果
  
  
  
  

提交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

• 使用useDispatch函数取得对象
  
• 使用 useEffect 调用异步函数获取服务器数据
  
• 使用useSelector 拿到数据并且循环展示
  

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

• 新增activeIndex并且设置好对应的同步操纵action方法以及导出
  

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触发操纵

• 要记得给 count一个默认值 不然会是 null
  
• 修改 classname为plus的span标签新增点击变乱
  

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

复制代码

  结果
  

统计订单地域

实现思路

• 基于store中的cartList的length渲染数量
  
• 基于store中的cartList累加price * count
  
• 购物车cartList的length不为零则高亮
  
• 设置总价
  

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

复制代码

购物车列表的表现和隐蔽

• 使用usestate设置一个状态
  
• 点击统计的时间就展示
  
• 点击蒙层就不表现
  

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的动态路由传参,

• 我们必要再路由页面给路径一个占位符
  
  
  
  
• 之后编写代码
  Login传参 :
  
  1.         <button onClick={()=>nav('/article/1001/JACK')}>文章</button>

  复制代码
  Article担当:
  
  1.     const params = useParams();
  2.     return (
  3.         <div>我是文章页面
  4.          <div>  id: {params.id}</div>
  5.          <div>  name:{params.name}</div>
  6.         </div>

  复制代码

   结果
  

嵌套路由

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

• 使用 children属性配置路由嵌套关系
  
• 使用 <Outlet>组件配置子路由渲染位置
  

案例

分别创建内容 一级路由 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的组件
  
• 在路由表数组末尾 用*号座位path配置路由
  

   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的动态路由传参,

• 我们必要再路由页面给路径一个占位符
  
  
  
  
• 之后编写代码
  Login传参 :
  
  1.         <button onClick={()=>nav('/article/1001/JACK')}>文章</button>

  复制代码
  Article担当:
  
  1.     const params = useParams();
  2.     return (
  3.         <div>我是文章页面
  4.          <div>  id: {params.id}</div>
  5.          <div>  name:{params.name}</div>
  6.         </div>

  复制代码

极客博客

项目配置

初始化项目 这里依赖的使用:

• react & react-dom 18
  

   规范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

• 安装解析 sass 的包：npm i sass -D
  
• 创建全局样式文件：index.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;

复制代码

  结果
  

配置路由

   导入依赖
  

• 安装路由包  react-router-dom
  
• 准备基础路由组件 Layout和Login
  
• 编写配置
  

在pages中创建好对应的文件夹和组件

然后配置对应的路由文件

• 在router文件夹中创建 index.js
  
• 配置对应的组件路由映射
  

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>

复制代码

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

• 手机号必须是11位并且必须是数字 正则表达式
  
• 并且输入框失去焦点也出发校验 在Form标签添加属性 validateTrigger="onBlur"
  

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
实现步骤

• 打开 antd/Layout 布局组件文档，找到示例：顶部-侧边布局-通栏
  
• 拷贝示例代码到我们的 Layout 页面中
  
• 分析并调整页面布局
  

   主页面模版

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

复制代码

  结果
  

展示个人信息

实现步骤

• 在Redux的store中编写获取用户信息的相关逻辑
  
• 在Layout组件中触发action的执行
  
• 在Layout组件使用使用store中的数据进行用户名的渲染
  

   修改 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>

复制代码

退出登录

• 必要二次确认退出登录
  
• 清除用户信息
  
• 跳转回login页面
  

   绑定变乱
  在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
  
• 使用 useState维护数据
  
• 使用 useEffect将数据存入state
  
• 绑定到下拉框
  

   添加apis
  

1. import {request} from "@/utils";
3. // 获取文章频道列表
4. export function getChannels() {
5.     return request({
6.         url: '/channels',
7.         method: 'GET'
8.     })
10. }

复制代码

  发布界面
  

• 使用 usestate维护列表 并且使用 useEffect请求数据
  
• 渲染数据
  

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>)

复制代码

  提交接口
  

• 使用 form组件收集数据
  
• 根据文档处理表单数据
  

这里由于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组件内容标签的上面 ,

• 这里我们必要编写upload的上传地点
  
• 上传后后端回给到我们一个文件列表我们必要保存用于添加文章信息
  

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绑定 就可以上传封面了

• 我们必要重新组装一下图片列表的信息 上传只必要我们提供 url
  

   修改方法 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.     }

复制代码

文章列表

放入结构

小细节:

• 导入语言包 让日期选择可以识别中文
  
• Select组件配合Form.Item使用时，怎样配置默认选中项
  <Form initialValues={{ status: null }} >
  

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的方式实现获取频道信息

• 创建一个use打头的函数
  
• 在函数中封装业务逻辑并且导出状态数据
  
• 组件中导入函数和执行解构状态数据使用
  

   代码

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>)}

复制代码

  结果
  

渲染文章列表数据

• 声明请求方法
  
• useEffect拿到数据
  
• 渲染数据
  

   请求方法 /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 通过
  

   文章列表组件中添加
  

• 枚举代码
  
• 并且将状态对象的 render 关联到输出枚举内容即可
  

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的时间 才会获取 可以提高项目标首次启动时间

• 把路由修改为React提供的 lazy函数进行动态导入
  
• 使用 react 内置的 Suspense组件 包裹路由中的element
  

将路由中组件的导入方式改为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企服之家，中国第一个企服评测及商务社交产业平台。