devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React----中后台管理项目开发_中后台开发

作者：Gausst松鼠会 | 2024-05-11 19:36:05

赞

踩

中后台开发

中后台管理项目开发

使用react+antd实现中后台管理项目一些简单的项目功能

1.项目准备

1.1创建项目

//创建项目
pnpm create vite
//安装依赖
pnpm i
//启动项目
pnpm run dev

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

1.2.配置路由别名和服务器代理

在vite.config.js中配置

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    //设置根目录别名
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  },
  server: {
    //启动端口
    port: 8000,
    //服务器代理
    proxy: {
      "/api": {
        //请求地址
        target: "http://localhost:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

1.3.安装插件

1.3.1安装技术栈

//sass 插件
pnpm i sass
//路由模块
npm i react-router-dom
//初始化样式
pnpm i normalize.css
//axios
pnpm i axios
//antd组件库和图标库
pnpm i antd @ant-design/icons
//redux状态管理工具
pnpm i react-redux @react/tookit

//全部安装
pnpm i sass react-router-dom normalize.css axios antd @ant-design/icons react-redux @react/tookit

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

1.3.2使用技术栈

（1）引入初始化样式

main.jsx

import "normalize.css"

  • 1
（2）引入antd样式

antd组件库是按需加载，只需要先把css样式引入到根组件中，在组件中使用时按需引入

App.js

import 'antd/dist/reset.css';

  • 1

2.项目开始

2.1配置根目录别名和服务器代理

在vite.config.js中添加配置项

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    //设置别名
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 8000,
    //服务器代理
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      }
    }
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

2.2配置路由

2.2.1在App.jsx中引入路由模块

import React from 'react'
// 引入antd样式
import 'antd/dist/reset.css';
import './App.scss'
// 引入路由模块
import { BrowserRouter } from 'react-router-dom';

// 国际化配置
import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

// 引入路由列表
import Router from './router'

export default function App() {
  return (
     //国际化配置
    <ConfigProvider locale={zhCN}>
      {/*路由模块*/}
      <BrowserRouter>
        <Router></Router>
      </BrowserRouter>
    </ConfigProvider>
  )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

2.2.2根目录创建router文件夹存放路由文件

先创建好基础的目录，layout，login，404/Notfound

创建index.jsx文件使用useRoutes( )生成路由

router/index.jsx

import React from 'react'
// 引入路由模块
import { useRoutes } from 'react-router-dom'
// 引入路由列表
import RouterList from './RouterList'

export default function index() {
    // console.log(RouterList);
    const router = useRoutes(RouterList)
    return router
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

创建RouterList.jsx文件，使用路由懒加载生成路由列表导入到router/index.jsx

这里用auth属性来判断进入页面是否需要token验证，一种是给不需要验证的页面加auth，一种给需要验证的页面加auth。

然后如果出现了进入页面的一瞬间布局混乱，可能是因为auth属性的问题，确认一下要跳转的路由是否需要有auth属性

router/RouterList.jsx

//使用懒加载 
import { lazy } from 'react'
// 路由跳转
import { Navigate } from 'react-router-dom'
// 处理路由懒加载的白屏问题
import LazyRouter from './LazyRouter'
// 引入组件路径(登录和NotFound一般不需要懒加载)
const Layout = lazy(() => import('@/pages/layout'))
const Login = lazy(() => import('@/pages/login'))
const NotFound = lazy(() => import('@/pages/404'))
const Index1 = lazy(() => import('@/pages/dashboard/index1'))
const Index2 = lazy(() => import('@/pages/dashboard/index2'))

const routerList = [{
    // 主页
    path: '/',
    //auth：进入路由是否需要token验证
    //title：该页的页面标题
    element: <Navigate to={'/dashboard/index'}></Navigate>
}, {
    // 首页
    path: '/dashboard',
    element: <LazyRouter element={<Layout />} title="主页面"></LazyRouter>,
    children: [{
        //主页面必须要嵌套路由，第一个空路由可以自动跳转到某个路由
        path: "",
        element: <Navigate to={'index'} />
    }, {
        path: 'index1',
        element: <LazyRouter element={<Index1 />} title="页面1" ></LazyRouter>
    }, {
        path: 'index2',
        element: <LazyRouter element={<Index2 />} title="页面2"></LazyRouter>
    }]
}, {
    // 登录页
    path: '/login',
    element: <LazyRouter element={<Login />} title="登录"></LazyRouter>
}, {
    // 空页
    path: '/404',
    element: <LazyRouter element={<NotFound />} title="找不到网页"></LazyRouter>
}, {
    // 找不到
    path: '*',
    element: <Navigate to={'/404'}></Navigate>
},]
export default routerList

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

创建LazyRouter.jsx文件，使用Suspense组件解决路由懒加载网速慢时的白屏问题

router/LazyRouter.jsx

import { Suspense } from 'react'
import { Spin } from 'antd';

// 路由拦截登录验证
import AuthRouter from './AuthRouter'
//渲染页面
import RenderRouter from './RenderRouter'

export default function LazyRouter({ auth, ...props }) {
    return (
        <Suspense
            fallback={
                <RenderRouter element={<Spin tip="Loading"><div /></Spin>}/>
            }>
            {/* 需要验证前往token验证，不需要验证就去渲染页面 */}
            {auth ? <RenderRouter {...props}></RenderRouter> : <AuthRouter  {...props}></AuthRouter>}
        </Suspense>
    )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

创建AuthRouter.jsx文件进行token验证

router/AuthRouter.js

import React from 'react'
import { Navigate } from 'react-router-dom'
// 路由页面渲染
import RenderRouter from './RenderRouter'

// token验证
export default function AuthRouter({ ...props }) {
    const istoken = sessionStorage.getItem('token')
    return (
        istoken ? <RenderRouter {...props}></RenderRouter> : <Navigate to={'/login'}></Navigate>
    )

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

创建RenderRouter.jsx文件，进行路由页面渲染以及对页面一些配置

router/RenderRouter.jsx

import React from 'react'
// 渲染路由
export default function RenderRouter({ title, element }) {
    //配置页面的标题
    title ? document.title = title : null
    return element
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2.3 api封装

2.3.1根目录创建api文件夹

创建config.js文件，配置网络请求信息

api/config.js

import axios from "axios" //第一步：导入axios
import { message } from 'antd'
//第二步：创建axios实例
const service = axios.create({
    baseURL: '/api',
    timeout: 50000//超时时间
})

//写好的拦截器，也可以先不用拦截器，全部注释
//第三步 请求拦截
service.interceptors.request.use((config) => {
    // 在发送请求之前做些什么 验证token之类的
    // console.log("请求的数据:", config);
    if (sessionStorage.token) {
        // 不再加common
        config.headers.Authorization = 'Bearer ' + sessionStorage.token
    }
    return config;
}, (error) => {
    return Promise.reject(error)
}
)
// //第四步 响应拦截
service.interceptors.response.use((response) => {
    return response
},
    (error) => {
        const { code } = error;
        if (code == "ERR_NETWORK") {
            //@ts-ignore
            message.error("没网");
        } else if (code == 401) {
            //@ts-ignore
            message.error("token过期啦,请重新登陆");
            sessionStorage.clear()
            window.location.reload()
        } else {
            message.error(error?.response?.data?.msg);
        }
        //@ts-ignore
        // return Promise.reject(error);
    }
)
export default service;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

2.3.2创建http.js文件，管理网络请求

api/http.js

import axios from './config'
//用户登录
// 第一种写法
// export const login = data => axios.post("/login", data)

// 写好的网络请求，按照需求写
// 第二种写法
export function login(data) {
    return axios({
        url: '/login',
        method: "post",
        data
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2.4 登录页面

antd有时加载特别缓慢

使用了antd的栅格进行界面定位

使用了antd的表单布置登录表单

添加了保存账号和密码的逻辑，在初始化时会到本地存储中寻找

服务器验证通过后保存token，登录成功跳转页面

login/index.jsx

import './Login.scss'
// 引入antd组件
import { Row, Col, Button, Radio, Form, Input, message, Checkbox } from 'antd';
import { login } from '@/api/http';
import { useNavigate } from 'react-router-dom'
import { useEffect } from 'react';
import { useForm } from 'antd/es/form/Form';

// 登录信息初始值
let init = {
    remember: true,
    account: '',
    pw: '',
    power: "0",
}
// 自定义表单校验
const rulespw = (rule, value) => {
    if (value.length === 0) Promise.reject("密码不能为空")
    if (!(/^[\da-z]{3,8}$/.test(value))) Promise.reject("密码应该是3-8位的数字或小写字母")
        return Promise.resolve()
}

export default function index() {
    const navigate = useNavigate()
    //使用Antd的自定义Hook来获取表单域
    const [loginForm] = useForm()
    // 判断是否存储的有账号和密码
    const rememberUser = () => {
        let user = JSON.parse(localStorage.getItem('user'))
        if (user) loginForm.setFieldsValue(user)
    }
    // 初始化
    useEffect(() => {
        rememberUser()
    },[])
    
    // 表单验证成功的事件
    const onFinish = async (values) => {
        // 向服务器验证
        let { code, token } = (await login(values)).data
        // console.log((await login(values)));
        if (code === 0) {
            // 服务器验证成功保存token并跳转
            sessionStorage.setItem('token', token)
            message.success('登录成功', 1)
            navigate("/")
            // 是否在本地保存账号密码
            values.remember?
                localStorage.setItem('user', JSON.stringify(values))
            	:localStorage.removeItem('user')
        } else {
            // 登录失败
            onFinishFailed()
        }
    };
    // 登录失败
    const onFinishFailed = (errorInfo) => message.error('登录失败', 1)
    
    return (
        <Row className='login' >
            <Col span={6} offset={9} className='wrapper'>
                <Form
                    form={loginForm}
                    //标签宽度
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    // 初始值
                    initialValues={init}
                    autoComplete="off"
                    // 提交
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="账号"
                        name="account"
                        // 简单表单校验
                        rules={[
                            { required: true, message: '请输入账号！' },
                            { pattern: /^\w{3,7}$/, message: '账号为3-7位的字符' }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="密码" name="pw" rules={[{ validator: rulespw }]}>
                        <Input.Password />
                    </Form.Item>
                    <Form.Item label="身份" name="power">
                        <Radio.Group buttonStyle="solid">
                            <Radio.Button value="0">超级管理员</Radio.Button>
                            <Radio.Button value="1">管理员</Radio.Button>
                            <Radio.Button value="2">普通用户</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }} name="remember" valuePropName="checked">
                        <Checkbox>记住密码</Checkbox>
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button type="primary" htmlType="submit" size='large' className='loginbutton' >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Col>
        </Row >
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107

2.5主界面布局

在layout/index.jsx文件中进行主界面的布局

对侧边栏，头部，内容区进行了拆分

layout/index.jsx

import React, { useState } from 'react';
import './Layout.scss'
import { Outlet } from 'react-router-dom';
import { Layout, theme } from 'antd';
const { Header, Sider, Content } = Layout;
import Menu from './sider/SiderMenu';
import LayoutHeader from './header/LayoutHeader';
import TagsRouter from './TagsRouter';

export default function layout() {
    // 侧边栏收起
    const [collapsed, setCollapsed] = useState(false);
    // 主题
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    
    return (
        <Layout className='admin_layout'>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                {/* 导航菜单 */}
                <Menu></Menu>
            </Sider>
            <Layout>
                <Header style={{ background: colorBgContainer }}>
                    {/*组件化*/}
                    <LayoutHeader collapsed={collapsed} changeCollapsed={() => setCollapsed(!collapsed)}></LayoutHeader>
                </Header>
                {/* tag标签 */}
                <TagsRouter></TagsRouter>
                <Content className='layout-content'>
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

2.6导航菜单

2.6.1.获取菜单数据

创建创建sider文件夹存放侧边栏的组件，创建MenuList.js文件用来存放菜单数据

可能是要向后台请求的数据，但是数据格式不会有太大差别

如果有图标用字符串的方式，不能记录组件

layout/sider/MenuList.js

// 导航菜单列表
const MenuList = [{
    key: '/dashboard',
    icon: "UserOutlined",
    label: '一级菜单',
    children: [{
        key: '/dashboard/index1',
        icon: "UserOutlined",
        label: '页面1',
    }, {
        key: '/dashboard/index2',
        icon: "UserOutlined",
        label: '页面2',
    }]
}]
export default MenuList

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

2.6.2处理菜单中的图标组件

这个功能可以写成可复用的组件，在根目录创建compented文件夹

创建IconFont.js文件，使用React的createElement方法将图标转换成组件

compented/IconFont.js

import React from 'react'
import * as Icons from '@ant-design/icons';
const Iconfont = (props) => {
    const { icon } = props
    //React提供的createElement方法可以将字符串转成组件
    return React.createElement(Icons[icon])
}
export default Iconfont

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.6.3添加导航菜单

NavMenu.jsx文件用来配置导航菜单组件

layout/sider/NavMenu.jsx

import React, { useEffect, useState } from 'react'
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import MenuList from './MenuList';
import Iconfont from '@/compented/IconFont';

// 处理菜单的图标
const handleMenuData = (list) => {
    // 深拷贝防止污染原数据
    let items = JSON.parse(JSON.stringify(list))
    return items.map(item => {
        //调用写好的方法将图标转成字符串
        item.icon = item.icon && <Iconfont icon={item.icon}></Iconfont>
        //如果有子菜单，需要用到递归
        item.children = item.children && handleMenuData(item.children)
        return item
    })
}

export default function SiderMenu() {
    const navigate = useNavigate()
    const { pathname } = useLocation()
    // 处理初始化时高亮和展开的菜单项
    let selectedKeys = pathname
    let openKeys = '/' + pathname.split('/')[1]
    // 添加点击导航跳转
    const onSelect = ({ key }) => navigate(key)
    // 初始化导航菜单
    const [menuList, setMenuList] = useState([])
    useEffect(() => {
        setMenuList(handleMenuData(MenuList))
    }, [])

    return (
        <Menu
            theme="dark"
            mode="inline"
            // 默认高亮
            defaultSelectedKeys={[selectedKeys]}
            // 默认展开
            defaultOpenKeys={[openKeys]}
            // 选中事件
            onSelect={onSelect}
            // 菜单列表
            items={menuList}
        />
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

2.7添加面包屑导航

创建header文件夹来存放头部的组件

创建LayoutHeader.jsx文件，拆分layout布局的header部分

/layout/header/LayoutHeader.jsx

import React from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import HeaderBreadcrumb from './HeaderBreadcrumb';
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function LayoutHeader(props) {
    
    const navigate = useNavigate()
    //退出登录清除token，转到主页
    const edit = () => {
        sessionStorage.removeItem('token')
        navigate('/')
    }
    let { collapsed, changeCollapsed } = props
    return (
        <div className="layout_header">
            {/* 是否收起侧边栏 */}
            {React.createElement(
                collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                { className: 'trigger', onClick: () => changeCollapsed() }
            )}
            {/* 面包屑 */}
            <HeaderBreadcrumb></HeaderBreadcrumb>
            <Button type="primary" danger style={{}} onClick={edit}>
                退出登录
            </Button>
        </div>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

需要有一个路由和标题对应的数据

JS-数据处理：https://blog.csdn.net/jddfj/article/details/129208198

在 compented文件夹中创建MenuKeyAndLaber.js文件用来处理菜单数据

/compented/MenuKeyAndLaber.js

// 获取菜单中路由和标题的信息
const menuKeyAndLaber = (lists) => {
    const list = JSON.parse(JSON.stringify(lists))
    let newObj = {}
    const degui = (list) => {
        list.forEach(item => {
            for (const key in item) {
                if (key === "key") {
                    newObj[item.key] = item.label
                }
                if (key === 'children') {
                    //子菜单需要递归
                    degui(item[key])
                }
            }
        });
    }
    degui(list)
    return newObj
}
export default menuKeyAndLaber

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

创建一个HeaderBreadcrumb.jsx文件

import React from 'react'
import MenuList from '../sider/MenuList'
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';
import { useEffect,useState } from 'react';
import menuKeyAndLaber from "@/compented/MenuKeyAndLaber"

export default function Breadcrumbsd() {
    
    // 获取地址栏路径并拆分成数组
    const location = useLocation();
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    // 存放路由和标题对应信息
    const [breadcrumbNameMap, setbreadcrumbNameMap] = useState([])
    //初始化时获取菜单的信息
    useEffect(() => {
        setbreadcrumbNameMap(menuKeyAndLaber(MenuList))
    }, [])
    // 根据路由生成面包屑
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        /**
        *原本：['/one','/two']
        *遍历后：['/one','/one/two']
        */
        // 根据路由数组循环遍历
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        // console.log(url);
        return (
            <Breadcrumb.Item key={url}>
                {/*根据路由到数据中获取标题*/}
                <span>{breadcrumbNameMap[url]}</span>
            </Breadcrumb.Item>
        );
    });
    // 面包屑导航主题
    const breadcrumbItems = [
        {/*默认有一个首页，也可以没有，看需求*/}
        <Breadcrumb.Item key="home">
            <span>首页</span>
        </Breadcrumb.Item>,
        ...extraBreadcrumbItems
    ]

    return (
        <div className="breadcrumb">
            <Breadcrumb>{breadcrumbItems}</Breadcrumb>
        </div>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

2.8添加tab标签

用到了redux和@reduxjs/toolkit

创建一个TabsRouter.jsx封装tabs组件

/layout/herder/TabsRouter.jsx

这里是完成之后的代码，使用了redux管理工具，刚开始写时可以用官网上的固定数据，然后在redux添加tabsList数据，完成之后将数据替换即可

import React, { useEffect } from 'react'
import { Tabs } from 'antd';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { changeActiveKey, editTabs } from '@/store/tabsStore';

export default function TagsRouter() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    // 从仓库获取tabs列表和高亮
    const { tabsList, activeKey } = useSelector(state => state.tabs)

    // 点击tabs标签进行路由跳转
    const onChange = (key) => {
        navigate(key)
        // console.log(key);
        // 修改仓库的高亮
        dispatch(changeActiveKey(key))
    };
	//根据依赖获取高亮
    useEffect(() => {
        navigate(activeKey)
    }, [activeKey])
    // 删除tabs标签
    const onEdit = (key, remove) => {
        if (remove === 'remove') {
            dispatch(editTabs(key))
        }
    };
    return (
        <Tabs 
            activeKey={activeKey} 
            items={tabsList}
            onChange={onChange}
            closable={
                tabsList.closable ?
                    tabsList.closable 
                	: ''
            }
            onEdit={onEdit}
            type="editable-card" 
            hideAdd 
        />
    )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

redux的使用流程以这个项目的tabs标签为例做了单独的总结，这里只总结了逻辑代码

React----react-redux和@react/tookit的使用流程：https://blog.csdn.net/jddfj/article/details/129361881

在tabsStore.js

import { createSlice } from "@reduxjs/toolkit";
//数据持久化
const initialState = JSON.parse(localStorage.getItem('initialState'))
const tabsStore = createSlice({
    name: "tabs",
    initialState: initialState ? initialState :
        {
            // tabs标签列表
            tabsList: [{
                key: '/dashboard/console',
                label: '主控台',
                closable: false
            }],
            // 高亮标签
            activeKey: '/dashboard/console'
        },
    reducers: {
        // 添加tabs标签
        changeTabs: (state, { payload }) => {
            let flag = state.tabsList.some(item => item.key === payload.key)
            state.activeKey = payload.key
            // tabsList中是否已经存在
            flag ? null : state.tabsList.push(payload)
            //数据持久化
            localStorage.setItem('initialState', JSON.stringify(state))
        },
        // 改变高亮
        changeActiveKey: (state, { payload }) => {
            state.activeKey = payload
            //数据持久化
            localStorage.setItem('initialState', JSON.stringify(state))
        },
        // 删除tabs标签
        editTabs: (state, { payload }) => {
            let i = state.tabsList.findIndex(item => item.key === payload)
            state.tabsList.splice(i, 1)
            // 删除最后一项
            if (i === state.tabsList.length && payload === state.activeKey) {
                state.activeKey = state.tabsList[i - 1].key
            }
            // 删除自己
            if (payload === state.activeKey) {
                state.activeKey = state.tabsList[i].key
            }
            // 删除最后一个
            if (i === 0 && state.tabsList.length === 1) {
                state.activeKey = ''
            }
            //数据持久化
            localStorage.setItem('initialState', JSON.stringify(state))
        }
    }
})
export const { changeTabs, changeActiveKey, editTabs } = tabsStore.actions
export default tabsStore.reducer

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

2.9 信息管理

2.9.1 添加路由

创建对应的文件，并在路由列表内添加信息管理的路由，添加班级管理的二级路由

/router/RouterList.jsx

...
const StudentInfo = lazy(() => import('@/pages/student/StudentInfo'))
const ClassInfo = lazy(() => import('@/pages/student/ClassInfo'))
const EditStudent = lazy(() => import('@/pages/student/studentInfo/EditStudent'))
...

const routerList = [{
    ...
     {
        // 信息管理
        path: '/student',
        element: <LazyRouter element={<Layout />} title="信息管理"></LazyRouter>,
        children: [{
            path: "",
            element: <Navigate to={'studentinfo'} />
        }, {
            path: 'studentinfo',
            element: <LazyRouter element={<StudentInfo />} title="学生管理" ></LazyRouter>
        }, {
            path: 'classinfo',
            element: <LazyRouter element={<ClassInfo />} title="班级管理"></LazyRouter>
        }, {
            path: 'editstudent',
            element: <LazyRouter element={<EditStudent />} title="编辑学生" ></LazyRouter>
        },]
	},
    ...
}]
 
export default routerList

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

2.9.2 列表展示

首先完成最基础的班级列表的展示

/pages/student/ClassInfo.jsx

import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Space, Tag, } from 'antd';
import { getClassList } from '@/api/http';
import day from 'dayjs'

export default function ClassInfo() {
    // 表格字段
    const ClasstableColumns = [
        {
            title: '班级',
            dataIndex: 'className',
            key: 'className',
        }, {
            title: '班主任',
            dataIndex: 'ht',
            key: 'ht',
        }, {
            title: '开班时间',
            dataIndex: 'startDate',
            key: 'startDate',
            render: (text) => day(text).format('YYYY-MM-DD')
        }, {
            title: '开班状态',
            dataIndex: 'classStatus',
            key: 'classStatus',
            render: (classStatus) => {
                return (
                    <Tag color={classStatus === 0 ? 'default' : (classStatus === 1 ? 'warning' : 'success')}>
                        {classStatus === 0 ? '即将开班' : (classStatus === 1 ? '已结课' : '已开班')}
                    </Tag>
                )
            }
        }, {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="primary">编辑</Button>
                    <Button danger>删除</Button>
                </Space>
            ),
        },
    ];
    // 表格数据
    const [tabledata, setTableData] = useState([])
    // 页码
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)
    // 请求班级数据
    const getClassData = async () => {
        //从后端获得了班级列表和表格总条数
        let { code, list, total } = (await getClassList({ page })).data
        if (code === 0) {
            setTableData(list)
            setTotal(total)
        } else {
            setTableData([])
            setTotal(0)
        }
    }
    // 渲染表格
    useEffect(() => {getClassData()}, [page])
    // 改变页码
    const onChange = (page) =>  setPage(page)
    
    return (
        <Card title="班级信息管理" extra={<Button>添加班级</Button>}>
            <Table
                style={{ minWidth: '650px' }}
                columns={ClasstableColumns}
                dataSource={tabledata}
                rowKey={(record) => String(record.classId)}
                // 分页
                pagination={{
                    total,
                    pageSize: 4,
                    current: page,
                    onChange
                }}
            />
        </Card>
    )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

2.9.3 添加记录

创建一个classInfo文件夹，用来存储student相关的组件

这里是用的modal框实现的添加编辑，还可以用路由跳转的方式

创建EditClass.jsx文件，将添加和编辑写成同一个组件

下面是只写了添加逻辑的代码

/student/classInfo/EditClass.jsx

import {
    Button,
    Modal,
    Spin,
    Form,
    Input,
    Radio,
    DatePicker,
    Select,
    message
} from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useForm } from 'antd/es/form/Form';
import { _addClass } from '@/api/http';
import day from 'dayjs'
//这个数据应该是由后台获取的，这里写成了固定数据
const htList = ['高启强', '高启盛', '高启兰', '安欣', '孟钰', '史强', '汪淼']

export default function EditClass(props) {
    // 接收数据
    let { open, setOpen, setnewClass, pageOne } = props
    // 表单实例
    const [editClassForm] = useForm()
    // 等待动画
    const [loading, setloading] = useState(false);
    // 对话框确认
    const handleOk = async () => {
        // 提交表单 触发表单onFinish事件
        editClassForm.submit()
    };
    // 对话框取消
    const handleCancel = () => {
        // 关闭并清空
        setOpen(false)
        editClassForm.resetFields()
    }
    // 表单提交
    const onFinish = async (values) => {
        setloading(true);
        let req = ''
        // 处理参数的时间日期格式
        values.startDate = day(values.startDate).format("YYYY-MM-DD")
        req = (await _addClass(values)).data
        let { code, msg } = req
        // 添加成功后关闭卡片并清空表单
        if (code === 0) {
            message.success(msg)
            handleCancel()
            // 触发表格刷新
            setnewClass()
            pageOne(1)
        } else {
            message.error(msg)
        }
        setloading(false);
    }

    return (
        <Modal
            title="添加班级"
            open={open}
            onCancel={handleCancel}
            footer={
                <div>
                    <Button type='primary' onClick={() => handleOk()} disabled={loading}>添加"</Button>
                    <Button onClick={handleCancel}>取消</Button>
                </div>
            }
        >
            <Spin indicator={<LoadingOutlined />} spinning={loading}>
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 8 }}
                    style={{ minWidth: 400 }}
                    form={editClassForm}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="班级"
                        name='className'
                        rules={[{ required: true, message: '班级不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="班主任"
                        wrapperCol={{ span: 16 }}
                        name='ht'
                        rules={[{ required: true, message: '请选择班主任' }]}
                    >
                        <Radio.Group>
                            {htList.map((item) => <Radio value={item} key={item}>{item}</Radio>)}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="开班时间"
                        name='startDate'
                        rules={[{ required: true, message: '请选择开班时间' }]}
                    >
                        <DatePicker />
                    </Form.Item>
                    <Form.Item
                        label="开班状态"
                        wrapperCol={{ span: 16 }}
                        name='classStatus'
                        rules={[{ required: true, message: '请选择开班状态' }]}
                    >
                        <Radio.Group value={0}>
                            <Radio value={0}>即将开班</Radio>
                            <Radio value={1}>已结课</Radio>
                            <Radio value={2}>已开班</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Spin>
        </Modal>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120

2.9.4 编辑记录

编辑记录跟添加记录使用的同一个组件，唯一的区别是，编辑记录是传递了初始值，然后渲染到页面上，

下面是添加了编辑逻辑的代码

/student/classInfo/EditClass.jsx

import {
    Button,
    Modal,
    Spin,
    Form,
    Input,
    Radio,
    DatePicker,
    Select,
    message
} from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { useForm } from 'antd/es/form/Form';
import { _addClass, editClass } from '@/api/http';
import day from 'dayjs'
const htList = ['高启强', '高启盛', '高启兰', '安欣', '孟钰', '史强', '汪淼']

export default function EditClass(props) {
    // 接收数据
    let { open, setOpen, setnewClass, pageOne, editClassInfo, edit } = props
    // 表单数据处理
    const [editClassForm] = useForm()
    // 等待动画
    const [loading, setloading] = useState(false);
    // 对话框确认
    const handleOk = async () => {
        // 提交表单
        editClassForm.submit()
    };
    // 对话框取消
    const handleCancel = () => {
        // 关闭并清空
        setOpen(false)
        editClassForm.resetFields()
    }
    // 表单提交
    const onFinish = async (values) => {
        setloading(true);
        let req = ''
        // 处理时间格式
        values.startDate = day(values.startDate).format("YYYY-MM-DD")
        if (edit) {
            // 编辑
            // 将classId添加到参数中
            values.classId = editClassInfo.classId
            req = (await editClass(values)).data
        } else {
            //添加
            req = (await _addClass(values)).data
        }
        let { code, msg } = req
        // 添加成功后关闭卡片并清空表单
        if (code === 0) {
            message.success(msg)
            handleCancel()
            // 触发表格刷新
            setnewClass()
            pageOne(1)
        } else {
            message.error(msg)
        }
        setloading(false);
    }

    return (
        <Modal
            title={editClassInfo ? "编辑班级" : "添加班级"}
            open={open}
            onCancel={handleCancel}
            footer={
                <div>
                    <Button type='primary' onClick={() => handleOk()} disabled={loading}>{editClassInfo ? "保存" : "添加"}</Button>
                    <Button onClick={handleCancel}>取消</Button>
                </div>
            }
        >
            <Spin indicator={<LoadingOutlined />} spinning={loading}>
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 8 }}
                    style={{ minWidth: 400 }}
                    initialValues={{
                        ...editClassInfo,
                        {/*这里是对时间进行了一个格式的处理*/}
                        startDate: editClassInfo.startDate ? day(editClassInfo.startDate) : null
                    }}
                    form={editClassForm}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="班级"
                        name='className'
                        rules={[{ required: true, message: '班级不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="班主任"
                        wrapperCol={{ span: 16 }}
                        name='ht'
                        rules={[{ required: true, message: '请选择班主任' }]}
                    >
                        <Radio.Group>
                            {htList.map((item) => <Radio value={item} key={item}>{item}</Radio>)}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="开班时间"
                        name='startDate'
                        rules={[{ required: true, message: '请选择开班时间' }]}
                    >
                        <DatePicker />
                    </Form.Item>
                    <Form.Item
                        label="开班状态"
                        wrapperCol={{ span: 16 }}
                        name='classStatus'
                        rules={[{ required: true, message: '请选择开班状态' }]}
                    >
                        <Radio.Group value={0}>
                            <Radio value={0}>即将开班</Radio>
                            <Radio value={1}>已结课</Radio>
                            <Radio value={2}>已开班</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Spin>
        </Modal>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132

2.9.5 查询记录

查询记录也是采用了组件的方式，这里是后台直接会根据传递的参数返回对应的结果，所以涉及的主要是组件传参

在classInfo文件夹下创建一个SelectClass.jsx组件

/student/classInfo/SelectClass.jsx

import {
    Button,
    Form,
    Input,
    Radio,
    DatePicker,
    Select,
    Space,Col,Row
} from 'antd';
import { useForm } from 'antd/es/form/Form';
import { _addClass } from '@/api/http';
import day from 'dayjs'
const htList = ['高启强', '高启盛', '高启兰', '安欣', '孟钰', '史强', '汪淼']

export default function SearchClass(props) {
    // 接收数据(改变搜索参数的方法，改变page的方法，触发数据更新的方法)
    let { setSearch, setPage, setNewClass } = props
    // 搜索表单实例
    const [SearchClassForm] = useForm()
    // 表单提交
    const onFinish = async (values) => {
        //改变时间日期格式
        values.startDate = values.startDate ? day(values.startDate).format("YYYY-MM-DD") : null
        //改变查询参数
        setSearch(values)
        //触发数据更新
        setNewClass()
    }
    // 表单重置
    const onReset = () => {
        SearchClassForm.resetFields()
        setPage(1)
        setSearch({})
        setNewClass()
    }
    return (
        <Form
            wrapperCol={{ offset: 1 }}
            style={{ minWidth: 400 }}
            form={SearchClassForm}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Row gutter={[50, 0]} wrap>
                <Col>
                    <Form.Item
                        label="班主任"
                        wrapperCol={{ span: 24 }}
                        name='ht'
                    >
                        <Radio.Group>
                            {htList.map((item) => <Radio value={item} key={item}>{item}</Radio>)}
                        </Radio.Group>
                    </Form.Item>
                </Col>
                <Col>
                    <Form.Item
                        label="开班时间"
                        name='startDate'
                    >
                        <DatePicker />
                    </Form.Item>
                </Col>
                <Col>
                    <Form.Item
                        label="开班状态"
                        wrapperCol={{ span: 24 }}
                        name='classStatus'
                    >
                        <Radio.Group value={0}>
                            <Radio value={0}>即将开班</Radio>
                            <Radio value={1}>已结课</Radio>
                            <Radio value={2}>已开班</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
            </Row>
            <Row justify='end'>
                <Col>
                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Space>
                            <Button type='primary' htmlType="submit">查询</Button>
                            <Button htmlType="button" onClick={onReset}>重置</Button>
                        </Space>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90

2.9.6 删除记录

删除记录比较简单，只需要一个Id值，所以在列表展示的组件中直接添加逻辑。主要注意的是删除时处理边界问题（删除最后一条时；只剩最后一条时…）

下面是完整的列表展示的页面代码（包括了添加，编辑，删除，搜索的逻辑）

/pages/student/ClassInfo.jsx

import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Space, Tag,message } from 'antd';
import { getClassList, delClass } from '@/api/http';
import day from 'dayjs'
// 添加班级
import EditClass from './classInfo/EditClass';
// 查询班级
import SearchClass from './classInfo/SearchClass';

export default function ClassInfo() {
    // 表格字段
    const ClasstableColumns = [{
            title: '班级',
            dataIndex: 'className',
            key: 'className',
        }, {
            title: '班主任',
            dataIndex: 'ht',
            key: 'ht',
        }, {
            title: '开班时间',
            dataIndex: 'startDate',
            key: 'startDate',
            //处理时间格式
            render: (text) => day(text).format('YYYY-MM-DD')
        }, {
            title: '开班状态',
            dataIndex: 'classStatus',
            key: 'classStatus',
            render: (classStatus) => {
                return (
                    <Tag color={classStatus === 0 ? 'default' : (classStatus === 1 ? 'warning' : 'success')}>
                        {classStatus === 0 ? '即将开班' : (classStatus === 1 ? '已结课' : '已开班')}
                    </Tag>
                )
            }
        }, {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle" key={3}>
                    <Button type="primary" onClick={() => editClass(record)}>编辑</Button>
                    <Button danger onClick={() => onDelete(record.classId)}>删除</Button>
                </Space>
            ),
        },
    ];

    // 表格数据
    const [tabledata, setTableData] = useState([])
    // 分页器
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(1)
    // 添加班级
    const [openAddStudent, setOpenAddStudent] = useState(false)
    // 设定一个标识用来触发数据更新
    const [newClass, setNewClass] = useState(true)
    // 编辑班级
    const [editClassInfo, setEditClassInfo] = useState({})
    const [edit, setEdit] = useState(false)
    // 查询班级
    const [search, setSearch] = useState({})
    // 请求班级数据
    const getClassData = async () => {
        let { code, list, total } = (await getClassList({
            page,
            //传递要查询的参数
            ...search
        })).data
        if (code === 0) {
            setTableData(list)
            setTotal(total)
        } else {
            setTableData([])
            setTotal(0)
        }
    }
    // 渲染表格，根据依赖触发数据更新
    useEffect(() => { getClassData() }, [page, newClass])
    // 改变页码
    const onChange = (page) => setPage(page)
    // 编辑或添加班级
    const editClass = (record) => {
        //显示组件
        setOpenAddStudent(true)
        //区分编辑和添加的情况
        if (record) {
            setEditClassInfo(record)
            setEdit(true)
        } else {
            setEditClassInfo({})
            setEdit(false)
        }
    }
    // 删除班级
    const onDelete = async (classId) => {
        let { code } = (await delClass({ classId })).data
        if (code === 0) {
            message.success('删除成功')
        }
        //这里判断了删除最后一条的情况
        if (total == ((page - 1) * 4 + 1) && total !== 1) {
            setPage(page - 1)
        } else {
            setNewClass(!newClass)
        }
    }

    return (
        <Card
            title="班级信息管理"
            extra={
                <Button type="primary" onClick={() => editClass(false)}>
                    添加班级
                </Button>
            }
        >
            <SearchClass 
                setSearch={setSearch} 
                setPage={setPage} 
                setNewClass={() => setNewClass(!newClass)}
            >
            </SearchClass>
            <Table
                style={{ minWidth: '650px' }}
                columns={ClasstableColumns}
                dataSource={tabledata}
                rowKey={(record) => String(record.classId)}
                // 分页器配置
                pagination={{
                    total,
                    pageSize: 4,
                    current: page,
                    onChange
                }}
            />
            {/*antd的Modal不能即时的刷新数据，因此采用三元运算符对modal进行销毁*/}
            {openAddStudent ?
                    <EditClass
                        open={openAddStudent}
                        {/*组件传参*/}
                        setOpen={setOpenAddStudent}
                        setnewClass={() => setNewClass(!newClass)}
                        pageOne={(page) => setPage(page)}
                        editClassInfo={editClassInfo}
                        edit={edit}
                    ></EditClass>
                    : null
            }
        </Card>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152

2.10 富文本编辑器

这里以公告为例实现富文本编辑器的使用，使用的是wangEditor5版本

2.10.1添加路由

先添加一个公告管理的路由，然后要有详情、编辑的二级路由

/router/RouterList.jsx

...
const Notice = lazy(() => import('@/pages/notice/Notion'))
const EditNews = lazy(() => import('@/pages/notice/EditNews'))
const DateilNews = lazy(() => import('@/pages/notice/DateilNews'))
...

const routerList = [{
    ...
    {
        // 公告管理
        path: '/notice',
        element: <LazyRouter element={<Layout />} title="公告管理"></LazyRouter>,
        children: [{
            path: '',
            element: <LazyRouter element={<Notice />}></LazyRouter>
        }, {
            path: 'editnews',
            element: <LazyRouter element={<EditNews />}></LazyRouter>
        }, {
            path: 'dateilnews',
            element: <LazyRouter element={<DateilNews />}></LazyRouter>
        }]
    },
    ...
}]
 
export default routerList

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

2.10.2 公告展示

写出公告的展示页面,

下面是最基础的展示页面，没有添加其他逻辑

/pages/notice/Notice.jsx

import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Space, message } from 'antd';
import { getNews, delNews } from '@/api/http';
import { useNavigate, useLocation } from 'react-router-dom';

export default function Notion() {
    const navigeate = useNavigate()
    const { state } = useLocation()
    // 表格数据
    const [tabledata, setTableData] = useState([])
    // 分页显示
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState()
    const [newNewsInfo, setNewNewsInfo] = useState(true)
    // 获取信息
    const newsTableData = async () => {
        let { code, list } = (await getNews()).data
        if (code === 0) {
            setTableData(list)
            setTotal(list.length)
        }
    }
    // 改变页码
    const onChange = (page) => {
        setPage(page)
    }
    // 获取最新数据
    useEffect(() => {
        newsTableData();
    }, [page, newNewsInfo])
    
  	//表格
    const NewsTableColumns = [{
        title: '文章标题',
        dataIndex: 'title',
        key: 'tiele',
    }, {
        title: '作者',
        dataIndex: 'author',
        key: 'author',
    }, {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button }>预览</Button>
                <Button type='primary'>编辑</Button>
                <Button>删除</Button>
            </Space>
        ),
    }];
    
    return (
        <Card
            title="公告管理"
            extra={<Button type="primary">添加公告</Button>}
        >
            <Table
                columns={NewsTableColumns}
                dataSource={tabledata}
                rowKey={(record) => String(record.newsId)}
                // 分页
                pagination={{
                    total,
                    pageSize: 4,
                    current: page,
                    onChange
                }}
            />
        </Card>
    )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

2.10.3 封装富文本编辑器组件

官网：www.wangEditor.com

  1. 下载安装依赖

    // 下面两个依赖都需要安装 
npm i @wangeditor/editor  // css样式以及(TS)相关类型声明
npm i @wangeditor/editor-for-react

    • 1
    • 2
    • 3

  2. 在compented组件中创建一个WangEditor.jsx组件

    富文本编辑器更多的使用方式单独总结，这里只展示用到的部分

    官网上有一个基础的dome示例

    import '@wangeditor/editor/dist/css/style.css' // 引入 css
import React, { useState, useEffect } from 'react'
// 工具栏和编辑器都要引入
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

function MyEditor() {
    // editor 实例
    const [editor, setEditor] = useState(null)    
    // 编辑器内容
    const [html, setHtml] = useState('')
    // 工具栏配置
    const toolbarConfig = { }                      
    // 编辑器配置
    const editorConfig = {                        
        placeholder: '请输入内容...',
    }
    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    return (
        <div style={{ border: '1px solid #ccc', zIndex: 100}}>
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
                />
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                onChange={editor => setHtml(editor.getHtml())}
                mode="default"
                style={{ height: '500px', overflowY: 'hidden' }}
                />
            {/*预览数据*/}
            <div style={{ marginTop: '15px' }}>
                {html}
            </div>
        </div>
    )
}

export default MyEditor

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

  3. 根据这个基础dome做一些添加和修改，主要是需要上传图片

    /compented/WangEditor.jsx

    import React, { useState, useEffect } from 'react'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'

export default function WangEditor(props) {
    // 编辑器内容(由父组件传递进来的)
    const { html, setHtml } = props
    // editor 实例
    const [editor, setEditor] = useState(null)
    // 工具栏配置
    const toolbarConfig = {}
    // 编辑器配置
    const editorConfig = {
        placeholder: '请输入内容...',
        // 添加上传图片的配置
        MENU_CONF: {}
    }
    // 上传图片的配置
    editorConfig.MENU_CONF['uploadImage'] = {
        //上传地址
        server: '/api/upload',
        //上传文件名
        fieldName: 'file',
        //头信息（添加token）
        headers: {
            Authorization: 'Bearer ' + sessionStorage.getItem("token"),
        },
        // 上传之前触发
        onBeforeUpload(file) {   
            // file 选中的文件，格式如 { key: file }
            return file
        },
        // 上传进度的回调函数 progress 是 0-100 的数字
        onProgress(progress) {},
        // 自定义插入图片
        customInsert(res, insertFn) {           
            // res 即服务端的返回结果
            let { url } = res
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(url)
        },
    }
    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    
    return (
        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            {/* 工具栏 */}
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
            />
            {/* 编辑器 */}
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                {/*实现编辑器*/}
                onChange={editor => setHtml(editor.getHtml())}
                mode="default"
                style={{ height: '450px', overflowY: 'hidden' }}
            />
        </div>
    )
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74

2.10.3 添加公告

在EditNotice.jsx文件内编写添加的逻辑

这是只写了添加的逻辑

/pages/notice/EditNotice.jsx

import {
    Card,
    Space,
    Spin,
    Button,
    Form,
    Input,
    message
} from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useForm } from 'antd/es/form/Form';
import { useState,useEffect } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import { addNews } from '@/api/http'
// 封装的富文本编辑器组件
import WangEditor from '@/compented/WangEditor';

export default function EditNews() {
    const navigate = useNavigate()
    const { state } = useLocation()
    // 表单实例
    const [editNewsForm] = useForm()
    // 等待动画
    const [loading, setloading] = useState(false);
    // 编辑器内容在父组件定义
    const [html, setHtml] = useState('')
    // 表单提交
    const onFinish = async (values) => {
        setloading(true)
        //将富文本编辑器的内容添加到参数中
        values.content = html
        //添加
        let { code } = (await addNews(values)).data
        if (code === 0) {
            message.success('添加成功')
            navigate('/notion')
        } else {
            message.error('添加失败')
        }
        setloading(false)
    }

    return (
        <Spin indicator={<LoadingOutlined />} spinning={loading}>
            <Card title='添加新闻' extra={<Button onClick={() => navigate('/notion')}>返回列表</Button>}>
                <Form
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 18 }}
                    form={editNewsForm}
                    onFinish={onFinish}
                    autoComplete='off'
                    validateTrigger={'onBlur'}
                >
                    <Form.Item label="标题" name='title' rules={[{ required: true, message: '请输入标题' }]} >
                        <Input />
                    </Form.Item>
                    <Form.Item label="作者" name='author' rules={[{ required: true, message: '请输入作者' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="内容" name='content'>
                        {/*向编辑器传递内容*/}
                        <WangEditor html={html} setHtml={setHtml} />
                    </Form.Item>
                    <Form.Item label=" " colon={false}>
                        <Space>
                            <Button type='primary' htmlType='submit'>添加</Button>
                            <Button>取消</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </Spin>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

2.10.4 编辑公告

编辑公告与编辑记录相似，都是给表单一个初始值，但是这里是用到了富文本编辑器，所以要将初始值给到富文本编辑器

下面是添加了编辑逻辑的代码

/pages/notice/EditNotice.jsx

import {
    Card,
    Space,
    Spin,
    Button,
    Form,
    Input,
    message
} from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useForm } from 'antd/es/form/Form';
import { useState,useEffect } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import { addNews, editNews } from '@/api/http'
//富文本编辑器组件
import WangEditor from '@/compented/WangEditor';

export default function EditNews() {
    const navigate = useNavigate()
    const { state } = useLocation()
    // 表单实例
    const [editNewsForm] = useForm()
    // 等待动画
    const [loading, setloading] = useState(false);
    // 编辑器内容
    const [html, setHtml] = useState(state ? state.record.content : '')
    // 编辑新闻初始化
    const record = state ? state.record : null
    const page = state ? state.page : null
    useEffect(() => {
        record ? setHtml(record.content) : null
    }, [record])
    // 表单提交
    const onFinish = async (values) => {
        setloading(true)
        // 添加
        values.content = html
        if (record) {
            // 编辑
            values.newsId = record.newsId
            let { code } = (await editNews(values)).data
            if (code === 0) {
                message.success('修改成功')
                navigate('/notion', { state: { page } })
            }
        } else {
            // 添加
            values.content = html
            let { code } = (await addNews(values)).data
            if (code === 0) {
                message.success('添加成功')
                navigate('/notion')
            } else {
                message.error('添加失败')
            }
        }
        setloading(false)
    }

    return (
        <Spin indicator={<LoadingOutlined />} spinning={loading}>
            <Card title={record ? '编辑新闻' : '添加新闻'} extra={<Button onClick={() => navigate('/notion')}>返回列表</Button>}>
                <Form
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 18 }}
                    form={editNewsForm}
                    initialValues={record ? record : null}
                    onFinish={onFinish}
                    autoComplete='off'
                    validateTrigger={'onBlur'}
                >
                    <Form.Item label="标题" name='title' rules={[{ required: true, message: '请输入标题' }]} >
                        <Input />
                    </Form.Item>
                    <Form.Item label="作者" name='author' rules={[{ required: true, message: '请输入作者' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label="内容" name='content'>
                        <WangEditor html={html} setHtml={setHtml} />
                    </Form.Item>
                    <Form.Item label=" " colon={false}>
                        <Space>
                            <Button type='primary' htmlType='submit'>{record ? '保存' : '添加'}</Button>
                            <Button>取消</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </Spin>
    )
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92

2.10.5 删除记录

删除记录写到了公告展示页面的逻辑中

下面是公告展示的完整代码

/pages/notice/Notice.jsx

import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Space, message } from 'antd';
import { getNews, delNews } from '@/api/http';
import { useNavigate, useLocation } from 'react-router-dom';

export default function Notion() {
    const navigeate = useNavigate()
    const { state } = useLocation()
    // 表格数据
    const [tabledata, setTableData] = useState([])
    // 分页显示
    const [page, setPage] = useState(state ? state.page : 1)
    const [total, setTotal] = useState()
    const [newNewsInfo, setNewNewsInfo] = useState(true)
    // 获取信息
    const newsTableData = async () => {
        let { code, list } = (await getNews()).data
        if (code === 0) {
            setTableData(list)
            setTotal(list.length)
        }
    }
    // 添加文章
    const onAddNews = () => {
        navigeate('/notion/editnews')
    }
    // 改变页码
    const onChange = (page) => {
        setPage(page)
    }
    // 获取最新数据
    useEffect(() => {
        newsTableData();
    }, [page, newNewsInfo])

    // 编辑新闻
    const editNews = (record) => {
        // console.log(record.content);
        navigeate('/notion/editnews', { state: { record, page } })
    }
    // 删除新闻
    const deleteNews = async (newsId) => {
        let { code } = (await delNews({ newsId })).data
        if (code === 0) {
            setNewNewsInfo(!newNewsInfo)
            message.success('删除成功')
        }
    }
    // 查看新闻
    const dateilNews = (newsId) => {
        navigeate('/notion/dateilnews', { state: { newsId } })
    }

    const NewsTableColumns = [{
        title: '文章标题',
        dataIndex: 'title',
        key: 'tiele',
    }, {
        title: '作者',
        dataIndex: 'author',
        key: 'author',
    }, {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button onClick={() => { dateilNews(record.newsId) }}>预览</Button>
                <Button type='primary' onClick={() => editNews(record)}>编辑</Button>
                <Button onClick={() => deleteNews(record.newsId)}>删除</Button>
            </Space>
        ),
    }];

    return (
        <Card
            title="公告管理"
            extra={<Button type="primary" onClick={onAddNews}>添加公告</Button>}
        >
            <Table
                columns={NewsTableColumns}
                dataSource={tabledata}
                rowKey={(record) => String(record.newsId)}
                // 分页
                pagination={{
                    total,
                    pageSize: 4,
                    current: page,
                    onChange
                }}
            />
        </Card>
    )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93

2.11Excel表格导入导出

2.11.1 下载 xlsx插件

npm i xlsx

  • 1

2.11.2 实现导入导出

一般是从后台获取数据的，导入后也是保存到后台的，但是这里为了方便直接就地使用了。如果需要与后台对接，再添加逻辑即可

创建了一个Excle导入导出的路由，实现代码如下

/pages/Excle.jsx

import React from 'react';
import { Upload, Button, message, Table } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
// 引入XLSX
import * as XLSX from 'xlsx'
import { useState } from 'react';
import { useEffect } from 'react';
/**
 * Excel 导入：将表格转换成json 数据 ；npm i xlsx
 * Excel 导出：将json数据转换成表格 ；
 *
 * npm : https://www.npmjs.com/package/xlsx
 */
//表格的表头（表头限制了传入的表格格式，这里是为了演示方便）
const columns = [
  {
    title: "姓名",
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: "年龄",
    dataIndex: 'age',
    key: 'age',
    align: 'center',
  },
  {
    title: "年级",
    dataIndex: 'grade',
    key: 'grade',
    align: 'center',
  },
]
// Excel组件
const Excel = () => {
  const [fileList, setfileList] = useState([])  //上传文件列表
  const [uploading, setuploading] = useState(false) //上传状态
  const [dataSource, setdataSource] = useState([]) //表格数据
  //读取上传文件信息
  const readFile = () => {
    return new Promise(resolve => {
      // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
      let reader = new FileReader()
      // 该方法用于将File对象转化为二进制文件
      reader.readAsBinaryString(fileList[0])
      // 当把文件所有数据加载完毕后，把数据传给promise的下一步
      reader.onload = ev => {
        resolve(ev.target.result)
      }
    })
  }
  // 把上传*.xlsx解析为json
  const onChange = async () => {
    setuploading(true)
    // 获取上传excel的文件数据
    let dataBinary = await readFile();
    // 获取工作簿对象
    let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });
    // 获取第一个工作表的数据
    let workSheet = workBook.Sheets[workBook.SheetNames[0]];
    // 把工作表数据转为json
    const data = XLSX.utils.sheet_to_json(workSheet);
    setuploading(false)
    setfileList([])
    setdataSource(data)
    //把json传给tableData
  }
  //fileList变化时调用onChange
  useEffect(() => {
     // 初始化时不执行
    if (fileList.length === 0) return;
    onChange()
  }, [fileList])
  //上传组件Upload的props配置
  const props = {
    beforeUpload: file => {
      let arr = file.name.split('.');
      if (arr[arr.length - 1] === 'xlsx') {
        setfileList(() => [file])
      } else {
        message.warn("请选择正确的文件");
      }
      return false;
    },
    fileList,
    maxCount: 1,
  };
  //把json导出为excel
  const handleExport = () => {
    let workbook = XLSX.utils.book_new();
    let workSheet = XLSX.utils.json_to_sheet(dataSource.map(item => {
      delete item.key
      return item
    }));
    // table1为工作表的名字
    XLSX.utils.book_append_sheet(workbook, workSheet, '七二班')
    XLSX.writeFileXLSX(workbook, '外国语中学学生信息.xlsx')
  }

  return (
    <>
      <Upload {...props} disabled={uploading}>
        <Button icon={<UploadOutlined />} disabled={uploading} loading={uploading}>
          {uploading ? '正在导入...' : 'Excel导入'}
        </Button>
      </Upload>
      <Button onClick={handleExport}>导出</Button>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        rowKey={(record)=>record.name}
      />
    </>
  );
}

export default Excel;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119

3 结束

就这么多吧，项目中遇到的问题再单独总结。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/556054
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号