React+AntD组件搭建后台管理系统（不定时更新）

最新推荐文章于 2024-08-20 15:53:53 发布

叶蓁蓁lia

最新推荐文章于 2024-08-20 15:53:53 发布

阅读量2.3k

点赞数

分类专栏：项目总结文章标签： javascript reactjs es6

本文链接：https://blog.csdn.net/weixin_48390287/article/details/114664269

版权

本文介绍了一个使用React和AntD组件构建的后台管理系统，涵盖用户管理、商品分类和商品管理等功能。项目中运用了async/await简化异步处理，使用高阶组件扩展组件功能，以及AntD的Menu组件动态匹配菜单等技术。此外，还涉及到了本地存储、跨域请求（jsonp）和表格数据处理等知识点。

摘要由CSDN通过智能技术生成

项目描述

该项目是属于一个前后台分离的后台管理的SPA，即单页Web应用（single page web application，SPA），包含了用户管理、商品分类管理、商品管理以及权限管理等功能模块，在技术方面采用的是React的相关知识、AntD组件以及Github第三方库进行模块化、工程化的模式开发。

总的来说，这个后台管理系统实现的是增删改查的基本操作，但是对于像我这种前端小白来说还是收获匪浅，起码是对于一个项目的开发流程有所了解，现在根据每个组件记录一下学习历程，知识点的总结以及踩过的坑。

提前声明一下，是在网上找到的别人搭建好的接口，利用谷歌浏览器的扩展工具 Postman进行接口测试，发送ajax请求实现前后台的数据交互，然后运用webpack进行项目的打包生成build文件。

Login 登陆组件

在这里插入图片描述
组件简介： 是静态组件，自定义了一部分的样式布局，使用AntD组件里面的 Form Input Button Icon 等组件实现用户登录的表单界面

组件作用： 主要是用来进行表单数据（用户数据）的收集以及表单验证，其表单验证规则直接使用AntD组件文档里的属性

组件相关操作：

为了可以读取用户名称，然后在Admin组件内的首页界面上动态的显示用户名称，需要将登录的 user 保存到内存中去，所以生成一个专门用来保存用户变量的工具模块。

// 保存user
        const user = result.data
        memoryUtils.user = user  //保存在内存中
        storeageUtils.saveUser(user)  //保存到local中去

为实现维持登录与自动登录的功能，需要采用浏览器的本地存储建立持久链接，那么将保存用户、读取用户、删除用户的方法封装成一个单独的模块，并且将这个模块对象暴露出去以供其他组件使用。

localStorage.setItem(USER_KEY,JSON.stringify(user))

但是考虑到各大浏览器的兼容性，选择在github官网上下载store库，可以解决跨域的问题，同时也有相对应操作用户的方法，其内部也可以自动的转换json数据。

const storageUtils = {
   
  // 保存user
  saveUser(user) {
   
  // localStorage.setItem(USER_KEY,JSON.stringify(user))
    store.set(USER_KEY,user)
  },
  // 读取user
  getUser(){
   
    // return JSON.parse(localStorage.getItem(USER_KEY) || '{}' )
    return store.get(USER_KEY) || {
   }
  },
  // 删除user
  removeUser(){
   
    // localStorage.removeItem(USER_KEY)
    store.remove(USER_KEY)
  }
}

export default storageUtils

注意点：在上述的代码中 getUser() 的返回值是一个有意思的设计，因为在读取用户时，考虑到用户可能是第一次登陆，为了防止后续获取用户信息出错，最好返回一个空对象

在入口文件index.js中去读取在本地存储的用户数据 user 保存到自定义内存模块中去，这样的话，保证以后其他组件想要操作用户数据时直接导入内存模块。用户登录完成后刷新界面仍然会显示的是登录的界面

// 读取local中保存的user 保存到内存中
const user = storageUtils.getUser()
memoryUtils.user = user

通过判断内存中的用户 user 是否存在，来决定页面的跳转。

用户已经存在，则直接跳转到主界面

// 跳转到管理界面（不需要再回退回到登录）
        props.history.replace('/home')

用户不存在，自动跳转到登录页面

if(!user || !user._id) {
   
            // 自动跳转到登录页面
            return <Redirect to='/login'/>
        }

项目知识点

async 和 await

1、作用？
简化promise对象的使用：不再使用then() 来指定成功/失败的回调函数
以同步编码(没有回调函数) 方式实现异步流程

2、哪里写await
在返回promise的表达式左侧写await: 不想要promise 想要promise异步执行的成功的value数据
3、哪里写async
await所在函数(最近的)的左侧写async
高阶函数：
（1）一类特别的函数
接收函数类型的参数
返回值是函数
（2）常见的高阶函数
定时器：setTimeout() setInterval() Promise
数组相关的