配景管理体系究极保姆级教学(看了必会)！！！

程序员 · 2024-9-29 17:25:09

1.分析项目

项目大概可以分为8个部门
1.根本设置
2.登录模块
3.用户模块
4.权限管理模块
5.商品模块
6.订单模块
7.数据统计模块
8.打包优化
1.根本设置：

新建一个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，界说方法哀求配景数据，比如这里我们界说哀求登录的接口

2.登录模块：

在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页竣事，登录模块完成
3.用户模块：

引入我们必要用到的接口，以及我们自己封装的一个面包屑组件
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
点击确定添加时，转达必要的数据，完身分配，再渲染页面
结果图：

4 权限管理模块：

脚色列表：

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

权限列表：

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

5 商品管理模块：

商品列表：

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

点击添加商品

分类参数：

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

商品分类：

点击添加脚色弹出模态框，此时哀求2级分类数据，点击完成大概模态框关闭此时哀求三级分类数据，编辑添加可以使用同一个模态框，绑定动态title判定添加还是编辑，传入配景要求数据完乐成能，点击删除传入id完成，这里用到一个element中的一个table表格，可以多层睁开

6订单管理模块：

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

日期格式化

7数据统计模块：

报表页面：

引入echarts下载并引入，必要一个具备巨细的容器在mounted中初始话这个echarts发送哀求，把哀求回来的数据设置一下，把这个设置好的数据付给echarts实列，如有需求的话报表和页面一起缩小可以调用原生的方法window.onresize，

8项目打包优化：

在根目次下新建env.development，env.production文件，方便我们在生产情况与开发情况切换，npm run build打包，设置vue.config.js中的publicPath: './',改变根本路径，在public下的html页面引入插件的cdn，然后在vue.config.js中抽离，在babel.config.js中取出console.log
1
1
1
1
1
1
11
1

1
1
1
1
1
1
1
1

配景管理体系究极保姆级教学(看了必会)！！！

所属分类: 问答交流

新帖推荐: 30日

推荐作品