后台管理系统究极保姆级教学(看了必会)！！！

Posted 2023-03-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了后台管理系统究极保姆级教学(看了必会)！！！相关的知识，希望对你有一定的参考价值。

参考技术A 项目大概可以分为8个部分

1.基础配置

2.登录模块

3.用户模块

4.权限管理模块

5.商品模块

6.订单模块

7.数据统计模块

8.打包优化

新建一个vue2的项目，安装aixos，element-ui，vuex-persistedstate固化插件

对axios进行第一次封装，在src下新建unitils文件夹，里面新建一个request.js文件（名字自定义）

引入axios，store，element-ui，在axios.create中设置baseURL基础路径，timeout超时时间，声明一个request变量接收，通过request.interceptors.request.use设置请求拦截，如果请求成功，判断vx是否存有token，如果有，就加在请求头中，如果请求失败，通过Promise.reject将失败的信息返回出去

通过request.interceptors.response.use设置响应拦截，可以先从后台返回的状态入手，定义一个code接收后台返回的状态，先判断后台返回的消息是否为‘无效token’（这里一般是和后台对接好了返回40001等等状态），如果是，则给予对应提示，然后让页面跳转到登录页。

如果想更细一点，继续判断400,401等，然后给对应的提示

可以对错误信息精确描述，比如后端连接异常或者请求超时，也可以给对应的请求，axios的重复请求我们下面再说

我们需要定义三个方法来帮助我们实现

在响应请求中调用，检查是否存在重复请求，如果有就取消，然后把当前请求信息加入到pendingRequest中

在返回数据前移除请求

在错误信息中移除请求

别忘了把我们定义的request导出。此时我们axios第一次封装结束，我们可以顺带去store中装上固化插件

然后对axios进行二次封装，在与request.js同级再定义一个api.js，然后引入request.js，定义方法请求后台数据，比如这里我们定义请求登录的接口

在views下建一个Login.vue组件，使用element-ui中的form表单

:model绑定成自己定义的表单数据，也就是用户名和密码所在对象

:rules为自己定义的正则

ref是这个表单的dom元素

给登录和重置绑定事件并把绑定的ref属性传递过去

引入我们定义请求登录接口的方法，点击登录后把定义的表单数据作为后端需要的参数传递过去，通过.then进行接下来的操作，我们可以去store中定义一个存储token的方法，顺带也定义了一个移除token 的方法，比如我们退出登录后需要用到，

在页面中通过this.$store.commit调用mutations里的方法，把后台返回的token传过去

