(一) 登录页面: 需要做登录判断, 在main.js里面设置导航守卫(beforeEach)来进行登录验证
设置路由元信息,给每个路由设置自定义的meta对象,更好的进行登录验证
在调用axios的时候,可以需要在main.js中统一设置token,来进行数据的请求,给服务器发送一个标识
为了axios更好的请求接口,把axios设置基地址,把axios抽取出来,创建多个副本,后面只需要在当前页面导入并调用axios即可.
(二) index主页面: 需要把面包屑抽取为组件,在main.js里面全局注册,在index页面导入组件即可,因为mybread面包屑是公用的,一般在全局里面导入注册.
在index页面需要用到elment-ui里面的导航切换栏,同时需要用嵌套路由,进行单页面跳转.
在index页面需要引用饿了么里面的分页,在文本输入框中,用到原生的native修饰符,来修饰事件的绑定;
接着就是对data的增删改查;
(三)权限管理页面
导入饿了么ui里面的table表格控件,然后调用role接口,在渲染层级的时候,使用switch..case的时候,遇到了坑点,switch..case默认是三个等号,我设置的是两个等号,最后三个等号就显示出来了;
角色列表页面:这里用到了element-ui里面的tree树形控件, 里面有三层嵌套,在分配角色的时,用到了递归算法(角色列表页面逻辑比较复杂)
(四)商品列表页面
为了内部需要路由切换, 写组件;在main.js中写规则,挖坑router-view, 用编程式导航进行单页面跳转, this.$router.push().这里不用传参,只是单纯的进行页面跳转;
跳转之后,使用upload组件上传img; 携带token直接设置到uploads内部的headers属性即可;
img的展示需要设置高度才能生效
还用到了富文本编辑器;
在商品分类页面中tree设置row-key(每一条数据的唯一标记)
省市联动用插件就行distpicker
