react后台管理系统项目总结

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()不可以在组价的内部事件中调用，通过 {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这段
• 在跳转的时候做一层判定，如果登录的时候有上一次的记录就跳转至上一层的记录，如果没有就跳转到首页