devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

尚品汇(后台管理系统)学习笔记_尚品汇后台管理系统

作者：盐析白兔 | 2024-02-08 15:46:13

赞

踩

尚品汇后台管理系统

 笔记：

  1. v-model实现父子组件通信：
  2.   原始dom事件oninput，他经常结合表单元素一起使用，当表单原始内容发生变化时就触发一次回调
  3.   v-model实现原理：value和input事件实现的，可以通过v-model实现父子组件的数据同步
  4.   1.  在vue2中可以通过value与input事件实现v-model功能
  5.       例如：
  6.         <input type="text" :value="num" @input="num = $event.target.value" />
  7.         data() {
  8.           return {
  9.             num: "1",
  10.           };
  11.         },     这样和 <input type="text" v-model="num">效果一样
  12.   2. 实现父子组件数据同步
  13.        在父组件中：
  14.           <hello-world :value="num" @input="num = $event"></hello-world>
  15.           给子组件标签传递一个value属性值为num的值
  16.           绑定一个input自定义事件，触发后让num的值等于传过来的值
  17.           可以简化为：
  18.           <hello-world v-model="num"></hello-world>
  19.           data() {
  20.             return {
  21.               num: "1",  设置num
  22.             }
  23.           }
  24.        在子组件中：
  25.           <input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
  26.           在子组件的input标签中设置value值为父组件传过来的值，
  27.           绑定input原生事件，当触发input原生事件时触发绑定的input自定义事件，
  28.           同时把子组件中input标签的value的值传过去
  29.           props: ["value"] 接收传过来的属性
  30.  
  31. --------------------------------------------------------------------------------
  32. 属性修饰符sync(组件通信方式之一)：
  33.   与v-model类似
  34.   例如:
  35.      <hello-world :money="money" @update:money="money = $event"></hello-world>
  36.   代表父组件给子组件传递money，给子组件绑定一个自定义事件update:money
  37.   可以简写：
  38.      <hello-world :money.sync="money"></hello-world>
  39.   也代表父组件给子组件传递money，给子组件绑定一个自定义事件update:money
  40.      <button @click="$emit('update:money', money-100)">
  41.   子组件触发自定义事件，第二个参数等于包装成一个回调函数给父组件传递过去了
  42.  
  43. --------------------------------------------------------------------------------
  44. $attrs与$listeners
  45.   他们两者是组件实例的属性
  46.   1.  $attrs可以获取到父组件给子组件传递props
  47.       对于子组件来说，父组件的数据可以利用props接收，但要注意如果子组件用props接收了属性，
  48.       在$attrs中就获取不到了
  49.       <xxx v-bind="$attrs"></xxx> 这样可以把$attrs上父组传过来的数据传给xxx
  50.       注意：这里必须要用v-bind不能用简写: 
  51.   2. $listeners可以获取到父组件给子组件传递的自定义事件
  52.      <xxx v-on="$listeners"></xxx>这样可以把$listeners中父给子传过来的自定义事件全绑定到xxx上
  53.      注意：这里必须用v-on不能用简写@
  54.     
  55. --------------------------------------------------------------------------------
  56. $children与$parent
  57.    1. $children组件实的属性，可以获取到当前组件的全部子组件(数组)
  58.       尽量不要以索引的形式写  this.$children[0] 
  59.       因为如果子组件数量过多无法确定哪个是第一个，$children并不保证顺序
  60.    2. $parent组件实例的属性，可以获取到当前子组件的父组件，进而可以操作父组件的数据与方法
  61.       如果有多个父组件可能会误操作，就不建议使用
  62.  
  63. --------------------------------------------------------------------------------
  64. 后台管理系统：可以让用户通过一个可视化工具，可以实现对于数据库进行增删改查的操作
  65.             而且需要注意，根据不同的角色(老板,员工)，看到的，操作内容是不同的
  66.             例如：老板可以操作(产品的上架,产品的下架，查看员工个人业绩等)
  67.                  员工可以查看个人业绩
  68.             对于后台管理系统项目，一般而言不需要注册
  69.  
  70. --------------------------------------------------------------------------------
  71. 模板介绍
  72. 简洁版: https://github.com/PanJiaChen/vue-admin-template
  73. 加强版: https://github.com/PanJiaChen/vue-element-admin
  74. 下载下来后先npn i把依赖包安装上
  75. npm run dev运行(要把node版本降到16版本，16以上用不了)
  76.  
  77. build：   ----index.js webpack配置文件【很少修改这个文件】
  78. mock：    ----mock数据的文件夹【模拟一些假的数据mockjs实现的】，因为咱们实际开发的时候，利用的是真实接口
  79. node_modules：  ------项目依赖的模块
  80. public：  ------ico图标,静态页面，publick文件夹里面经常放置一些静态资源，而且在项目打包的时候webpack
  81.               不会编译这个文件夹，原封不动的打包到dist文件夹里面
  82. src：
  83.     -----程序员源代码的地方
  84.     ------api文件夹:涉及请求相关的
  85.     ------assets文件夹：里面放置一些静态资源（一般共享的），放在aseets文件夹里面静态资源，在 
  86.           webpack打包
  87.           的时候，会进行编译
  88.     ------components文件夹：一般放置非路由组件获取全局组件
  89.     ------icons这个文件夹的里面放置了一些svg矢量图
  90.     ------layout文件夹：他里面放置一些组件与混入
  91.     ------router文件夹：与路由相关的
  92.     -----store文件夹：一定是与vuex先关的
  93.     -----style文件夹：与样式先关的
  94.     ------utils文件夹：request.js是axios二次封装文件
  95.     ------views文件夹：里面放置的是路由组件
  96. App.vue:根组件
  97. main.js：入口文件
  98. permission.js:与导航守卫先关、
  99. settings：项目配置项文件
  100. .env.development 开发环境下的配置文件
  101. .env.producation  上线环境下的配置文件
  102. .env.staging  测试环境的配置文件  这三个文件里的数据可以通过webpack对外暴露的process.env拿到
  103.  
  104. --------------------------------------------------------------------------------
  105. 在css中选择路径时使用@要在@前面加个~
  106.  
  107. --------------------------------------------------------------------------------
  108. 后台管理系统API接口在线文档：
  109. http://39.98.123.211:8170/swagger-ui.html
  110. http://39.98.123.211:8510/swagger-ui.html
  111.  
  112. --------------------------------------------------------------------------------
  113. 完成登录业务：
  114.     静态组件完成
  115.     书写API（换成真实的接口）
  116.     axios二次封装
  117.     换成真实接口之后需要解决代理跨域问题(解决代理跨域问题)
  118.  
  119. 在vue.config.js中把devServer中mkck的假数据换成跨域代理
  120.  proxy: {
  121.      "/dev-api": {
  122.        target: "http://39.98.123.211:8170",
  123.        pathRewrite: { "^/dev-api": "" },
  124.      },
  125.    },
  126.  
  127. 在utils/requests.js中的：
  128. 把config.headers["X-Token"] = getToken()
  129.     换成：config.headers["token"] = getToken()
  130.     这里的token是后台设置的
  131. 把if (res.code !== 20000)
  132.     换成： if (res.code !== 20000 && res.code != 200)
  133.  
  134. --------------------------------------------------------------------------------
  135. 配置相同前缀不同target的代理：
  136.   proxy: {
  137.       "/dev-api/admin/acl": {// 匹配所有以 '/dev-api/admin/acl'为前缀的请求路径
  138.         target: "http://39.98.123.211:8170/", // 代理目标的基础路径
  139.         pathRewrite: { "^/dev-api": "" }, //让代理服务器拿到的地址不带设置的前缀,
  140.                                              如果服务器地址本身带就不写
  141.       },
  142.       "/dev-api/admin/product": {// 匹配所有以 '/dev-api/admin/product'为前缀的请求路径
  143.         target: "http://39.98.123.211:8510/", // 代理目标的基础路径
  144.         pathRewrite: { "^/dev-api": "" }, //让代理服务器拿到的地址不带设置的前缀,
  145.                                              如果服务器地址本身带就不写
  146.       },
  147.     },
  148. 1.把原来的/dev-api改为/dev-api/admin/acl
  149. 2.复制一份该跨域配置，改为/dev-api/admin/product
  150. 3.将新的配置的端口号从8170改为8510
  151. 4.其实就是针对登录和获取trademark分别做了代理
  152.  
  153. --------------------------------------------------------------------------------
  154. 修改品牌信息时删不了自带的，只能删自己或者其他人添加
  155.  
  156. --------------------------------------------------------------------------------
  157. 不能在data中用this.xxx收集data本身的数据
  158. 因为对象存储数据是无序存储
  159.  
  160. --------------------------------------------------------------------------------
  161. 如果需要深拷贝一个对象用xxx={...xxx}，但这个对象的层级很深(对象套数组,数组套对象)
  162. 那么对象中的基本数据类型会被深拷贝，对象中的引用数据类型会被浅拷贝
  163. 1. 可以使用xxx= JSON.parse(JSON.stringify(xxx)) 进行深拷贝
  164. 2. 可以使用lodash中的深拷贝
  165.    import cloneDeep from "lodash/cloneDeep" 按需引入深拷贝 
  166.    要拷贝的对象= cloneDeep(被拷贝的对象);
  167.  
  168. --------------------------------------------------------------------------------
  169. 老版本气泡确认框的点击确认按钮的事件名称叫onConfirm
  170. 气泡确认框的<template>代码里必须写scope="{ row }"不然没效果
  171.  
  172. --------------------------------------------------------------------------------
  173. 接口(注意接口不要有空格)：
  174. /admin/acl/index/login    post 登录
  175. /admin/acl/index/info    get 获取用户信息
  176. /admin/acl/index/logout    post 退出登录
  177. /admin/product/baseTrademark/{page}/{limit}   get 品牌列表
  178.   post 添加品牌
  179. 参数：{
  180.   logoUrl: "string", 品牌logo
  181.   tmName: "string"   品牌名字
  182. }
  183. /admin/product/baseTrademark/update  put  修改品牌
  184. 参数：{
  185.   id:0,
  186.   logoUrl: "string", 品牌logo
  187.   tmName: "string"   品牌名字
  188. }
  189. /admin/product/fileUpload   post  上传图片接口
  190. /admin/product/baseTrademark/remove/{id}  delete  删除品牌
  191. /admin/product/getCategory1  get 获取三级联动一级分类
  192. /admin/product/getCategory2/{category1Id}   get 获取三级联动二级分类
  193. /admin/product/getCategory3/{category2Id}   get 获取三级联动三级分类
  194. /admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}  get 获取平台属性
  195. /admin/product/saveAttrInfo  post  添加,修改属性与属性值
  196. 参数：{
  197.       attrName: "",   属性名
  198.       attrValueList: [  属性名中的属性值
  199.         {
  200.          attrId: this.保存数据的对象.id,  属性名的id
  201.          添加属性和属性值时，因为attrId是服务器返回的数据，添加属性值时没有attrId，attrId要写 
  202.          undefined，
  203.          修改属性和属性值时也可以添加属性值，这时服务器已经返回attrId，所以要加上服务器返回的 
  204.          id，用this.保存数据的对象.id当添加时因为服务器没有返回id所以是undefined，修改时服务器 
  205.          返回了id就是这个返回id的值
  206.          valueName: ""    属性值
  207.         }
  208.        ],
  209.       categoryId: 0,  category3Id
  210.       categoryLevel: 3,  区分是几级id，都是3
  211.      }
  212. 添加或修改完保存时
  213. 如果用户添加了很多属性值，且属性值为空的不应该提交给服务器
  214. 提交给服务器数据中不应该出现flag字段
  215. /admin/product/deleteAttr/{attrId} delete  删除平台属性
  216. /admin/product/{page}/{limit}    get  spu列表数据   
  217. 参数：
  218.  page代表第几页  limit代表一页几个数据 
  219.  还有一个参数category3Id(三级分类的id)  要用params参数带过去
  220.  注意：params参数以对象形式传过去， params: { category3Id },
  221. /admin/product/baseTrademark/getTrademarkList    get spu品牌数据
  222. /admin/product/baseSaleAttrList    get 获取spu平台中全部的销售属性
  223. /admin/product/getSpuById/{spuId}   get  获取某一个spu信息
  224. /admin/product/spuImageList/{spuId} get 获取spu图片
  225. /admin/product/saveSpuInfo   post  添加spu
  226. /admin/product/updateSpuInfo  post  修改spu信息
  227. 添加和修改参数一样，区别是添加没有id，修改有id
  228. 注意1：保存时新添加的图片没有imgName和imgUrl要加上
  229. 新加上的图片的imgUrl不能用url要用response里的data
  230. 注意2：修改spu时照片墙照片不显示要用:file-list=""
  231. 参数：
  232. {
  233.   category3Id: 0, //三级分类id
  234.   description: "",//描述
  235.   tmId: 0, //品牌id
  236.   spuName:"",//spu的名字
  237.   id: 0,//添加参数不带id  通过有没有id判断新添加还是修改
  238.   spuImageList: [  //照片墙数据
  239.     {
  240.       imgName: "",
  241.       imgUrl: "",
  242.     }
  243.   ],
  244.   spuSaleAttrList: [  //平台销售属性与属性值信息
  245.     {
  246.       baseSaleAttrId: 0,  // 属性id
  247.       saleAttrName: "", //  属性名
  248.       spuSaleAttrValueList: [  //属性值列表
  249.         {
  250.           baseSaleAttrId: 0, //销售属性的id
  251.           saleAttrValueName: "", //销售属性值的名称
  252.         }
  253.       ]
  254.     }
  255.   ],
  256. }
  257. /admin/product/deleteSpu/{spuId} DELETE 删除spu
  258. /admin/product/spuImageList/{spuId}  get  获取sku图片列表
  259. /admin/product/spuSaleAttrList/{spuId} get  获取sku销售属性 
  260. /admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}
  261. get 获取sku平台属性
  262. /admin/product/saveSkuInfo  post  sku保存  注意：这里接口应该有问题，重量不填保存不了
  263. 参数：
  264. {
  265.   category3Id: 0,
  266.   spuId: 0,
  267.   tmId: 0, //tmid在传过来的row身上
  268.   price: 0, //价格
  269.   skuName: "",
  270.   weight: "",
  271.   skuDefaultImg: "",//默认图片
  272.   skuDesc: "",
  273.   skuAttrValueList: [ //平台属性列表
  274.     {
  275.       attrId: 0, //平台属性id
  276.       valueId: 0, //平台属性值的id
  277.     }
  278.   ],
  279.   skuImageList: [//图片列表
  280.     {
  281.       imgName: "",
  282.       imgUrl: "",
  283.       isDefault: "", //值为1为默认，为0是设置默认
  284.       spuImgId: 0
  285.     }
  286.   ],
  287.   skuSaleAttrValueList: [ //销售属性列表
  288.     {
  289.       saleAttrId: 0,//销售属性id
  290.       saleAttrValueId: 0,//销售属性值的id
  291.     }
  292.   ],
  293. }
  294. /admin/product/findBySpuId/{spuId}  get sku列表展示
  295. /admin/product/list/{page}/{limit}  
  296. get sku模块数据  每条数据中有个isSale属性，1为上架，0为下架
  297. /admin/product/onSale/{skuId}  get 上架
  298. /admin/product/cancelSale/{skuId}  get  下架
  299. /admin/product/deleteSku/{skuId}   删除sku
  300. /admin/product/getSkuById/{skuId} get  sku详情数据
  301. /admin/acl/user/{page}/{limit}  get  用户管理数据
  302. /admin/acl/user/{page}/{limit}  get 用户管理点击查询后获取数据
  303. 参数： 带一个params参数username(表示要查询的值)
  304. /admin/acl/user/save post 新增管理用户
  305. 参数：
  306. {
  307.    nickName:"",//用户名
  308.    password:"", //用户密码
  309.    username:"", //用户昵称
  310. }
  311. /admin/acl/user/remove/{id} delete  删除管理用户  注意：批量删除的接口有问题也用这个
  312. /admin/acl/user/toAssign/{userId}  get  根据用户获取角色数据
  313. /admin/acl/user/doAssign  post  根据用户分配角色
  314. 参数：用params带
  315.      userId 用户id ,
  316.      roleId [] 选择了的角色的id们
  317. /admin/acl/user/update  put  修改用户
  318. 参数：
  319. {
  320.    nickName: "", //用户名
  321.    username: "", //用户昵称
  322.    id: "", //用户id
  323. },
  324. /admin/acl/role/{page}/{limit}  get 获取角色数据
  325. /admin/acl/role/remove/{id} delete  删除角色
  326. /admin/acl/role/{page}/{limit}  get 角色管理点击查询后获取数据
  327. 参数： 带一个params参数roleName(表示要查询的值)
  328. /admin/acl/role/save  post  角色管理新增角色
  329. 参数：带一个data参数roleName(表示要添加的名字)
  330. /admin/acl/role/batchRemove   delete 角色管理批量删除
  331. 参数：  data参数，一个数组数组的每一位是每个角色的id
  332. /admin/acl/role/update  put  修改角色
  333. 参数：{id: "", roleName: "修改后的名字"}
  334. /admin/acl/permission/toAssign/{roleId}  get  根据角色获取菜单，分配权限页面的菜单
  335. /admin/acl/permission/doAssign   post 给角色分配权限
  336. 参数：{roleId："",permissionId:[分配权限的所有id,xxx,xxx]}  params参数
  337. /admin/acl/permission  get  获取菜单
  338. /admin/acl/permission/save post  新增菜单
  339. 参数：
  340.    {code:"权限值",level:"几级数组",name:"名称",pid:"",toCode:"跳转权限值",type:""}
  341.    pid：不能用row的pid,要用row的id
  342. /admin/acl/permission/update  put 修改菜单
  343. 参数：row
  344. /admin/acl/permission/remove/{id}  delete  删除菜单
  345.  
  346.  
  347.  
  348. --------------------------------------------------------------------------------
  349. Object.assign(): es6新增的方法可以合并对象
  350.    this._data可以操作data中的响应式数据
  351.    this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空
  352.    Object.assign(this._data,this.$options.data())
  353.  
  354.  
  355. --------------------------------------------------------------------------------
  356. 深度选择器：
  357.    如果使用了scoped那么子组件或第三方子组件的根标签会添加上相应的样式，更深层次不会
  358.    如果想使用scoped的同时又想让父组件中写的样式对子组件或第三方子组件深层次的标签也有效，
  359.    那么就要使用深层次选择器
  360.    原理：自动在选择器前面添加一个data-v-hash值的属性选择器(scoped是在后面加)
  361.    例如：/deep/ h1{...}会自动变成：[data-v-xxx] h1{...}
  362.    注意：/deep/是Vue2种实现穿透的方案，在Vue3中推荐使用:deep()代替/deep/
  363.    >>> 一般用于原生css
  364.    /deep/ 一般用于less
  365.    ::v-deep 一般用于scss
  366.  
  367. --------------------------------------------------------------------------------
  368. canvas:
  369.   canvas画布是HTML5中新增的一个特性，双闭合标签
  370.   canvas标签默认宽度与高度是300*150
  371.   浏览器认为canvas标签是一张图片
  372.   给canvas画布添加文本内容没有任何意义也不会显示
  373.   给canvas标签添加子节点也没有任何意义
  374.   如果想操作canvas画布：画布中绘制图形、显示文字都必须通过js完成
  375.   canvas标签的宽高必须通过canvas标签属性width|height设置，
  376.     例如： <canvas height="500"> </canvas>  
  377.     切记不能通过css样式去设置画布的宽度与高度，
  378.     css样式设置宽高控制的是canvas元素在页面中占据空间的大小，不是画布实际的大小
  379.     css样式设置宽高会让<canvas>标签元素在页面中占据的宽高与画布的宽高不一致
  380.  
  381. 绘制线段：
  382.   let canvas = document.querySelector("canvas")  通过js当中的"笔"去完成
  383.   let cxt = canvas.getContext("2d")  获取画布的笔(上下文)
  384.   cxt.moveTo(100, 100)  绘制线段：绘制线段的起点的设置(x,y)
  385.   cxt.lineTo(100, 200)  其他点的设置:可以有多个
  386.   cxt.lineTo(200, 300)
  387.   cxt.lineTo(220, 250)
  388.   cxt.fillStyle = "red"  设置图形的填充颜色
  389.   cxt.fill()
  390.   cxt.strokeStyle = "blue" 设置线段的颜色
  391.   cxt.lineWidth = "20"  设置线段的宽度(没有单位)
  392.   cxt.closePath()  设置起点与最后的终点连接在一起
  393.   cxt.stroke()   stroke方法绘制线段(上面的步骤都必须在绘制线段之前)
  394.  
  395. 绘制矩形：
  396.    let canvas = document.querySelector("canvas") 获取dom节点
  397.    let cxt = canvas.getContext("2d")  获取上下文
  398.    第一种方式：
  399.      cxt.strokeRect(100, 200, 100, 200) 参数为x，y，宽，高(这种只有描边没有填充颜色也无法填充颜色)
  400.    第二种方式：
  401.      cxt.fillStyle = "blue" 填充颜色，不填充默认黑色
  402.      cxt.fill();
  403.      cxt.fillRect(200, 200, 100, 200) 填充颜色必须在它之前才有效
  404.  
  405. 绘制圆形：
  406.   let canvas = document.querySelector("canvas")
  407.   let cxt = canvas.getContext("2d") 获取上下文
  408.   cxt.beginPath() 开始绘制圆
  409.   cxt.arc(100, 100, 50, 0, 2 * Math.PI, true)
  410.   获取圆形的方法：x，y,半径，起始弧度，结束弧度，是否逆时针绘制( 360度=2 * Math.PI)
  411.   cxt.fillStyle = "red" 设置填充颜色
  412.   cxt.fill()
  413.   cxt.stroke() 绘制
  414.  
  415. 清除画布：
  416.   cxt.clearRect(x,y,宽,高)   
  417.  
  418. 绘制文字：
  419.   cxt.font = "20px 微软雅黑" 设置字体大小和字体
  420.   cxt.fillStyle = "red" 设置字体颜色
  421.   cxt.fillText("数据可视化", 50, 20) 绘制文字(设置字体大小和颜色要在绘制之前)
  422.                   文字      x轴  y周
  423. --------------------------------------------------------------------------------
  424. svg：
  425.   svg是一种基于xml的图像文件格式，英文全称Scalable Vector Graphics，意思是可缩放的矢量图形
  426.   svg双闭合标签:默认宽度与高度300*150  svg绘制图形务必在svg标签内部使用绘制图形
  427.   <svg>
  428.    1. 绘制直线：
  429.     <line x1="100" y1="100" x2="200" y2="200" stroke="red"  stroke-width="1"></line>
  430.     x1 y1第一个点的坐标，x2 y2第二个点的坐标，stroke:线的颜色(不写不显示),stroke-width:线的粗细(可省略)
  431.    2. 绘制折线：
  432.     <polyline points="x1 y1,x2 y2,x3 y3，..." fill-opacity="0" stroke="red"></polyline>
  433.     可以绘制多个点，多个点的时候，最好带有逗号(好区分)也可以不带逗号
  434.     fill-opacity设置透明度(不设置是黑色)
  435.     stroke设置线的颜色(如果透明度设为0而且不设置stroke就看不到了)
  436.    3. 绘制矩形：
  437.     <rect x="400" y="400" width="150" height="50" fill="blue"></rect>
  438.     fill设置填充颜色(不设置默认是黑色) x，y左上角点坐标 width height宽高
  439.    4. 绘制圆形：
  440.     <circle cx="70" cy="95" r="50" fill="none" stroke="black"></circle>
  441.     cx cy圆心点坐标 r圆的半径
  442.    5. 绘制圆形或椭圆：
  443.     <ellipse cx="100" cy="70" rx="100" ry="50" ></ellipse>
  444.     cx cy圆心点坐标, rx ry x轴y轴的半径
  445.    6. 绘制多边形：
  446.     <polygon points="500,100,300,400,750 100"></polygon>
  447.     x1 y1,x2 y2,x3 y3
  448.    7. 任意图形：
  449.     <path d="M 10 10 L 20 400 L 30 120 L 40 66  L 50 60 Z"></path>
  450.     M x1 y1 L x1 y1 L x2 y2 L x3 y2... Z
  451.     M移动到初始位置 L画线 Z将结束和开始点闭合
  452.   </svg>：
  453.  
  454. --------------------------------------------------------------------------------------
  455. day.js    https://dayjs.fenxianglu.cn/
  456.  
  457. --------------------------------------------------------------------------------------
  458. hidden: true  隐藏路由
  459.  
  460. --------------------------------------------------------------------------------------
  461. 为什么不同用户登录我们的项目，菜单（路由）都是一样的？
  462. 因为咱们的路由‘死的’，不管你是谁，你能看见的，操作的菜单都是一样的
  463.  
  464. 如何实现菜单的权限？不同的用户所能操作|查看菜单不一样的？
  465. 起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，
  466. 返回给我们，我们可以根据服务器返回的数据（信息），可以动态的设置路由，
  467. 可以根据不同的用户展示不同的菜单。
  468.  
  469. 菜单权限：当用户获取用户信息的时候，服务器会把相应的用户拥有菜单的权限信息返回，需要根据用户身份对比出，当前这个用户需要展示哪些菜单
  470.  
  471. 常量路由：就是不关用户是什么角色，都可以看见的路由
  472.         （超级管理员，普通员工）：登录、404、首页
  473. 异步路由：不同的用户（角色），需要过滤筛选出的路由，称之为异步路由
  474. 任意路由：当路径出现错误的时候重定向404
  475.  
  476. 1. store/modules/user.js:
  477. import { login, logout, getInfo } from "@/api/user";
  478. import { getToken, setToken, removeToken } from "@/utils/auth";
  479. import { resetRouter, anyRoutes, asyncRoutes, constantRoutes } from "@/router";
  480. import router from "@/router";
  481. const getDefaultState = () => {
  482.   return {
  483.     token: getToken(), //获取token
  484.     name: "", //存储用户名
  485.     avatar: "", //存储用户头像
  486.     routes: [], //服务器返回的菜单信息【根据不同的角色：返回的标记信息，数组里面的元素是字符串】
  487.     roles: [], //角色信息
  488.     buttons: [], //按钮权限的信息
  489.     resultAsyncRoutes: [], //对比之后【项目中已有的异步路由，与服务器返回的标记信息进行对比最终需要展示的路由】
  490.     resultAllRputes: [], //用户最终需要展示全部路由
  491.   };
  492. };
  493.  
  494. const state = getDefaultState();
  495. //定义一个函数：两个数组进行对比，对比出当前用户到底显示哪些异步路由
  496. const computedAsyncRoutes = (asyncRoutes, routes) => {
  497.   //过滤出当前用户【超级管理|普通员工】需要展示的异步路由
  498.   return asyncRoutes.filter((item) => {
  499.     //数组当中没有这个元素返回索引值-1，如果有这个元素返回的索引值一定不是-1
  500.     if (routes.indexOf(item.name != -1)) {
  501.       if (item.children && item.children.length) {
  502.         item.children = computedAsyncRoutes(item.children, routes);
  503.       }
  504.       return true;
  505.     }
  506.   });
  507. };
  508. const mutations = {
  509.   RESET_STATE: (state) => {
  510.     Object.assign(state, getDefaultState());
  511.   },
  512.   SET_TOKEN: (state, token) => {
  513.     state.token = token;
  514.   },
  515.   // SET_NAME: (state, name) => {
  516.   //   state.name = name;
  517.   // },
  518.   // SET_AVATAR: (state, avatar) => {
  519.   //   state.avatar = avatar;
  520.   // },
  521.   // 存储用户信息
  522.   SET_USERINFO: (state, userInfo) => {
  523.     state.name = userInfo.name; //用户名
  524.     state.avatar = userInfo.avatar; //用户头像
  525.     state.routes = userInfo.routes; //菜单权限标记
  526.     state.buttons = userInfo.buttons; //按钮权限标记
  527.     state.roles = userInfo.roles; //角色
  528.   },
  529.   //最终计算出的异步路由
  530.   SET_RESULTASYNCROUTES: (state, asyncRoutes) => {
  531.     //vuex保存当前用户的异步路由，注意，一个用户需要展示完成路由：常量、异步、任意路由
  532.     state.resultAsyncRoutes = asyncRoutes;
  533.     //计算出当前用户需要展示所有路由
  534.     state.resultAllRputes = constantRoutes.concat(
  535.       state.resultAsyncRoutes,
  536.       anyRoutes
  537.     );
  538.     router.addRoutes(state.resultAllRputes); //给路由器添加新的路由
  539.   },
  540. };
  541.  
  542. const actions = {
  543.   // user login
  544.   async login({ commit }, userInfo) {
  545.     const { username, password } = userInfo;
  546.     let result = await login({ username: username.trim(), password: password });
  547.     if (result.code == 20000) {
  548.       commit("SET_TOKEN", result.data.token);
  549.       setToken(result.data.token);
  550.       return "ok";
  551.     } else {
  552.       return Promise.reject(new Error("faile"));
  553.     }
  554.     // return new Promise((resolve, reject) => {
  555.     //   login({ username: username.trim(), password: password }).then(response => {
  556.     //     const { data } = response
  557.     //     commit('SET_TOKEN', data.token)
  558.     //     setToken(data.token)
  559.     //     resolve()
  560.     //   }).catch(error => {
  561.     //     reject(error)
  562.     //   })
  563.     // })
  564.   },
  565.  
  566.   // get user info
  567.   getInfo({ commit, state }) {
  568.     return new Promise((resolve, reject) => {
  569.       getInfo(state.token)
  570.         .then((response) => {
  571.           //获取用户信息：返回数据包含：用户名name、用户头像avatar、routes[返回的标志：不同的用户应该展示哪些菜单的标记]、roles（用户角色信息）、buttons【按钮的信息：按钮权限用的标记】
  572.           const { data } = response;
  573.           console.log(data);
  574.           if (!data) {
  575.             return reject("Verification failed, please Login again.");
  576.           }
  577.           // const { name, avatar } = data;
  578.           // commit("SET_NAME", name);
  579.           // commit("SET_AVATAR", avatar);
  580.           commit("SET_USERINFO", data); //vuex存储用户全部信息
  581.           commit(
  582.             "SET_RESULTASYNCROUTES",
  583.             computedAsyncRoutes(asyncRoutes, data.routes)
  584.           );
  585.           resolve(data);
  586.         })
  587.         .catch((error) => {
  588.           reject(error);
  589.         });
  590.     });
  591.   },
  592.  
  593.   // user logout
  594.   logout({ commit, state }) {
  595.     return new Promise((resolve, reject) => {
  596.       logout(state.token)
  597.         .then(() => {
  598.           removeToken(); // must remove  token  first
  599.           resetRouter();
  600.           commit("RESET_STATE");
  601.           resolve();
  602.         })
  603.         .catch((error) => {
  604.           reject(error);
  605.         });
  606.     });
  607.   },
  608.  
  609.   // remove token
  610.   resetToken({ commit }) {
  611.     return new Promise((resolve) => {
  612.       removeToken(); // must remove  token  first
  613.       commit("RESET_STATE");
  614.       resolve();
  615.     });
  616.   },
  617. };
  618.  
  619. export default {
  620.   namespaced: true,
  621.   state,
  622.   mutations,
  623.   actions,
  624. };
  625.  
  626. 2. router/index.js:
  627. import Vue from "vue";
  628. import Router from "vue-router";
  629.  
  630. Vue.use(Router);
  631.  
  632. /* Layout */
  633. import Layout from "@/layout";
  634.  
  635. /**
  636.  * Note: sub-menu only appear when route children.length >= 1
  637.  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  638.  *
  639.  * hidden: true                   if set true, item will not show in the sidebar(default is false)
  640.  * alwaysShow: true               if set true, will always show the root menu
  641.  *                                if not set alwaysShow, when item has more than one children route,
  642.  *                                it will becomes nested mode, otherwise not show the root menu
  643.  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
  644.  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
  645.  * meta : {
  646.     roles: ['admin','editor']    control the page roles (you can set multiple roles)
  647.     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
  648.     icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
  649.     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
  650.     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  651.   }
  652.  */
  654. /**
  655.  * constantRoutes
  656.  * a base page that does not have permission requirements
  657.  * all roles can be accessed
  658.  */
  659. //常量路由：就是不关用户是什么角色，都可以看见的路由
  660. //（超级管理员，普通员工）：登录、404、首页
  661. export const constantRoutes = [
  662.   {
  663.     path: "/login",
  664.     component: () => import("@/views/login/index"),
  665.     hidden: true,
  666.   },
  667.  
  668.   {
  669.     path: "/404",
  670.     component: () => import("@/views/404"),
  671.     hidden: true,
  672.   },
  673.  
  674.   {
  675.     path: "/",
  676.     component: Layout,
  677.     redirect: "/dashboard",
  678.     children: [
  679.       {
  680.         path: "dashboard",
  681.         name: "Dashboard",
  682.         component: () => import("@/views/dashboard/index"),
  683.         meta: { title: "Dashboard", icon: "dashboard" },
  684.       },
  685.     ],
  686.   },
  687.   // 404 page must be placed at the end !!!
  688. ];
  689. //异步路由：不同的用户（角色），需要过滤筛选出的路由，称之为异步路由
  690. export const asyncRoutes = [
  691.   {
  692.     path: "/product",
  693.     component: Layout,
  694.     name: "product",
  695.     meta: { title: "平台属性管理", icon: "el-icon-shopping-bag-2" },
  696.     children: [
  697.       {
  698.         path: "attr",
  699.         name: "attr",
  700.         component: () => import("@/views/product/attr"),
  701.         meta: { title: "平台属性管理" },
  702.       },
  703.       {
  704.         path: "sku",
  705.         name: "sku",
  706.         component: () => import("@/views/product/sku"),
  707.         meta: { title: "sku管理" },
  708.       },
  709.       {
  710.         path: "spu",
  711.         name: "spu",
  712.         component: () => import("@/views/product/spu"),
  713.         meta: { title: "spu管理" },
  714.       },
  715.       {
  716.         path: "trademark",
  717.         name: "trademark",
  718.         component: () => import("@/views/product/trademark"),
  719.         meta: { title: "品牌管理" },
  720.       },
  721.     ],
  722.   },
  723.   {
  724.     path: "/alc",
  725.     name: "alc",
  726.     component: Layout,
  727.     meta: { title: "权限管理", icon: "el-icon-sold-out" },
  728.     children: [
  729.       {
  730.         path: "user",
  731.         name: "user",
  732.         component: () => import("@/views/alc/user"),
  733.         meta: { title: "用户管理" },
  734.       },
  735.       {
  736.         path: "role",
  737.         name: "role",
  738.         component: () => import("@/views/alc/role"),
  739.         meta: { title: "角色管理" },
  740.       },
  741.       {
  742.         path: "role/:id",
  743.         name: "roleAuth",
  744.         component: () => import("@/views/alc/role/roleAuth"),
  745.         meta: {
  746.           title: "角色授权",
  747.           activeMenu: "/acl/role",
  748.         },
  749.         hidden: true,
  750.       },
  751.       {
  752.         path: "permission",
  753.         name: "permission",
  754.         component: () => import("@/views/alc/permission"),
  755.         meta: { title: "菜单管理" },
  756.       },
  757.     ],
  758.   },
  759. ];
  760. //任意路由：当路径出现错误的时候重定向404
  761. export const anyRoutes = [{ path: "*", redirect: "/404", hidden: true }];
  762. const createRouter = () =>
  763.   new Router({
  764.     // mode: 'history', // require service support
  765.     scrollBehavior: () => ({ y: 0 }),
  766.     routes: constantRoutes,
  767.   });
  768.  
  769. const router = createRouter();
  770.  
  771. // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
  772. export function resetRouter() {
  773.   const newRouter = createRouter();
  774.   router.matcher = newRouter.matcher; // reset router
  775. }
  776. export default router;
  777.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/69858
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号