新闻发布后台管理系统实战react + axios + react-router(v6) + react-redux + Ant Design + json-server

千锋教育2022版React（项目实战完整版：p152 ~ p200）

技术栈：react、axios、react-router（v6）、react-redux、Ant Design、json-server
特别说明：react-router视频教程用v5，本人用v6

github项目地址

一、创建项目

• 使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

• 安装脚手架create-react-app

npm install -g create-react-app

• 创建项目newsmanagesystem

create-react-app newsmanagesystem

• 安装react-particles插件（粒子特效）

Particle.js 是一个很棒的 JavaScript 库,用于在您的网站上创建 2d 和 3d 外观的粒子。

https://particles.js.org/

安装react-tsparticles和tsparticles

npm install react-tsparticles
npm install tsparticles

如果出现任何遗留错误,请使用 --force

npm install react-tsparticles --force
npm install tsparticles --force

现在从 react-tsparticles 导入 Particles,从 tsparticles 导入 {loadFull}。

import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {

  return (
    <div className="App">
      <h1>Hello Coders!</h1>
    </div>
  );
}

可以通过传递一些属性来使用粒子组件,例如id,init这将是一个初始化函数,options这将是我们想要显示的粒子的配置,或者url使用来自远程 url 的选项.json 网址。

import "./styles.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

export default function App() {
  return (
    <div className="App">
      <h1>Hello Coders!</h1>
      <Particles id="particles-here" init={anInitFunction} options={
        // an config object
      } />
    </div>
  );
}

react-particles使用指南

二、项目配置

1、css模块化

防止不同文件样式相互覆盖

2、安装sass-loader和node-sass依赖（算了，我还是习惯用less）

npm install sass-loader node-sass --save-dev

npm i --save sass

安装less

npm install less --save-dev

3、安装axios和配置反向代理

1）axios和interceptors

安装axios

npm i --save axios

axios拦截配置interceptors

// util/http.js
import axios from 'axios'
import store from '../redux/store';

axios.defaults.baseURL = "http://localhost:3000" // 本地

axios.interceptors.request.use(function (config) { // 请求前拦截
    store.dispatch({
        type: 'changeLoading',
        payload: { loading: true }
    })
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

axios.interceptors.response.use(function (response) { // 响应前拦截
    store.dispatch({
        type: 'changeLoading',
        payload: { loading: false }
    })
    return response;
  }, function (error) {
    store.dispatch({ // 报错也要停止loading
        type: 'changeLoading',
        payload: { loading: false }
    })
    return Promise.reject(error);
  });

引入axios拦截配置文件

// /src/index.js
import './utils/http'

2）反向代理

安装http-proxy-middleware

npm install http-proxy-middleware

新建文件src/setuoProxy.js

const { createProxyMiddleware } =require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'https://i.maoyan.com',
            changeOrigin: true
        })
    )
}

4、路由架构

• 安装路由

npm i --save-dev react-router-dom

如果启动时报错，因为node版本太高导致
解决方法：
如下加上 SET NODE_OPTIONS=–openssl-legacy-provider

// package.json
"scripts": {
    "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
  },

• 配置路由表
  // /src/router/IndexRouter.js

import { HashRouter, useRoutes, Navigate } from 'react-router-dom';
import Login from '../pages/login/Login';
import NewsSandBox from '../pages/sandbox/NewsSandBox';
import Home from '../pages/sandbox/home/Home';
import UserList from '../pages/sandbox/userManage/UserList';
import RightList from '../pages/sandbox/rightManage/RightList';
import RoleList from '../pages/sandbox/rightManage/RoleList';
import NoPermission from '../pages/sandbox/noPermission/NoPermission';

export default function IndexRouter(props) {
    const routes = useRoutes([{
        path: '/login',
        element: <Login />
    },
    // 登录后的新闻系统页面
    {
        path: '/', 
        element: <NewsSandBox />,
        children: [{
            path: '',
            element: <Navigate to='/home' />
        },
        // 1-home
        {
            path: 'home',
            element: <Home />,
        },
        // 2-用户管理
        {
            path: 'userManage', 
            children: [{
                path: '', // 2-1 用户列表
                element: <Navigate to='/userManage/userList' />
            },{
                path: 'userList',
                element: <UserList />,
            }]
        },
        // 3-权限管理
        {
            path: 'rightManage',
            children: [{
                path: '', // 默认角色列表
                element: <Navigate to='/rightManage/roleList' />
            },{
                path: 'roleList', // 3-1 角色列表
                element: <RoleList />,
            },{
                path: 'rightList', // 3-2 权限列表
                element: <RightList />,
            }]
        },
        // 4-没有权限
        {
            path: 'noPermission',  
            element: <NoPermission />
        }]
    },{
        path: '/',
        element: <Navigate to='/login' />
    }])
    return routes
}

