vue2实现电商后台管理的思路

电商后台管理系统分为6大模块

一:用户登录 / 退出

二:用户管理

  • 用户列表:实现用户的增删改查,分页以及分配角色功能

三:权限管理

  • 3-1:角色列表:实现角色的增删改以及分配权限功能
  • 3-2:权限列表:展示所有权限以及权限等级

四:商品管理

  • 4-1:商品列表:实现商品的增删改,分页查询功能
  • 4-2:分类参数:实现动态参数和静态参数的增删改
  • 4-3:商品分类:实现商品分类的增删改以及查看分类下所有的子分类

五:订单管理

  • 订单列表
    • 实现修改地址
    • 实现查看物流进度        

六:数据统计

  • 数据报表

                                                                                                                                                           

前端技术栈:vue,vue-router,element-ui,axios,echarts

项目初始化步骤:

  1. 安装vue脚手架
  2. 通过vue脚手架创建项目
  3. 配置vue路由
  4. 配置element-ui组件库
  5. 配置axios

基础配置:对axios进行第一次封装,在src下新建unitils文件夹,里面新建一个request.js文件(名字自定义)

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

vue2实现电商后台管理的思路_第1张图片

 

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

vue2实现电商后台管理的思路_第2张图片

         可以对错误信息精确描述,比如后端连接异常或者请求超时,也可以给对应的请求.别忘了把我们定义的server导出

vue2实现电商后台管理的思路_第3张图片

         此时我们axios第一次封装结束,我们可以顺带去store中装上固化插件

vue2实现电商后台管理的思路_第4张图片

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

登录的接口

vue2实现电商后台管理的思路_第5张图片

 


一:登录模块

        

在views下建一个Login文件夹里面新建index.vue组件,使用element-ui中的form表单

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

:rules为自己定义的正则

ref是这个表单的dom元素

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

登录页--布局代码

vue2实现电商后台管理的思路_第6张图片

实现页面

登录业务逻辑

        表单验证:用户在输入账号和密码后,点击登录时表单会进行预验证,判断用户输入的账号和密码是否符合规范,验证通过后向服务器发送 axios 请求

验证规则:

vue2实现电商后台管理的思路_第7张图片

                     vue2实现电商后台管理的思路_第8张图片

vue2实现电商后台管理的思路_第9张图片 

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

vue2实现电商后台管理的思路_第10张图片

 vue2实现电商后台管理的思路_第11张图片

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

vue2实现电商后台管理的思路_第12张图片

vue2实现电商后台管理的思路_第13张图片 

 登录成功后的效果:

vue2实现电商后台管理的思路_第14张图片

 登录后的主页(home)部分:        

         主页路由设置:左侧菜单对应的路由一般在公司大型项目中是动态生成的,这里我们是手写静态路由,后面会再写一遍告诉大家如何用动态路由实现,现在我们可以根据左侧菜单返回的数据定义路由,把home当作父级路由,把左侧菜单栏跳转的路由写成子路由

vue2实现电商后台管理的思路_第15张图片

vue2实现电商后台管理的思路_第16张图片 

                                      vue2实现电商后台管理的思路_第17张图片

vue2实现电商后台管理的思路_第18张图片

home主页布局:引入 Element-UI 中的 Header Aside Main 组件

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

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

router为开启路由模式

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

:index为唯一标识,我们可以设为item.path,因为每个路径也是唯一的

至于内层for循环的:index也是同样的道理设为ele.path

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

vue2实现电商后台管理的思路_第19张图片

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

isCollapse是控制左侧菜单的显示与隐藏,menusList用来存储后台返回的左侧菜单栏数据,我们在methods中封装一个方法里边发送这个请求,把返回的数据给menusList赋上,然后在created里边调用这个方法。

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

vue2实现电商后台管理的思路_第20张图片



二、用户模块 

 引入我们需要用到的接口,头部是element-ui面包屑导航

