一个简简单单的后台管理思路

电商后台管理项目--(如有雷同,纯属巧合)

项目介绍:

基于Vue2+Element+vue-router+axios+Echarts实现 主要包用户登录、退出登录、括商品管理、订单管理、用户管理、权限管理、数据统计...等功能 思维导图

1.搭建项目

下载vue2项目 安装 Element-ui 并引入 安装 axios 并引入 安装进度条并引入 安装防抖并引入(可查看文档lodash) 安装富文本并引入相应文件 (可在npm查看文档quill) 安装Echarts表并引入 安装moment并引入

2.删除无用文件

3.重置页面

4.实现用户登录

布局

使用elementui-from表单验证

登录账号密码 接口验证

在路由router.js里实现用户鉴权 没token不能跳转页面

4.1封装一个api请求

在请求拦截设置请求头

5.首页

进入首页显示wecome页 在路由里面配置退出登录用 把本地token清除用Container  实现主体布局

header用Layout 布局

渲染左侧数据顶部有折叠在element ui框架有方法左侧用NavMenu

左侧渲染左侧列表信息 在配置刷新页面不丢失当前的选中的状态 右侧在路由里面配置一个文件并使用router-view插入一个页面在获取用户列表根据页面需要进行渲染

6.用户管理

用户管理有面包屑 我们可以给他封装成一个组件可以复用减少代码重新编写提升了代码效率搜索用户可以使用element组件 可以点击搜索触发为空触发改变iput值触发 再用防抖或者节流增加用户体验分页功能 在element框架内使用该组件并绑定相应的值编辑用户信息 删除 分配角色点击添加 都会触发一个相应的对话框点击添加触发事件显示对话框 在里面写要添加的内容触发事件谈出来对话框 并运用element的from表单组件进行表单验证 并传递给后台数据 并关闭对话框和更新视图点击编辑运用template 插槽 数据回填 更新后传递给后台数据并关闭对话框和更新视图点击删除我们运用插槽可以获取用户的id并且调用事件返回给后台并完成删除(也可以点击删除的时候跳出来模态框问用户是否删除 以此来增加用户体验也避免用户误点)更改状态用element里的switch组件 里面有@chage事件点击这个事件会有返回值true或false 并把状态返回给后台更新并更新视图点击分配角色谈出来对话框 利用数据回填获取到当前的用户名和角色 并且获取角色列表的数据渲染给select表并获取到角色的id和用户的id传给后台并更新视图

7.权限管理

权限管理这个模块里面有两个页面分别是角色列表和权限列表角色列表 主体也是顶部一个面包屑 这个时候就可以用我们封装面包屑的组件 直接运用吧label值改一下即可表格上面一个按钮 点击这个按钮添加角色 触发事件谈出来对话框 并运用element的from表单组件进行表单验证并把添加的数据传递给后台数据并更新视图

主体部分上个tree形表格 先获取接口渲染表格的数据 点击编辑触发事件 打开对话框并使用数据回填 让当前from表单显示当前的角色名称和角色描述 点击确定 把值传递给接口并更新数据在更新视图点击删除 利用插槽获取当前角色id并且传递给后台进行删除(此处可用element组件提示用户是否删除 增加用户体验 防止用户误点)最后在提示用户删除完成并更新视图点击分配权限谈出对话框对话框里为tree形控件并且调用权限列表渲染上去 用户点击那个就发送给后台并且渲染到点击table左侧的icon下面会有内容并展示出来并且用element的el-row组件调整样式而且这个tree里面有删除点击删除把需要的数据传递给后台并更新到视图 如果该用户没有权限就让他显示该用户暂无权限权限列表 渲染权限列表和之前渲染的一样 换汤不换药 这个地方主要的就是权限等级 我用的是v-if就让他的权限等于0 的时候显示一级以此类推 这个地方也可以使用vue的过滤器

商品管理

商品管理这个模块分为三个页面分别是商品列表分类参数商品分类收我们写的商品列表页页面顶部我们接着运用我们封装的面包屑组件对其值进行改变传递 接着就是一个搜索框和一个button添加商品按钮 点击他我们跳转到一个新的页面 这个页面有步骤条和tabs栏这些都是element的组件他们得active属性我们可以定义用样的值这样就实现了他们两个的联动 这个地方注意一下步骤条的activ值要的是number值 我们定义的是string 这就需要我们在步骤条的active属性里给他转为number(让他 *1即可) 实现他们联动之后就要写我们添加商品是使用的数据了在tabs的第一栏我们运用from表单 并进行验证 底下的商品分类这个时候我们就要获取商品分类的数据并进行渲染这个地方我们用element的级联选择器这个组件 这个时候我们要注意一下 如果我们选择商品分类是二级或者是一级和没选的情况下是不允许用户来切换的这个提示用户必须要选择三级的分类才可以切换tabs 这个时候我们就可以用级联选择器的一个事件来进行处理(:before-leave)他有两个参数 分别是newactive 和 oldactiv 分别表示的就是 现在所在的位置的下标(这个地方的下指值得就是我们定义的active)和切换前位置的下标 可以在他里面进行判断 如果级联选择器的v-model这选中的数组里面的length!=3 和当前所在位置下标是0的情况下 就不让用户进行切换tabs 如果是的情况就返回false 切换后就可以写要添加的静态属性和动态属性 这个时候我们就可以使用tabs的事件(@tab-click) 来进行判断当前位置下标为一的话就给调用的api传动态所需要的参数 如果是2的情况就给传静态需要的参数 这个时候要注意一点就是在动态参数的时候 他是个string 而我们渲染到页面需要的是arr 这个时候就用到split(‘,’)把字符串分割成数组 在进行渲染 在上传图片的时候我们用到的是element的上传组件 这个api不属于我们内部封装的api所以要重新设置请求头 我们把上传的图片设置为一个对象 里面是他的路径 再把这个对象赋给我们添加整体的对象 最后一个富文本这可以运用我么之前在搭建项目的时候下载的富文本插件引入使用即可 在富文本下面有一个添加按钮我们点击吧我们添加的传递给后台并更新视图并跳转到goods页面

