react后台管理系统项目总结

React后台管理项目

    • 1、创建一个项目
    • 2、配置一个ui插件库
    • 开始
    • 实现跳转
    • 快速获取路由地址
    • 将路由和组件映射
    • axios请求
    • 实现登录模块
    • 隐藏二级路由
    • 按照价格排序或者按照销量等排序
    • 管理员模块
    • 动态渲染菜单栏
    • 访问权限
    • 登入后的权限访问
    • 项目bug总结

1、创建一个项目

  • 作为一个React的项目,首先就得先创建一个项目
  • npx create-react-app react-pro

2、配置一个ui插件库

  • 作为一个程序员,写项目就需要一个非常好用的插件库,这里推荐使用ant.design组件库

开始

  • 创建一个全局的index.js文件,在index中导入最基本的模块,React以及ReactDOM
  • 一个基本小细节需要注意就是在设置渲染页面时document.querySelector('#root')如果不是使用getElementById的情况下需要记得加上#,如果是使用getElementById时,记得千万不要加#号
  • 创建一个全局App.jsx文件
  • 修改一下目录的解构,将需要的文件夹创建好 :api ,layout,router,store,utils,views
  • 搭建好项目的主要结构,在组件库中选择一个布局结构
  • 在设置log时会有一个问题,当你点击右边小窗口时,会有一个小问题,收起时,文字不会收回去,而是继续显示react后台管理系统项目总结_第1张图片
    在这里库使用学到的三元运算符去解决,去判断当他收起时,就为空,展开时就把需要设置的标签设置上去
this.state.collapsed ? null : <span>康娜管理系统</span>

但是这时你会发现一个新的问题,文字确实空了,但是在你展开时,会出现是先显示文字是掉落的,然后再展开回归原位,这时就需要给他的样式上加一个overflow: hidden,这样这个小问题就解决了

  • 在App中设置路由跳转,在这之前需要安装路由yarn add react-router-dom -S,在App设置一个默认跳转,跳转至存放页面的文件夹 min 中
  • 按照ui库中的组件以及Tree树形控件,设计字段,存放至router文件下的menus.js文件中
  • 将菜单文件抽离出来放置一个组件中,在存放的页面文件中导入分离的菜单组件,分离的目的就是为了能够更好的维护代码,更美观,方便查找代码的问题。
  • 在menus.js中设置好跳转的字段
  • path: '/banner', title: '轮播图管理', key: '0-1',
  • 在设置好需要的字段的时候,就可以去抽离出来的组件中导入设置好字段的文件,设置一个方法,将导入的字段文件传入作为参数,把传入的参数进行map循环,此时需要做一个判断,在组件库的拿到的组件代码中,有一个导航的,也有二级导航的,在我们设置的字段当中也是有二级导航和一级导航的,这时循环就需要判断是否有二级菜单导航if (item.children)如果有二级菜单,那么就返回一个标签将二级菜单循环出来,如果没有二级菜单,则直接渲染一级菜单即可。

实现跳转

  • 实现跳转的方式有很多只
  • 1、类组件实现编程式导航跳转this.props.history.push(要跳转的路由)
  • 2、函数式组件的跳转props.history.push(要跳转的路由)
  • 3、使用useHistory高阶方法,history = useHistory()不可以在组价的内部事件中调用,通过

快速获取路由地址

  • 将数据库文件导入,定义一个方法使用map方法循环得到他的path路由的地址,在这就有一个问题,需要需要去判断是否有二级路由
  • 使用if判断当前的path是否有children二级路由,如果有二级路由则先渲染出以及路由,在利用递归方法去调用自身,将二级路由传入进去进行循环渲染
  • else如果没有二级则直接渲染,很重要的一点,将key值都设置成循环时的path,key={item.path}
  • 在使用的组件上定义一个点击事件 给点击事件传递一个方法,传递的方法中设置history.push方法,而要跳转的值就是key,这样就能实现点击时获取到该值的路由

将路由和组件映射

  • 在创建好所有组件时,在数据库中绑定对应的组件component: React.lazy(() => import('./../views/banner/index'))将对应的组件绑定后即可实现跳转路由

axios请求

  • 在工作中的请求网址和上线后的网址 可能不是同一个网址,可以通过设置一个判断给当前的模式设置为开发者模式,然后使用三元运算符去判断如果是开发模式就使用第一个网址,如果不是就使用第二个网址,有些公司上线后的网址不是同一个

实现登录模块

  • 封装请求登录的接口,拿到请求返回的值,在antd的插件中,有个比较强大的功能,onFinish是整个登入标签的自带标签上定义的,他的value就是你在表单中的输入值,可以把value值传个登录请求作为参数传入。使用状态码判定是否登录,10005则代表没有账号,10003则表示密码有问题,没有则俩种情况就是正确的。需要做的关键一步,在登录成功时把登录的账号和密码等信息传入本地存储起来,并且设置跳转到首页,需要尤其是token。在用户登入之后请求数据时需要带上token去判断用户是否登录,token有没有失效。在拦截器中设置一个判断,token是否为101119或者为空,如果是的话就需要重新登录。设置跳转到到登入页面。
  • 那么新的问题就出现了,假设你在登入的情况下,去把登录状态或者token清除了,这时候就会出现报错,这个报错的原因是因为你清除后还是登入状态,当你去点击其他菜单时会发送请求,而发送请求的时候你的本地已经被清除了,但你又请求了数据,所以会返回一个空,触发了请求后会进入渲染时的循环,循环时就会发现是空的,就会报错。从而导致不会之间跳转到登录页面,而是直接报错,所以这时候就需要在设置跳转后再下方设置一个data为0给他,防止进入循环报错。在将整个设置return出去,防止整个报错。