userData为返回的表格数据

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

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

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

total后台返回的总数据条数

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

addFormRules正则

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

region为角色列表

搜索部分,里面有后台需要的关键字query,总条数total,当前页pagenum,每页多少条pagesize,给搜索绑定事件

vue2实现电商后台管理的思路_第21张图片

vue2实现电商后台管理的思路_第22张图片 

vue2实现电商后台管理的思路_第23张图片 

 在methods里面封装一个方法里面是分页的接口数据,发送完请求之后给数据赋值,然后在created调用这个方法,

在页面上搜索按钮那里直接给个点击事件直接调用数据

分页部分

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

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

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

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

total就是一共多少条

vue2实现电商后台管理的思路_第24张图片

vue2实现电商后台管理的思路_第25张图片 

 

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

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

模态框关闭时 ,数据清空

 vue2实现电商后台管理的思路_第26张图片

vue2实现电商后台管理的思路_第27张图片 

vue2实现电商后台管理的思路_第28张图片

vue2实现电商后台管理的思路_第29张图片 

 

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

                                                 vue2实现电商后台管理的思路_第30张图片

 

分配权限

点击分配权限弹出模态框,数据回填,选择完时通过获取到的数据把id赋值

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

vue2实现电商后台管理的思路_第31张图片

 效果图:

vue2实现电商后台管理的思路_第32张图片

 



三:权限管理模块

  •         角色列表

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

展示当前角色下的所有权限:当用户点击某个角色的下拉箭头时,该角色的所有权限数据会以类似于树结构的形式展示出来。用户也可以删除该角色下的某个权限。

  • 为表格设置 type=“expand” 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
  • 通过 scope.row 可以获取该行也就是该角色的数据

vue2实现电商后台管理的思路_第33张图片

 

vue2实现电商后台管理的思路_第34张图片

vue2实现电商后台管理的思路_第35张图片 

vue2实现电商后台管理的思路_第36张图片 

   vue2实现电商后台管理的思路_第37张图片

 角色列表效果图:

业务逻辑:

通过 scope.row 获取的数据就是该角色的所有信息,数据是一个对象,每一个对象下都有一个 children 属性,这个 children 属性就是该角色的所有权限了,children 是一个数组,每一个 children 属性下又嵌套这一个 children 属性,一共嵌套三层,这分别就是该角色下的一级、二级、三级权限了。
可以循环 children 下的每个对象,就可以把一级权限渲染出来,在每一个一级权限中又嵌套着二级权限,所以,要想渲染出所有的一级、二级、三级权限需要使用三层 v-for 循环的嵌套。
vue2实现电商后台管理的思路_第38张图片

 

vue2实现电商后台管理的思路_第39张图片

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

       vue2实现电商后台管理的思路_第40张图片

 权限列表效果图:

vue2实现电商后台管理的思路_第41张图片

 



三:商品管理

  • 商品列表

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

vue2实现电商后台管理的思路_第42张图片

vue2实现电商后台管理的思路_第43张图片 

vue2实现电商后台管理的思路_第44张图片 

 vue2实现电商后台管理的思路_第45张图片

 vue2实现电商后台管理的思路_第46张图片

  • 分类参数:

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

 vue2实现电商后台管理的思路_第47张图片

 

  • 商品分类:

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

vue2实现电商后台管理的思路_第48张图片vue2实现电商后台管理的思路_第49张图片vue2实现电商后台管理的思路_第50张图片

 



四、订单管理

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

vue2实现电商后台管理的思路_第51张图片

 



五、数据统计

        报表页面:

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

vue2实现电商后台管理的思路_第52张图片

vue2实现电商后台管理的思路_第53张图片 

vue2实现电商后台管理的思路_第54张图片 

vue2实现电商后台管理的思路_第55张图片 

 至此,后台管理项目结束。

你可能感兴趣的:(后台管理,vue.js,前端,javascript)