5、Ant Design

安装

npm i --save antd

6、json-server（请求接口）

json-server的使用

• 安装json-server

npm install -g json-server

• 在db.json所在目录下，启动服务器

json-server --watch db.json --port 8000

// db.json
{
  "users": [
    {
      "id": 'meixi',
      "username": "梅西",
      "roleId": 1
    },
    {
      "id": 'marks',
      "username": "马尔克斯",
      "roleId": 2
    },
    {
      "id": 'qmz',
      "username": "覃一",
      "roleId": 2
    }
  ],
  "roles": [
    {
      "id": 1,
      "roleName": "超级管理员",
      "roleType": 1
    },
    {
      "id": 2,
      "roleName": "区域管理员",
      "roleType": 2
    }
  ]
}

启动后如下

• 基础：增删改查

// 1、查 get
axios({
  url: 'http://localhost:8000/users'
}).then(res => {
    console.log('res.data:', res.data)
})

// 2、增 post
axios.post('http://localhost:8000/users',{
    "username": "major",
    "password": "123",
    "id": 'qmz'
}).then(res => {
    console.log('res.data:', res.data)
})

// 3、删 delete
axios.delete('http://localhost:8000/users/1')

// 4、更新 put patch
axios.put('http://localhost:8000/users/qmz',{ // put会把整个对象替换掉
    "username": "Major",
})
axios.patch('http://localhost:8000/users/qmz',{ // patch会把修改部分替换，不变部分保留
    "username": "Major啦啦",
    "roleId": 33,
})

• 高级：表关联查询

   // keyId是关联父级的主键id
   [Children]: [{
       id: 'c1',
       name:'ccc1',
       [keyId]: 'f1',
   },{
       id: 'c2',
       name:'ccc2',
       [keyId]: 'f1',
   },{
       id: 'c3',
       name:'ccc3',
       [keyId]: 'f2',
   }]
   
   // Father和keyId的关系：[keyId].split('Id')[0] + 's' ===[Father]
   例如在db.json中，'roleId'.split('Id')[0] + 's' === 'roles'
   [Father]: [{
       id: 'f1',
       name: 'fff1'
   },{
       id: 'f2',
       name: 'fff2'
   }]
  

_embed和 _expand使用案例

// _embed查询，获取包含子资源
axios.get('http://localhost:8000/roles?_embed=users') roles中数据
.then(res => {
    console.log('_embed-res.data:', res.data)
})
// _expand查询，同时获取父资源 users?_expand=role：查询users表，并且根据roleId和父表roles的id匹配，返回对应roles资源）
axios.get('http://localhost:8000/users?_expand=role')
.then(res => {
    console.log('_expand-res.data:', res.data)
})

7、页面加载进度条插件nprogress

• 安装

npm install nprogress --save --force

• 导入 NProgress 包对应的JS和CSS

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

• 使用

// request 拦截器中，展示进度条 NProgress.start() 
axios.interceptors.request.use(config => {
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

8、富文本编辑

官方地址

安装

npm install --save react-draft-wysiwyg draft-js  // react18会报错，加上--legacy-peer-deps

安装draftjs-to-html

npm install draftjs-to-html --force

demo

9、状态管理react-redux

npm install react-redux --save // 安装不上就--force强制安装，妈的我也不知道为什么，版本不兼容？ 

import { createStore, combineReducers } from "redux";
// 报错Module not found: Can't resolve 'redux'

则执行下面（我不理解，安装react-redux还得安装redux）

npm install --save redux react-redux --force

相关使用笔记

10、状态持久化

安装redux-persist

npm install redux-persist --save

11、echarts

echarts

安装

npm install echarts --save

12、lodash的数据分组功能

import _ from 'lodash';
// 使用
...
const dataGrop = _.groupBy(data, item => item.category.label)
console.log(dataGrop )
...

其他插件

（1）moment

npm install moment

使用

 moment().format(); // 2023-01-10T22:31:05+08:00
 moment().format("YYYY-MM-DD");  // 2023-01-10
 moment().format("YYYY-MM-DD HH:mm:ss"); // 2023-01-10 22:32:36
 moment().format("YYYY MMM Do dddd a"); // 2023 Jan 10th Tuesday pm