隐藏二级路由

  • 在数据库中存在有些二级路由是你不想让他显示的,是需要通过某些方法来触发跳转实现的
  • 比如添加轮播图,只想点击添加轮播图按钮显示,就可以在数据库字段中设置一个showfalse,然后再渲染的时候做一个判断,判断item.show就是数据库的的show是否为false,如果为false的话,该路由就渲染为空,如果没有show这个选项则正常渲染,然后需要使用这个路由时则在需要的地方设置一个点击跳转,跳转到那个路由即可

按照价格排序或者按照销量等排序

  • 通过title表格中的sorter`方法(a - b )俩个参数,设置 a.这个字段 - b.这个字段即可实现排序

管理员模块

  • 定义好管理员的请求方法
  • 使用antd UI组件库的中的title表格去渲染拿到的管理员详情列表
  • 使用组件库中的Drawer(抽屉)方法去添加新管理员
  • 通过组件库中的Input方法,可以获取到输入的值
  • 将获取到的值全部集合用data接收,在调用封装好的添加管理员的请求将data作为参数传入进去
  • 传入完成后做判断,判断返回的code状态码,是否为10004,如果是10004就返回警告信息,管理员已存在
  • 添加成功后要记得把输入框中的值全部清空,并且把Drawer抽屉关闭,并且将请求详情管理员的方法封装起来进行调用,调用方法进行视图更新
  • 有管理员就有删除管理员
  • 使用到了antd组件库中的气泡确认框,在点击确认时的回调中调用删除管理员的方法,删除reaord中当前的anminid,在删除后.then调用封装的视图更新方法更新视图
  • 修改管理员权限
  • 在antd组件库中找到树形结构,在该方法中有一个checkedkeys方法可以获取到选中的复选框,把点击时的adminnamerolecheckedkeys等选中的值获取到,在编辑时修改其中的值,并且将弹框关闭

动态渲染菜单栏

  • checkedkeys就是复选框选中的值,定义一个方法把checkedkeys作为参数传入
  • 传入后利用分割合并拿到的字段,传入的字段是0-0-1这样的字段,而渲染的情况下只会渲染拿到的字段,而一级字段是0-0这样的,所以需要去分割,把拿到的字段分割取前三位,然后将分割的字段与传过来的字段进行合并去重
  • 在将拿到的字段去渲染

访问权限

  • 有时候你希望普通成员也能拥有一些页面,但是不能查看,这时候就可以在数据库中加入一个role值,普通成员可以看到的就设置字段值为1,管理员能看到的就设置字段为2 ,然后再渲染的时候去做一层判断,如果当前的role值大于或者等于数据库中的role值,就将完整的component渲染,如果小于则渲染一个无权限。

登入后的权限访问

在登入后,通过通知栏可以访问到一些你没有权限看到的页面,普通用户的情况下可能不会去触发这些,但是安全起见,需要设置一下,去判断拿回来的值,将总数据库作为参数导入,在将处理好的字段进行导入,去循环对比,总数据中的item.key===val,如果等于val,就将item的值push进定义好的数组中,在将拿到的数组去查找他的二级菜单,利用递归,将拿到的二级菜单和传入的二级菜单做对比,如果你访问的路由值存在数据库中,而你并没有这个路由,则给你返回一个无权限,如果数据库中没有这个路由,则返回404

项目bug总结

  • 1、在你手动去浏览器清除token时,你再去请求别的页面时,并不会跳转,而是报错,即使你设置了token===10119或者等于空,但是在清除token后去请求数据时是会返回data的,而其他代码中有用到data 的地方,此时他去读取这个data时,就是个空,拿不到数据则会报错
  • 解决方案:在跳转后给他一个data为0,在给他返回出去,就可以避免这样的报错
  • 2、有时候在重新启动程序的时候会在首页,并没有重定义判定
  • 原因:你的重定义需要放在其他路由前面,才会在进入程序时先去判定是否重定向,重定向之后在判断其他路由
  • 3、在退出登入后,你重新登录回去后他不会定位在上一次登入的位置
  • 解决方案:给跳转登录的方法后面加上(/login ?redirect + this.props.location.pathname),将退出前的路由给保存下来,在下次登录的时候,在登录程序后面加上?redirect,但是这样会出问题,因为上传登录的数据中会议redirect,而我们需要的是/pro/List这段,所以先将其分割,拿到pro这段
  • 在跳转的时候做一层判定,如果登录的时候有上一次的记录就跳转至上一层的记录,如果没有就跳转到首页

你可能感兴趣的:(新手学习,react.js)