点击编辑同样调到我们新建添加商品那个页面 这个时候需要我们判断一个看要跳到那个页面 然后步骤同添加的一摸一样 只不过这个编辑的地方使用了数据回填分页就使用element的分页组件 步骤同上用户管理 有手就行 不多解释 (也可以把他封装成一个组件 减少代码量 提高代码效率)再个就是分类参数 进入这个页面 我们运用我们封装的面包屑 然后他是一个表格上面有个选择分类商品和一个级联选择器 级联选择器渲染商品分类的数据 如果没选或者选择的是二级分类就需要我们小小的操作一下 同样也是判断一下级联选择器的v-model的数组的length是否=3 如果不等就把添加的按钮禁用和table的内容情况 下面是一个tabs切换每个下面都有一个表格 布局一样 只有数据不一样 这里我们就说一下用户管理的数据 他是一个tree树形控件 我们需要在下面添加和渲染他的动态参数值 在我们渲染完这个表格就可以点击表格左侧的icon让他的动态参数在下面展示出来点击编辑这个地方同上 也是利用插槽获取数据利用数据回填 有手就行 不讲点击删除同上 也是利用插槽获取id 传递给后台并更新视图 简简单单 就不讲了 (为了增加用户体验我们可以给用户一个提示.......同上) 在tree属性控件内添加需要我们用到tag动态标签 我们在回车和失去焦点的时候触发事件来进去对数据的添加并更新视图 删除就是我们先要获取他的下标我们把本地里的同样的下标删除splice(i,1)在传给 后台即可 需要我么注意的是我们在回车和失去焦点事件下把 taginput的内容为空 不然的话就回车就会执行两次商品分类我们获取商品分类的数据并进行渲染 这个table是tree形的表格element的组件当我们我们用他的一个参数就可以点击左侧icon就可以展示他的子级元素 表格里面的排序可以通过vue的过滤器写也可以通过v-if来实现 看个人的喜好我用的是v-if 对他进行判断 如果他的值为0 就一级 为1就是二级为2就是3级 他的编辑和删除同上 有手就行 我不多说废话

订单管理

顶部也是一面包屑可以利用我们封装的组件 下面就是他的table表格了 我们获取接口渲染数据到视图上 主要的别的都和以上我们写的没什么区别 重点就是用户付款状态 我们可以利用插槽 获取用户是否付款 我们可以先判断一下用户是否付款如果用户付款就可以在tag标签里写已付款 如果未付款就在标签里写未付款 这里也可以使用vue的过滤器 然后他这个时间处理我么可以利用我么下载的时间戳的插件 在mian.js里面设置时间戳过滤器 详情请看参考文档(https://blog.youkuaiyun.com/weixin_44781409/article/details/90549278?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-90549278-blog-82142100.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-90549278-blog-82142100.pc_relevant_antiscanv2&utm_relevant_index=1) 在就是操作里面的修改地址 和物流状态 我们点击修改地址 会出来一个对话框 对话框里有我们现在地址的级联选择器 (在element里有 选中任意一级选项)地址的话我们有接口直接渲染即可 级联选择器下还有个详情地址是input框 当我们拿到这两个数据就可以调用接口发起请求即可 物流状态的话就是要通过吊用我们得接口 点击物流状态 谈出一个对话框 我们在element里用时间线组件 在里面可以操作他排序的倒序和正序 也可以在时间线上设置颜色和他的样式(color, icon)

数据统计

顶部依旧还是用我们封装的面包屑 下面就是我们Ehcarts表 我们已经安装过 直接运用即可 这要注意一点 我们需要一个空的盒子 还要设置他的宽高 初始化下Ehcarts init然后获取接口的数据 赋值给一个数组 并渲染给ehcarts 这个时候就可以出现我们的Ehcarts表  this.mychart.setOption(option); 还有一点我们要想让他可以在屏幕上自适应宽度 我们可以通过ref获取这个盒子dom的 window.addEventListener("resize", this.mychart.resize)