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

本文介绍了一个使用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 是否存在,来决定页面的跳转。
  1. 用户已经存在,则直接跳转到主界面
// 跳转到管理界面(不需要再回退回到登录)
        props.history.replace('/home')
  1. 用户不存在,自动跳转到登录页面
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
    数组相关的

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值