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