我们可以去router中把路由定义一下，顺带放一个路由前置守卫，在里面我们可以判断如果将要去的路由不是登录页，那我们可以先获取vuex中存的token，如果存有token证明用户登陆过，则让其跳转，反之，返回登录页，如果要去的是登录页，直接放行，注意这里router.beforeEach要放在我们const router的下面写，否则会因为找不到router报错，然后通过this.$router.push('/home‘)跳转到home页面

登录页效果，以及登录成功后的页面

接下来我们来写跳转后的home页面，左侧菜单对应的路由应该是动态生成的，这里我们是手写额，后面会再写一遍告诉大家如何用动态路由实现，现在我们可以根据左侧菜单返回的数据定义路由，把home当作父级路由，把左侧菜单栏跳转的路由写成子路由

组件位置我们也可以放在对应的文件夹内

此时我们回到home页面，写好头部，给退出登录绑定事件

从element-ui引入一个container容器

isCollapse为控制左侧菜单栏的显示隐藏

：default-active为默认显示的路由

router为开启路由模式

菜单的显示使用一个双重for循环，

:index为唯一标识，接收一个字符串，所以我们用+拼接一个空字符串

至于内层for循环的:index,因为我们定义的子路由不加'/'，所以我们用/Home/ + obj.path拼接一下

别忘了在右侧的el-main中加入router-view，否则显示不了子路由的内容

接下来是逻辑部分，引入我们在api.js中定义的请求左侧菜单接口的方法

isCollapse是控制左侧菜单的显示与隐藏，sideTabList用来存储后台返回的左侧菜单栏数据，arr是我定义的一个图标数组，给部分菜单加一个图标，我们在created中发送这个请求，把返回的数据给sideTabList赋上，

当我们点击退出时，提示是否退出，如果是，则调用vuex的方法清除token，并退回到登录页，至此，我们home页结束，登录模块完成

引入我们需要用到的接口，以及我们自己封装的一个面包屑组件

tableData为返回的表格数据

isShow为控制点击分配权限时模态框显示与隐藏的变量

title为点击添加，编辑的提示语句，因为我们编辑和添加用的是同一个模态框，所以我们用title来判断是添加还是编辑

who为下拉框默认的内容

dialogFormVisible为控制点击添加或编辑时模态框显示与隐藏的变量

total后台返回的总数据条数

form为绑定后台需要的用户名，密码，邮箱，手机号，

rules正则

person为下拉框选择完成后该项的id

roleList为角色列表

搜索部分，定义一个obj，里面有后台需要的关键字，当前页，每页多少条，给搜索绑定事件

定义一个渲染的方法getTable,这里只有一上来调用传了个1，是因为一上来会有个获取数据成功提示，又不想别的请求发送后继续有这个提示，于是只有一上来传了个真值

然后调用角色列表赋值，点击搜索时，再调用一次渲染方法即可

点击添加，模态框显示，把title改成添加用户

点击编辑把title改成编辑，模态框显示，数据回填

模态框关闭时，数据清空

点击确定添加或编辑，先判断title是编辑还是添加用户，然后传入后台对应的参数

分页部分

@size-change为每页多少条改变时触发，比如我们一上来每页只让显示两条，当我们切换至4条每页时就会触发

@current-change为每页改变时触发，比如我们一上来为第1页。当我们点击第2页时就会触发

：page-sizes为可供选择每页选则条数的选项

：page-size为每页显示多少条

total就是一共多少条

分配权限

点击分配权限弹出模态框，数据回填，选则完毕时通过some方法找到对应数据把id村人person

点击确定添加时，传递需要的数据，完成分配，再渲染页面

效果图：

请求角色列表数据，渲染到表格，编辑添加可以使用同一个模态框，绑定动态title判断添加还是编辑，传入后台要求数据完成功能，点击删除传入id完成。点击分配权限弹出模态框，发送请求，请求所有权限的列表在树形图中，通过递归方法把该权限自带的权限回填到树形图中，即复选框呈选中状态，因为我们请求所有列表是异步的，点击分配权限是同步的，所以会造成数据闪动情况，我们可以给弹出框加个定时器，让他也是异步执行，最后就是点击每项显示标签，根据样式，我们可以把返回的数据分为左右结构，右边的又可以分为左右结构，遍历到该项下面，点击X时，传入该项id和该权限id完成删除

请求权限列表数据，渲染页面，权限等级哪里用一个三元表达式，根据返回的level等级渲染对应的样式

请求商品列表数据，其中一个创建时间，可以引入一个时间格式化工具，在main..js中定义一个全局过滤器，在要格式化数据的这里调用全局的方法完成，删除即传一个id给后台，删除对应数据，点击添加时跳进添加的页面，引入组件tab和step，第一级判断级联菜单三级是否都选中，只有都选中才可以进行下一步操作，商品参数则请求参数列表，其sel为many，商品属性sel为only，上传图片也需要引入element一个upload组件，商品内容则需要引入一个富文本插件

点击添加商品

在element中引入一个级联菜单，把请求回来的三级分类数据在级联菜单中显示，引入一个tab切换的时候让其对应显示静态属性或者动态参数，通过级联菜单的事件。当我们选择完毕，判断该value绑定的数组长度是否为3，为3则获取对应参数，此时添加参数按钮解除禁用（默认禁用），可以点击添加参数，给对应的数据添加参数，或者属性，当我们点击参数或者属性时显示标签，当我们点击添加标签时，输入想要的内容，失焦或者回车添加该标签

点击添加角色弹出模态框，此时请求2级分类数据，点击完成或者模态框关闭此时请求三级分类数据，编辑添加可以使用同一个模态框，绑定动态title判断添加还是编辑，传入后台要求数据完成功能，点击删除传入id完成，这里用到一个element中的一个table表格，可以多层展开

请求订单页面数据，其中一个下单时间，可以引入一个时间格式化工具，在main..js中定义一个全局过滤器，在要格式化数据的这里调用全局的方法完成，删除即传一个id给后台，删除对应数据

日期格式化