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时会有一个问题，当你点击右边小窗口时，会有一个小问题，收起时，文字不会收回去，而是继续显示
在这里库使用学到的三元运算符去解决，去判断当他收起时，就为空，展开时就把需要设置的标签设置上去

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()不可以在组价的内部事件中调用，通过<button onClik = { () => {history.push()}}< /button>

快速获取路由地址

将数据库文件导入，定义一个方法使用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出去，防止整个报错。

隐藏二级路由

在数据库中存在有些二级路由是你不想让他显示的，是需要通过某些方法来触发跳转实现的
比如添加轮播图，只想点击添加轮播图按钮显示，就可以在数据库字段中设置一个show为false，然后再渲染的时候做一个判断，判断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方法可以获取到选中的复选框，把点击时的adminname，role，checkedkeys等选中的值获取到，在编辑时修改其中的值，并且将弹框关闭

动态渲染菜单栏

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后台管理系统项目总结相关推荐

【开发篇】10分钟快速搭建React后台管理系统模板
React后台管理系统模板 github 我又回来了!!!学完前端react,再学spring,这周或者下周写spring有关的!!! 一.准备React 1.建立react应用 npx create ...
从头开始react后台管理系统-安装ant-Design
从头开始react后台管理系统-安装ant-Design introduce 在做微信小程序, 想着顺便做一个管理系统的随便扯扯我是个菜鸡,很菜很菜的菜鸡,春招各家凉,现在还是0offer.心情很 ...
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
React后台管理系统-品类选择器二级联动组件
React后台管理系统-品类选择器二级联动组件品类选择器二级联动 posted on 2018-06-26 22:21 gisery 阅读( ...) 评论( ...) 编辑收藏
电商平台后台管理系统项目介绍
MIMO电商平台后台管理系统项目简介基于 Vue3 + Vite2 + Typescript 开发的电子商务平台,组件库使用 element plus: 数据为 mock 模拟,登录账号密码随意填 ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
安利一个非常优秀的开源后台管理系统项目，开箱即用，极大提高效率
介绍 | BuildAdmin 是一个完善的开源的后台管理系统项目. 以下是我认为的优缺点: 优点: 1.开箱即用,功能很多. 2.界面美观,带手动切换界面样式功能. 缺点: 1.功能多带来的缺点是让 ...