# vue_shop **Repository Path**: breencl/vue_shop ## Basic Information - **Project Name**: vue_shop - **Description**: 使用Vue框架搭建的商品管理系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-21 - **Last Updated**: 2023-07-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, HTML, Less, JavaScript, CSS ## README # vue_shop 商品管理系统 ## Project setup ~~~bash $ npm install ~~~ ### Compiles and hot-reloads for development ```bash $ npm run serve ``` ### Compiles and minifies for production ```bash $ yarn build ``` ### Lints and fixes files ```bash $ yarn lint ``` ## 登录 - 登录时请求后端接口，接口文档见后端项目及接口文档； - 点击登录按钮或者直接回车进行登录 - 回车登录时，因为使用了第三方组件库，所以在给表单绑定事件时，需要注意加上`.native`，完整形式为：`@keyup.enter.native="login"`； - 登录设置了token，暂存在`localStorage`中，在`main.js`文件中使用`axios`请求接口发送`ajax`请求； - 请求方式为`post`，请求时需要携带一个对象； - 其它祥见代码注释； ## 主页 - 主页使用ElementUI中的基本布局，分为左侧侧边栏，头部标题和中间内容主体部分； - 首页通过axios请求拦截器添加token，保证拥有获取数据的权限，使用`axios.interceptors.request`请求拦截器； - 登录成功后进入首页，首先重定向到欢迎界面，welcome.vue，该页面为home路由下的子路由； - 二级菜单跳转：通过组件中的router属性，绑定到`el-menu`上，此时会根据二级菜单的`index`属性值进行跳转； - 解决左侧菜单高亮显示的问题，点击链接时，先将地址保存到sessionStorage中，再将地址动态赋值给组件属性`default-active`，以解决高亮显示的问题； #### （1）用户管理 - 当页面创建通过钩子函数调用到函数或取后端返回的数据，以渲染页面； - 状态值的渲染，因为是表格，所以可以通过组件的`scope`属性拿到当前行的所有数据，之后再确定到是哪一个属性和属性值来渲染状态，使用作用域插槽绑定该值； - 搜索功能实现，通过所传的参数，将输入框内容使用`v-model`与用户列表参数对象中的查询参数进行双向数据绑定，之后点击查询按钮会将输入框中的内容作为参数中的一部分传递给后端，之后接收到返回结果； - 添加用户 - 需要校验表单输入的信息是否合法，自定义校验规则，通过定义校验规则，箭头函数，其中包含三个参数，第一个是校验规则（可以是正则表达式），第二个是校验的值，第三个是回调函数，直接调用回调函数表示校验通过，使用时则需要配合`validator`使用； - 关闭对话框需要通过ref找到表单的引用，通过引用调用`resetFileds()`方法重置表单； - 添加用户时请求后端`users`接口，将用户信息作为参数传递过去，因为之前用户信息存到了addForm对象中，所以可以直接将对象传给后端，返回201则表示添加成功，关闭添加表单并刷新表格； - 修改用户信息 - 通过id修改用户信息，找到用户的id需要通过按钮父级的作用域插槽，接收到scope数据对象，通过scope.row找到这一行数据，在去取id这个值，将id作为参数传递到修改用户信息的函数中进行操作； - 得到返回结果后保存到data中定义的空对象editForm上面，用于渲染对话框的表单，对话框表单通过:model绑定到editForm对象上； - 关闭修改用户表单后重置表单，通过给子组件添加ref后，父组件通过$refs.子组件ref的名称找到子组件，为其执行resetFields()方法重置表单 - `ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例； - 表单预验证，先通过ref找到表单对象，之后调用表单的validate函数进行验证，返回布尔值结果为true后，向后端users接口发送put请求，将id作为url加到后面，携带修改后的邮箱地址和手机号对象，返回结果为200表示修改成功； - 修改用户角色信息，使用`el-select`组件，通过v-model绑定到具体的值上，里面的值通过for循环生成，`:label`是看到的文本，`:value`是选中的值，点击右侧黄色按钮时分配用户权限，admin权限不可修改，其余点击对话框后可以修改权限，点击确定发送数据给后端，当前用户id和目标权限id，之后重置下拉选项菜单，刷新表单； - 删除用户信息 - 引用messagebox组件，挂在到vue的原型对象上，通过`this.$confirm()`触发确认弹框，当点击删除按钮时进行弹框确认，如果点击的是确认按钮，则返回的值为字符串confirm，如果点击取消按钮、左上角关闭或者弹框外的区域则返回值为字符串cancel； - 通过`.catch`捕获用户的取消行为，抛出异常； - 通过`async`和`await`简化`this.$confirm`点击确认或取消的异步操作，接收到用户操作结果进行判断点击的是确认还是取消操作； #### （2）权限管理 - 业务分析：通过权限管理控制不同的用户可以进行那些操作，为每个用户分配一个特定的角色，角色包括不同的功能权限； - 权限列表 - 通过重写的$http方法，访问rights接口，请求回list格式的数据，`this.$http.get('rights/list')`； - 优化等级数据的渲染，0表示一级，1表示二级，2表示三级，在表格组件内部使用作用域插槽自定义输出形式，通过slot-scope也就是v-slot插槽，找到`scope.row.level`，配合`v-if`指令进行按等级渲染出不同级别的tag； - 角色列表 - 修改角色权限信息同理用户管理中用于信息修改； - 通过`v-if`配合`v-slot`，使得`id>40`的角色信息才能被修改角色信息和删除信息，否则修改按钮为`disabled`，不能修改角色信息和删除，但是可以分配相关角色权限； - 通过作用域插槽，拿到`scope.row`当前角色的数据，通过`.children`拿到所有的一级权限，利用第一次for循环循环为一级的tag标签，一级权限独占一行，第一次for循环中嵌套二级权限，通过``渲染，使用`:span="6"`占用6列用来渲染二级权限的tag，同理再渲染三级权限，占剩下的18列； - 修改角色，删除角色，通过`v-if`判断出id>40的角色，提供编辑和删除的功能，否则只能进行查看权限，不能进行操作，编辑和删除权限功能和实现方法同用户管理一致； - 删除角色指定权限，调用到`roles/:roleId/rights/:rightId`接口，使用模板字符串拼接两个动态路由参数，删除成功后避免刷新整个列表导致列表关闭，通过返回值重新赋值给三级菜单数据，局部刷新提高体验 - 角色权限 - 通过Tree树形控件的使用，将角色的权限通过渲染出来，通过`:data`绑定数据源，也就是从后端接口请求到保存在本地`rightslit`中的数据，通过`:props`指定了树形控件的树形绑定对象，label表示看到的值，children表示父子节点通过什么属性进行嵌套； - 权限分配，点击分配权限按钮时将角色的id保存到data中便于后面使用，在点击确定按钮时获取到半选和全选状态的id值合并成一个完整的数组，之后将数组使用英文`,`进行字符串拼接，然后发起请求，将之前保存的角色id和字符串作为参数发送到服务端，根据返回值判断是否分配成功； #### （3）分类管理 -