vue项目一：电商后台管理项目PC端(上)

技术选型

开始正式通过vue ui脚手架创建项目，通过后台api接口，
返回的数据渲染页面

项目基本业务概述

我们今天主要做后台管理项目

电商后台管理系统的功能划分

该后台项目的6大版块
用户登录 /login页面
用户管理：用户列表
权限管理：角色列表+权限列表
商品管理：商品列表+分类管理+参数管理
订单管理：订单列表
数据统计：数据报表

项目的开发模式以及技术选型

采用的使用前后端分离开发的模式
主要使用到的技术有
Vue + VueRouter + Element-UI + Axios + Echarts

前端项目初始化

用vue ui脚手架创建项目
看图创建

创建码云账号并配置SSH公钥

因为国内码云比较快，且是中文的，所以我们使用的是码云
1：但是码云注册登录后，需要配置公钥才能，创建新的数据库，并连接到远程仓库
2：根据公钥管理：里面是官方的教程，配合截图分析一起。完成公钥添加

将本地项目托管到码云中

新建远程仓库，将本地的项项目托管到远程仓库中，完成本地仓库提交远程仓库。
1：先建仓库。在成cmd全局配置自己的name和email
2：在项目中打开pwoershell窗口，连接远程仓库没可能需要输入登录密码，通过push完成本地仓库，推送远程仓库，刷新页面即可看到仓库刷新成功。

安装MySQL

导入本地的数据库到phpstudy中启动mysql、数据库服务。
1：因为已经准备好了数据文件，直接导入到phpstudy中即可
2：查看是否导入成功，在数据库目录中，有刚才命名的导入的数据库，存在即表示导入成功。

配置API接口服务器并使用PostMan调试接口

测试数据和接口能否正常返回数据
因为在启动后台准备好的vue_api_server,启动是，无法启动成功，看图已经被我解决了。
本地数据库导入phpstudy托管运行并启动mysql数据服务了，启动自己的web服务器即可，node app./js，即可托管postman测试登录接口，如果登录成功，则表示mysql数据库和服务器连接正常

分析登录过程以及token的原理

以后的后台请求，都需要携带token

分析登录页面的布局结构并创建login子分支

本地仓库干净后，创建并切换到开发分支login上，进行项目开发

梳理项目结构

因为脚手架创建的是欢迎页面，我们我把换头页面和不需要的组件都清理干净，干净的工作区域，开始新的开发。具体清理可查看图片

渲染Login组件并实现路由重定向

创建+挂载+并占位渲染login组件到App根组件中
1：创建登录组件
2：在router中挂载组件，在newRouter中配置路由请求地址，和使用的路由组件，并向外导出
3：配置好组件，在App.vue中<router-view>用占位符,App根组件才渲染了路由组件
4：页面效果，App根组件页面，渲染了login组件

设置背景色并在屏幕中央绘制登录盒子

安装less-loader，定义全局样式，和自己的页面基础布局。
1-2-3：注意：因为 login组件的style lang=less, 但是有没有全局下载和配置使用less语法打包，所以打包编译的时候就报错了。需要在可视化插件中下载开发依赖插件。就能解决报错。
4-5：因为App组件页面是没有高度的，是元素把页面高度撑开的，但是我们开发的是单页面程序，需要占满，公共的css样式代码，我们必须写到src/assets/global.css中，在main.js入口文件中导入，全局生效，后续的后台页面都有了高度。
6: 开始写自己login页面的样式，高度100% ，和当前页面一样高，就撑满了页面。
盒子的居中方式是相对于页面left 50%，然后用transform:translate(-50%, -50%),走自身的一半，实现盒子居中
7：页面盒子在页面居中

绘制默认头像

头像用的是基础的css3样式设置，在自己的style中写

绘制登录表单区域

导入form组件，完成form组件的布局
1-2-3：登录中用到了element-ui中的form组件，拷贝组件到自己的template中，但是一定要在element.js中解构并全局挂载该组件，才能使用
4:对自己的表单进行修改，我们使用的是c3盒模型，按钮用的是flex布局， justify-content:flex-end,默认靠右底对齐。
5：页面效果

绘制带icon的input输入框

在自己的项目中如何使用第三方图标
因为有时候element-ui的图标不够用，只能下载第三方图标
第三方图标的使用方式也是非常简单的
1:-2-3-4：参考element-ui使用图标的方式，把我们下载好的图标，在main.js中引入， 这样就是全局引入了， 在哪个页面都能使用自己的图标了。导入文件后，在自己的页面使用图标，前面inconfot是固定的写法，后面的是具体的图标名称。
5：页面效果，每个输入框前面就多了这个图标

实现表单的数据绑定

参考模仿实现表单数据的绑定
1：参考了element-ui中表单的数据绑定方式后，在自己项目中模仿起来
2：:model接收表单对象，而表单对象通过v-model双向数据绑定，把输入框的值接收到， 这样就实现了接收表单对象中的内容了， :model接收表单对象， v-model双向数据绑定输入框中的内容
3：页面效果， 因为v-model接收的是data中的属性，里面的值，会自动填充到输入框中

实现表单数据验证

参考模仿实现了表单验证规则
1： 参考了element-ui中通过:rules=rules绑定了验证规则，里面输入框需要绑定自己父级item上，不是绑给输入框
2：:rules="表单验证对象"， prpo="验证规则"，一个验证规则中可以有多个属性验证对象
3：元素中使用了验证规则，data中定义了验证规则。开始提交测试验证是否通过
4：能触发验证规则，表示验证生效 

实现表单的重置功能

使用resetFields方法，重置还原表单中的数据
如果内容输错，或者验证不通过，点击重置，一键还原输入框中的内容
1-2-3-4：因为之前能看到ref能绑定form绑定对象$refs:loginFormRef, 所以我们就能通过点击事件，触发自己的事件处理函数，在里面调用this.$refs.loginFormRef这个对象，相当于就是表单对象，自然就能调用.resetFields( )将表单中的内容重置还原
5：测试，点击能重置还原表单中的内容

实现登录前表单数据的预验证

点击登录按钮，触发验证对象，对表单的内容进行验证
1-2: 触发点击登录事件，函数中同上调用this.$refs.loginFormRef实现表单验证功能，vaild返回的是布尔值，表示验证是否通过
3：测试，能触发验证规则，将登录状态以布尔值的方式打印到控制台中

配置axios发起登录请求

验证通过后，调用axios发请求，拿到服务器返回的数据，并打印登录信息
1: 全局挂载axios，根据接口设置根路径，并将axios挂载为vue原型上的$http方法，这样就能使用$http发起数据请求了。
2：如果验证通过，调用$http发请求登录接口的数据，将表单中的内容给携带，判断数据的返回值是不是200.在控制台打印登录信息， 返回值result是一个promise，通过await能返回一个result对象，能将data:res重对象中解构并重命名为res，res就是data这个对象，

配置Message全局弹框组件

因为打印的登录信息用户是看不到的，使用需要用到message弹框，提示用户
1-2-3：在自己的函数中this.$message.error弹出失败的信息，success弹出成功的信息。因为element.js中已经将Message挂载到app原型上了，所以在任何地方通过this.$message将信息通过弹框的方式提示出来
4：测试能弹出登录的状态信息。

完善登录之后的操作

登录成功后，需要个用户颁发一个token令牌，才能以令牌方式进入后台页面，重定向home页面，生成token信息
1：在数据中我们我们能看到返回的token属性，
2：在点击登录成功后，重定向到了home后台主页，并在sessionStorage中保存会话信息，注意：token用于跨域，不跨域长期存储个人信息，推荐localStorage本地会话，临时的则存放在sessionStorage中
3：完成登录重定向到home页面，创建一个home组件，并在router.js中国导入，并配置路由地址和组件。实现点击跳转到home页面，同时也生成了token令牌

路由导航守卫控制页面访问权限

普通没有token令牌是不允许通过url地址访问后台的，导航守卫防止他人访问后台，重定向到login登录页面。
1-2：在roter.js中不能直接export default导出所有路由了，需要给路由定义beforeEach导航守卫，判断其他人要访问是login页允许放行，但是要获取到token令牌，如果用户没有令牌，表示不能访问后台，就返回到login页面。反之就是有令牌，则允许放行。
3：测试token清空后，输入/home是会被cdx到/login页面。因为没有token。

实现退出功能

登录到home页面后，点击退出按钮，实现清空token重定向到login页面
1-2-3：点击退出，事件函数中window.sessionStorage.clear()将临时会话中的tokenb清空，并路由重定向到/login页面， 通过this.$router.push('/login')重定向回登录页面
4：测试，点击能退出，并清空了sessionStorage中的token信息，重定向回到login页面

处理项目中的ESLint语法报错问题

因为之前写代码中，eslint保存后对代码验证，报警了，解决语法验证的警告！
1-2问题是vscode自带的格式化工具自动补上了;分号，和自动把""把' '给替换了，
3:问题是eslint过于严格，希望每个函数之间 ( ),需要加上空格。
根据图片：在.prettierrc中配置自动格式化，的参数配置，eslintrc.js中不允许空格即可解决问题

修改element-ui组件的按需导入形式

之前都是换行解构取组件的，现在可以并为一行
将所有的组件，一行解构出来。简化了代码量

将本地代码提交代码到码云中

完成了登录功能的开发，验证合格后，开始本地提交仓库，再合并分支推送到远程仓库中，并切换分支，把分支也推送上去。

实现基本的主页布局

去element-ui官网拷贝布局容器修改为自己的页面布局
因为已经登录到后台首页了，用element-ui的布局容器，快速实现页面的布局
1：分析页面布局
2：去element-ui官网拷贝布局容器到自己页面
3：拷贝到自己的页面
4：将container, Header,Aside,Main导入组件，注意都是大写开头，并且省略el,全部全部挂载app.use()
5:刚初始化的布局容器是没有宽高的， 需要设置宽高，和背景色才能看得出来基础布局。完成了页面的容器布局

美化主页的header区域

实现头部header的布局
1：头部用flex布局，justify-content:space-between各自平分，align-items：center内容上下居中，用css3实现页面的布局
2：页面效果

实现导航菜单的基本结构

去element-ui挂网拷贝导航栏，实现左侧菜单导航的布局：
1：去element-ui官网拷贝导航菜单
2：拷贝到自己页面中，只留下一个导航栏，
3：将到导航组件从element-ui中解构出来， menu导航栏，sunmenu导航栏内层父容器，menu-item二级菜单导航，注意都是大写开头，且省去了el
4：页面效果

通过axios拦截器添加token验证

因为多了welcome后台页面后，其他页面都需要token，我们在发请求前把登录成功后的token，设置在headers.Authoriaztion中，这样后台发生路由切换都会生成token，这样每个路由请求，都会携带token认证成功完成页面切换。
1：因为后续的api需要授权，需要在Authorization中提供token令牌
2：流程示意图
3：在main.js中设置token信息，axios.interceptors.request.use设置请求头， 通过打印能看到headers中是没有Authoriation这个属性， 我们就给config.headers.Authorization,获取到window.sessionStorage.getItem('token')，把token获取到设置给headersAuthoriztion属性中， 然后return出去，这样每次发请求都会触发，并在Headers中设置Authoriaztion字段，虽然目前是null，因为后续还有使用它点击其他菜单栏所以默认是空的， 目前只是登录到了后台，产生了Authoriaztion这个属性而已，后续的tab切换就会产生token。经过点击证实了我的说法是正确的
4：成功在登录后，在请求头部中设置了Authoriaztion字段，默认是空，只有点击切换了tab页面，就会生成token，就不在是null了

获取左侧菜单数据

在create钩子函数中，触发函数，把拿到的数据，弹出到data中，并打印查看
1：查看接口要求
2：create在vue实例，创建成功，就会被立即调用，一般是用于获取数据。
3：data中的menulist:[]是一个空数组，在created钩子函数被调用的时候，会立即出发函数，拿到左侧导航的数据。 
3.1：在async异步函数中发起请求，获取到menus的数据，将获取到的数据结解构成data,并重命名为res。如果获取数据失败，弹出错误提示信息，获取成功，就把数据赋值给data中的menulist，实现数据填充。注意此时只是获取，并打印数据而已。

通过双层for循环渲染左侧菜单

把拿到的导航数据，根据打印的数据，渲染自己的导航栏菜单
1：data中的数据，放在submenu导航容器中遍历，必须:key=item.id提高性能，而:index也是item.id， 完成1级菜单的数据渲染
2：开始遍历.itme.children，同上属性绑定item.children.id。实现二级菜单的数据渲染。注意前面的图标还没有更改。

为选中项设置字体颜色并添加分类图标

设置导航菜单栏中的图标，2级图标是element-ui中自带的， 1级就麻烦些，是根据id渲染的
1：在data中设置iconObj对象中设置：id是根据数据中的id，而后面的incon图标类名，则是自己下载图标的类名。通过class="inconsObj[item.id]"根据id顺序，把对象中对应的属性渲染到菜单栏中。
2：二级图标简单，不讲解
3：页面效果，完成了1-2级的数据渲染

每次只能打开一个菜单项并解决边框问题

解决所有导航栏都能展开，完成只能同时展开1个菜单栏
1：unique-opened保持一个菜单的展开，全写形式是:  :uniique-opened="true",我们使用了简写
2：还有一个问题二级带单的右边框，根据调试面板，找到对应的元素，将边框取消掉即可。完成了菜单展开和2级菜单的右边框问题
3：页面效果

实现侧边栏的折叠与展开效果

实现侧边菜单栏的展开与折叠效果
1：在上面添加1个元素，设置元素的基本外形，完成折叠按钮的样式设置，注意不能给宽度，并通过letter-spacing设置|||竖线的间隔宽度。
2：:collapse-transition="false"关闭折叠动画， :collapse="isCollapse"里面的属性是data中的是否折叠的默认值，因为点击折叠事件中能把该值取反，进行折叠切换。
3：折叠前的效果。
4：折叠后的效果【默认不开启折叠的，需要true开启折叠效果】
4.1:   :width="isCollapse ? '64' : '240'",如果为true是折叠，宽度就是64，反之就是展开，宽度就是240. 很妙！

实现首页路由的重定向效果

登录后台默认展示welcome页面，
1：创建welcome页面，只写template也是可以的
2：在router.js中导入组件，并设置为/home的子组件， 并设置重定向到/welcome这个组件。实现了路由重定向
3：注意因为他想在home页面展示，虽然创建好了组件，并配置好了路由，需要在home中用<router-view>展示路由占位符。在该home页面挂载展示该组件
4：页面效果，登录成功后，自动跳转到/welcome页面

实现侧边栏路由链接的改造

左侧的导航菜单点击是能跳转到不同的页面的，完成点击跳转不同路由页面
1：首先在组件中开启router路由功能，就能点击跳转了
2：:index="'/ + subItem.path'"，完成路由地址的拼接， 注意:index就是动态的地址，数据中的path前面少了/,所以需要添加上，就能实现路由跳转了
3；页面效果，点击左侧菜单，就能跳转到对应的路由页面

通过路由的形式展示用户列表组件

点击用户列表展示，用户列表组件。完成列表组件的创建和渲染
1：创建组件
2：在main.js中配置为/home的一个子组件，配置好路由地址和组件，路由地址不能乱写，需要和点击跳转的路由地址一致
3：页面效果--点击跳转到--用户列表页面

在sessionStorage中保存左侧菜单的激活状态

点击让当前的二级菜单高亮，刷新页面高亮依旧存在，因为将状态保存到了sessionStorage中了
1：点击触发自己的事件函数，把点击的请求地址携带过去'/' + subItem.path, 
2：事件函数中拿到请求地址，在token中设置一个activePath属性，值就是传进来的请求地址，
3：data数据中的activePath默认是空，只有在钩子函数中通过window.sessionStorage.getItem('activePath')把这个请求路由给获取到，在赋值给this.activePath，实现了数据的填充。然而:default-active='activePath',当前激活高亮的就是这个属性
4：页面效果，点击二级菜单高亮，刷新页面高亮仍然存在，因为转态已经存储在了sessionStorage中
5：实现过程；点击事件中把数据中的path请求地址给事件函数，函数中调用window把数据存储在sessionStorage中，而created钩子函数，拿到activePath把属性赋值给数据中的activePath，此时:default-active="activePath"绑定了这个属性，实现了点击刷新仍然高亮。

绘制用户列表组件的基础布局结构

添加面包屑组件+卡片组件+输入框组件+按钮，完成一1-2行的样式布局
1：拷贝组件
2：修改组件的全局样式
3：导入这5个组件
4-5：上面是面包屑组件，下面是卡片组件，卡片中的slot数可以删除的，经过测试的。：gutter每个元素之间的空白缝隙， ：sapn元素占多宽。完成页面的布局
6：页面效果：完成了面包屑和卡片中的第一行样式布局

获取用户列表数据

发起请求拿到用户列表数据，把用户列表数据打印查看
1：接口文档，查看必须携带的参数
2：参数单独定义在data中的queryInfo中，里面包含了：查询参数+当前页码+每页显示几条数据
2.1：在created钩子函数中调用getUserLsit拿到数据，
2.2：封装异步函数，发请求拿数据，把queryInfo写在params参数中，传递给后台。将错误信息弹出，成功就把获取到的users用户列表的数据赋值给data中的userList属性，实现数据的填充。和total数据条数。
3：把数据打印查看，成功获取到用户列表的数据了。

使用el-table组件渲染基本的用户列表

完成table表格的页面布局和数据填充
1：设置全局样式
2：拷贝表格组件，:data="userlist"把数据拿到， border添加边框, stripe添加隔行变色，
2.1：注意label就是表头文字信息， prpo就是表格中每项的数据信息，有点神奇
3：导入table+tableColum组件
4：页面效果：完成了表格布局，和数据渲染

为表格添加索引列

完成表格头一行的index编号设置，其实就是添加一行el-table-column, type=index，就实现了编号设置。

自定义状态列的显示效果

将状态值用switch开关代替，开关灯是可以通过点击修改的，
1：拷贝开关
2：在table-column中插入tempalte插槽， slot-scope=scope就能拿到这行的数据，在页面{{scope.row}}就是这行的数据，switch双向数据绑定scope.row.mg_state根数据的转态绑定，就能根据状态渲染开关，也能点击开关，完成数据修改。刷新页面状态依旧保存。
3：导入switch开关组件
4:-5：页面效果，完成点击开关，完成数据状态修改

通过作用域插槽渲染操作列

渲染最有一中的3个按钮，给最后一个按钮添加鼠标经过提示
1：拷贝样式
2：导图提示组件
3：设置width=180设置表格的宽度，最后一个button按钮，需要被toopTip元素包裹，才能鼠标经过显示提示信息，:enterable=false鼠标经过就当没经过。完成了3个按钮的渲染
4：页面效果

实现分页效果

实现分页组件的渲染，和点击实现分页的各个功能
1：拷贝分页组件
2：导入组件
3：设置分页的全局样式
4: 元素中设置分页的具体信息：
@size-change=下拉框每页显示几条数据
@current-change=点击页码值，实现分页功能
:current-page=当前点击的是第几页
:page-size=[1,2,5,10] 下拉框中的每页显示数据条数
:page-size="queryInfo.pagesize"每页显示的条数
layout=布局，看图，里面对应每个组件
:total总条数
5：当前默认是第一页，且每页显示2条数据。
5.1：handleSizeChange下拉框选择时间：把下拉框中的newSize数据条数，按数据条数渲染数据
5.2：handleCurrentChange，当前点击的页码，注意每次做分页修改时，修改后，度需要调用getUserList重新刷新数据。实现分页数据的变化

修改用户状态

用开关调用后台服务器实现数据状态修改
1：switch中有一个change事件，能拿到开关的状态
2：@change事件中能触发的事件函数中，把这行数据携带，打印查看mg_state的状态是能看到，调用接口发起数据修改，把数据中的userinfo.mg_state给服务器，实现点击开关完成修改功能，并弹出提示框，提示完成修改功能。
3-4：注意接口中需要使用模板语法把数据拼接携带过后台 `user/${userinfo.id}/state/${userinfo.mg_state}`。 这样就把该行数据的ID和状态个携带到后台了
5：点击开关，完成按钮的状态修改。

实现搜索功能

在输入框中搜索关键字用户名，就能把该用户的数据渲染出来，点击x就能把数据还原回来
1：v-model=queryInfo.query绑定查询参数， clearable出现关闭按钮， @clear=getUserList,点击数据库中的清空按钮会重新调用getUserInfo函数，重新拿到数渲染页面
2：点击搜索按钮，因为双向数据绑定了v-model，在函数中是默认把queryInfo给当做params参数传递的，所以点击搜索也能根据输入框中的内容，渲染页面该用户的数据。

渲染添加用户的对话框

用户列表完成，开始完成用户列表的具体各个功能，点击添加用户弹出diglog对话框
1：拷贝到自己项目中，并导入
2：点击取消和确定都让 @click="addDialogVisible=false", 关闭对话框。因为data中的addDialogVisible：false, 默认值是假，是不会弹出对话框的，只有在点击添加用户的时候，@click=:addDialogVisible=true:,弹出对话框
3-4-5：页面效果-点击弹出对话框， 点击其他地方就会关闭对话框。

渲染添加用户的表单

给弹出框，添加表单控件，和表单验证规则，对表单中的内容实施验证
1：拷贝表单验证到自己项目中
2：给表单form添加， :model="addForm" 监听data中的addForm对象， 里面是多个属性值，每个属性值都是表单控件v-modle="addForm.username"，双向数据绑定了该属性， 输入框中的内容就会到达addForm中。 :rules="addForRules"绑定表单验证规则，每个验证规则都是一个数组，每个都是required:true, message:'请输入', trigger:blur, 第二组验证规则就是min， max, message, trigger。 有2岑哪个验证规则。
3-4：如上所述， addForm中的属性已经是双向数据绑定了，data中有验证规则， 每个验证规则都是一个数组， 每个数组中都是一个对象。对象有2层验证规则
5：页面效果， 添加了表单验证规则， 每个验证规则都能正确被触发。

自定义邮箱和手机号的校验规则

邮箱和手机号码需要自定义验证规则，完成他们的验证
1：查看element-ui中的自定义验证规则
2：因为表单控件已经v-model绑好了数据， 我们只管定义验证规则即可，每个验证规则都是用变量接收一个es6函数， 参数1， 验证规则， 参数2：输入框中的值， 参数3：回调函数。 回调函数中定义了一个正则表达式， 用来验证表单中内容， 通过判断if(regEmail.test(value)）对输入框中内容实施验证， 将验证结果通过cb返回出去， 如果验证不通过，则把错误提示也返回出去
3.1： 调用刚才自定义好的验证规则：validator:checkEmail, validator能触发刚才的验证规则， 第一个验证规则不动， 只修改验证规则2.
4：页面效果·能正确触发邮箱和手机号码的验证

实现添加表单的重置操作

关闭添加用户对护框的时候，再次打开将输入框中的内容给清空掉
1：点击事件中通过this.$refs,addFormRef.ressetFields将输入框中的内容给清空掉
1.1：因为表单中ref="addFormref"绑定了引用对象， 该方式相当于拿到了表单对象，调用他得resetFields将内容给清空了
2-3：关闭对话框，再次打开对话框， 输入框中的内容就已经被清空了。完成清空功能

实现添加用户前的表单预校验

完成验证和表单清空功能，开始完成完成点击确定时，触发表单的预验证功能
1：触发点击事件，事件中this.$refs.adFormRef.validate调用它就能实现表单的预验证，valid就是验证的结果。如果通过就会返回true。
2：通过验证，点击确定就会打印true

调用API接口完成添加用户的操作

完成表单预验证，开始调用接口完成真正的添加用户功能， 和渲染用户
1：接口文档
2：因为addForm就是表单中的内容，所以接口中所需要携带的数据， 都可以被它替代掉，调用接口携带数据， 如果返回的状态=201弹出失败的信息，反之就是成功的信息， 在关闭对话框，调用getUserList重新获取数据，再次渲染页面
3：完成了预验证，点击添加新用户的功能， 在重新渲染了页面。

展示修改用户的对话框

点击修改，添加对话框，弹出对话框
1：拷贝组件
2：点击确定和取消都关闭对话框， 只有点击修改的时候吗，是打开对话框的，因为editDialogVisible:false, 点击了修改才是true。:visible.sync其功能和@cllick都差不多，只是名称不一样而已
3：点击修改，弹出了基础外形的对话框

根据Id查询对应的用户信息

调用接口拿到修改用户的信息，将拿到的用户信息，储存在editForm中， 
1：调用接口把参数id个携带， 完成拿到用户数据， 如果拿取失败，就弹出对话框提示用户失败， 正确就把数据赋值给editForm， 实现了用户数据的获取，只是获取数据而已，还未添加控件，把数据渲染到控件中

渲染修改用户的表单

完成了修改用户数据的获取， 添加表单控件，添加自定义的邮箱和手机号验证
1：添加表单验证控件
2：绑定表单对象:model=editForm, :rules=editFormRules绑定验证对象，ref=editFromRef绑定表单引用对象， 表单控件中v-model="editForm.username"绑定表单中的内容
2.1：data中创建editForm表单对象， 在data中定义2个自定义验证对象， 注意对象2中的validator:checkEnmail使用的是全局data中的自定义验证规则，实施验证的，每个表单中的v-model都是和数据响应中的返回值的属性名必须一致的
3：点击修改，弹出修改框，对输入框中的内容实施了验证。

实现修改用户表单的重置操作

关闭对话框，再次打开对话框，将对话框中的内容给重置回来
1：关闭事件中，this.$refs.editFormRef.resetFields调用了引用对象，实现了数据重置功能
2-3：关闭对话框以后， 再次打开， 输入框中的内容就被重置了

完成提交修改之前的表单预验证

完成了重置功能，开始完成表单点击确定对内容实施预验证功能
1： @close关闭事件中， 触发了事件函数，this.$refs.editFormRef.vaildate调用了预验证功能, 把valid打印到控制台中， 它对表单的验证结果会打印一个布尔值
2：单击完成修改，验证通过， 点击确定，在控制台中打印了布尔值

提交表单完成用户信息的修改

完成了表单预验证功能， 开始调用接口完成修改用户功能
1： 预验证通过后， 发起axiso请求，用额的是put修改方式，参数1携带id， 参数2是一个对象， {email+moblie}把邮箱和手机号码发送给后台， 完成修改用户功能，如果修改不成功， 就弹出错误信息， 如果修改成功，就关闭对话框，调用getuserList刷新页面数据， 并弹出提示，修改用户信息成功。

弹框询问用户是否确认删除数据

点击删除，弹出删除的对话框，将删除的确定和取消打印、到控制台中
1：拷贝组件
2：组件的使用方法
3：将组件先解构出来， 再调用MessageBox.confirm方法，把这个方法赋值给Vue.prototype.$confirm,把它挂载为vue原型上的一个方法，这样js中就能用this.
$confirm这个表单对象了。 
4：点击删除，弹出删除对话框， 事件函数中携带了id，通过this.$confirm弹出对话框，confirm就是提示信息， 对象2就是2个按钮， confirmButtonText:确定按钮, cancelButtonText取消按钮， type:warning就是图标。 完成弹出框的文字布局后，如果这个表单的返回值不是是confirm取消，表示不要删除，弹出已取消删除， 反之就是要真正的删除，将删除信息打印到控制台中
5-6-7：点击删除，取消就弹出提示，如果是确定，就只是打印文字信息，还未后续操作。。。

调用API完成删除用户的操作

完成了删除框的布局， 调用接口完成真正的删除功能，重新渲染页面
1：接口文档，需要携带id
2：点击弹出删除对话框，确定删除，就调用接口，把id携带，如果删除失败，则弹出删除失败的提示信息， 如果删除成功，就弹出提示茶树成功， 调用getUserList重新渲染页面

创建user子分支并把代码推送到码云仓库中

因为代码全部误写到了master主分支上，别怕创建并切换分支，代码会自动过去，
1：创建切换分支，代码就全部过到分支上了
2：完成本地仓库中的代码更新
3：创建远程分支
4：合并分支
5：完成master远程分支的更新

创建rights子分支并推送到码云

创建并切换到开发分支上，并把分支推送到远程分支上，完成远程分支的创建。

通过路由展示权限列表组件

完了了用户列表页面的功能， 开始完成权限管理的权限列表页面组件的创建，点击跳转到权限列表页面
1：创建组件
2：在router.js中配置路由，导入权限列表组件，将它配置为home页面的一个子路由
3：页面效果--点击跳转到权限列表页面

绘制面包屑导航和卡片视图

完成点击跳转到权限列表页面后，完成面包屑和卡片组件的基础外形渲染
1：因为这2个组件之前就已经结构过了， 所以直接拷贝过来，修改就可了。
2：页面效果，完成了页面效果的面包屑和卡片组件的布局渲染

调用API获取权限列表的数据

完成面包屑和卡片的渲染，调用接口打印权限列表的数据
1：接口文档，请求地址后面必须携带数据类型，rights/:type  ===> get('rights/list'), 
2：在data中创建空数组用来接收数据， create钩子函数中调用函数，获取数据。 methods中封装函数，异步函数中，发起数据请求，把请求类型规定好， 如果获取权限列表数据失败，就弹出失败信息， 成功就把数据赋值给data中的这个数组， 通过打印，数据已经获取成功

渲染权限列表UI结构

完成权限列表的数据获取打印， 创建表格，把数据渲染到表格中
1：拷贝组件
2：导入组件
3：table组件:data="rightsList"绑定空数组数据，添加边框和隔行变色，添加序号type=index,
3.1: label是表头名称， prop="数据响应中的属性"，就会渲染到表格中的每个具体信息，
3.2: 权限等级中是通过标签展示等级的，所以在column中嵌套了插槽template slot-scope=scope接收了这行表单的数据，通过if判断level的值，按值渲染元素的等级，完成等级按钮的渲染
4：prop中的信息必须和接口中的一致
5：页面效果--完成了表格数据的渲染，和等级按需渲染

介绍 用户-角色-权限 三者之间的关系

完成了权限列表页面的布局和渲染，开始分析角色：
每个角色拥有的权限是不一样的，所以角色是根据用户的不同，权限也不同

通过路由展示角色列表组件

16：完成了权限类表的功能，切换到角色列表页面的开发，点击切换到角色列表组件
1：创建组件
2：导入组件，将组件注册为/home路由下的一个子组件
3：点击角色列表，切换到角色列表页面

绘制基本布局结构并获取列表数据

17：完成页面组件创建，分析角色列表布局，和添加面包屑和卡片组件
1：分析接口文档，最后一层数据，是不包含children，那就是第3层角色的数据。
2：在data中创建空数组，在create中调用函数，函数封装中发起请求，啥都不携带，如果数据请求失败，就弹出提示， 正确就把获取到的数据赋值给这个空数组。打印数据查看已经获取到了
3-4：请求到的角色列表的数据， 并且完成了面包屑和卡片视图的渲染

渲染角色列表数据

18：完成了面包屑和卡片视图的渲染，以及拿到了角色列表的数据，添加表格并渲染数据
1：添加带图标的组件
2：添加table表格组件，每一行都是一个table-column,expand就是展开行， index就是序号，label就是表头名称， prop就是绑定的数据，必须和返回的数据中的一致。width是指固定宽度，sloy-scope=scope，接收了表格的数据行，设置3个按钮的图标颜色大小。
3：页面效果，完成了卡片中表格的数据渲染

说明角色列表需要完成的功能模块

19：完成了表格数据创建和渲染，其中的3个功能和用户列表的功能一致，自己去独立完成，本节只做如下2个功能
1：功能1：渲染折叠菜单中的数据和样式
2 ：功能2：点击分配权限，完成权限对话框的渲染，和权限分配的功能

分析角色下权限渲染的实现思路

20：先做功能1，渲染折叠菜单中的数据渲染，先拿到row数据，打印数据做分析
1：在展开列中template添加插槽，将scope.row数据打印查看，
2：分析数据第一个id就是这行数据的角色名称， 第二行才是1级数据，依次递减。最后一个数据是没有children属性的，数据分析完毕
3：看图分析，折叠中的每行，对应的就是红框中的数据

通过第一层for循环渲染一级权限

21：完成分析了数据对应关系， 开始渲染第一层数据
1：row中遍历数据，把数据填充在tag中，实现了第一层数据的渲染，一行总共24个栅格系统，:sapn=5,第一行占5份宽
2：页面效果，渲染了第一层数据

美化一级权限的UI结构

22：完成了第一级数据的渲染，对样式进行美化，
1：添加了上下边框，:class=['bbbottom', i1 === 0 ? 'bdtop' : ' ' ],第一个底边框是直接加的，而第二个需要按需加载，如果是数组红中的第一个，就不需加载顶边框,i1相当于index=1, 注意:calss需要动态绑定，所有类名需要写在[ ]数组中，用逗号隔开，支持3元表达式按需添加
2: 给第一个菜单添加小图标，小三角
3：页面效果，添加了小图标，和加了上下边框。

通过第二层for循环渲染二级权限

23：完成了菜单1的样式设置，开始渲染2级菜单的数据
1：row外行，里面嵌套了一个row内行，他只能遍历item1.children, 再把遍历的数据展示在子的tag标签中， 它里面的边框也是按照三元表达式按需渲染的
2：完成了页面的数据渲染，并添加了小三角箭头
3：数据分析，共3层数据，也总共3个children属性

通过第三层for循环渲染三级权限

24：渲染了2级数据，开始渲染3级数据，
1：内层row中已经是item2.children第二次循环了，需要在 tag标签中开启第三层标签循环，把渲染的数据通填充到自己的标签中在页面展示
2：完成了3级数据的渲染

美化角色下权限的UI结构

25：完成了3级的数据渲染，现在解决页面最小宽度布局混乱问题，和元素垂直居中问题
1：在global.css的body中中添加了min-width:1366px，完美解决了页面过小布局乱的问题
2：使用flex布局，align-items:center, 将元素上下垂直居中显示。将这个元素，放在:class=[数组中],实现上下垂直居中
3：页面效果： 完成了上下垂直居中和页面布局过小乱的问题

点击删除权限按钮弹出确认提示框

26：完成了3级折叠数据的渲染，开始完成点击小菜单，将这个菜单从数据中删除
1：因为之前在element.js中在全局挂载了$confirm方法，所以能在js中直接使用this.$confirm弹出删除的对话框，如果用户取消了删除，弹出取消删除的提示框，如果是删除了，就在控制台中打印删除。 因为还未调用接口完成数据删除功能。注意@close能触发关闭事件，
2：页面效果，点击取消会提示，但是点击删除只会打印。

完成删除角色下指定权限的功能

完成了点击删除，能触发打印删除结果，调用接口正式完成数据删除
1：接口文档， :roleId相当于是哪行数据，  :rightId 是哪行数据的儿子，它也有自己的id， 结合在一起，参数1就是爸爸的id， 参数2就是要删除的儿子的ID。根据爸爸删除儿子
2：给每个图标添加关闭图标，并调用关闭事件函数， 把要删除的(父行， 子id)传给后台，在请求地址中替换` `模板语法，把参数2传递。完成删除功能。---注意不能直接调用this.getRolesList,这样删除一条数据后，会自动刷新页面并关闭折叠。需要将role.children接收删除返回的数据，这样就能实现删除一个数据，并且不关闭对话框。
3：完成删除一个菜单的功能，并且不会关闭折叠。实现局部删除该行的子元素。

弹出分配权限对话框并请求权限数据

28：完成了用户列表的渲染和折叠菜单的渲染和删除，开始完成点击弹出分配权限对话框和打印权限列表的数据
1：引入组件
2：接口文档，需要接受一个tree树形控件，
3：在页面已经添加了分配权限的对话框，点击分配权限弹出对话框，发请求，如果数据失败就提示失败的信息，将获取到的所有的权限数据，全部添加空数组中，待会添加树形控件，将获取到的数据展示在树形控件中，现在只是弹出对话框，通过接口拿到数据
4-5：点击弹出了对话框， 和在控制台中打印了数据

初步配置并使用el-tree树形控件

29：完成了点击弹出对话框和获取到权限列表数据之后，添加树形组件，把数据渲染到组件上
1：添加组件+引入组件
2：组件添加到页面中, :data=rightslist这个空数组，里面就是所有的权限数据。 :props指定数据绑定展示的字段，label就是展示的名称，children就是自己的每个数据中的子对象。
3：点击弹出对话框后，在树形控件中展示了数据。

优化树形控件的展示效果

30：完成了弹出对话框中树形控件的数据渲染，开始完成树形控件的样式美化
1：在组件中添加 show-checkbox,展示复选框， node-key="id"，每个节点绑定唯一标识符号。注意id就是返回数据中的id，唯一标识符号。
2：完成了数据前面添加了复选框，和添加了唯一标识符号

分析已有权限默认勾选的实现思路

31：完成了点击弹出属性组件和组件的优化，开始测试让每个节点中的数据被选勾选
1：:default-checked-keys="defKeys",它能显示每个勾选的节点，能接受数组中的一个数组，数组中的id就是每个3级数据的id，有几个，页面就会被勾选几个
2：页面效果，通过:default-checkbox测试了显示的勾选的复选框

加载当前角色已有的权限

32：测试了复选框勾选的渲染条件，开始渲染已经勾选的角色。将勾选的全部渲染并勾选
1：点击分配权的时候触发事件函数，把接口获得到的数据用rightslist储存起来，用一个递归函数把所有勾选的数据给挑出来，再把函数的调用，放在点击弹出对话框的时候，就调用递归函数，把勾选好的数据展示到页面
1.1：递归函数的讲解：参数讲解：封装递归函数，ndoe接收的是scope.row该对象的一组数据，arr就是data中的defKeys空数组，用来存储找到勾选的数据的。
1.2：递归过程的讲解：通过调用函数，拿到对象，和空数组，调用封装函数，外层的forEach去遍历该对象中的children属性，并且是函数自己调用自己形成了循环，把循环找到的并不包含children的对象全部push到defKeys空数组中，此时数组中的数据都是3级对象，node这是每一123级的数据，它都有。而arr就是defKeys中有每一个被勾选的每一个数据【我知道遍历到的每一个数据，但是被勾选就有点疑惑了】
2：通过递归拿到了被勾选的id，并添加到了defKeys中，只要一点击就会把树形控件中被勾选的数据都渲染到页面中

在关闭对话框时重置defKeys数组

33：完成了树形控件中的数据渲染，但是每次每次点击不同的分配权限，它会累加到其他分配权限中【就是被人被全了，点击其他的，也被全选了】，需要每次点击分配权限每次关闭对话框时，将数组给清空掉，就不会实现污染问题了
1：给弹出对话框绑定点击关闭事件
2：关闭事件函数中，将数据给置空，就实现了独立互不污染的添加分配权限了

调用API完成分配权限的功能

34：解决了每次完成权限分配就清空数组，一面数据累加，污染到其他角色的分配权限，调用接口完成真正的角色权限分配的修改
1：数据接口
2：属性控件的方法
3：在点击弹出对话框的时候，把该一级角色的id给获取到
4：接收1级数据的ID
5-6：点击为权限分配事件，函数中调用this.$refs.treeRef.getCheckedKeys获取全选的状态的按钮， this.$refs.treeRef,.getHalfCheckedKeys，获取到所有半选状态的菜单，他们2个会组合个一个数组，返回给keys，返回成一个数组， 调用接口发起权限数据修改，把1级菜单的ID和他里面的全选和半选的按钮，发给后台，如果分配失败弹出失败的信息， 如果成功就弹出成功的提示信息。关闭对话框，重新渲染页面数据，完成了分配权限的修改，并刷新了页面
7：页面效果点击弹出对划线，点击修改权限，点击确定完成了权限的修改，在关闭对话框，刷新页面数据。实现了分配的功能

渲染分配角色的对话框并请求角色列表数据

35：返回去完成用户管理--用户列表-的分配角色功能，点击弹出对话框，将用户和角色信息渲染到页面中
1：接口文档
2：点击弹出对话框，
3：把用户的name和role渲染到页面中
4：点击弹出对话框，发起数据请求，把获取到的数据储存在rolesList中，供之后的下拉框提供数据渲染
5：页面效果，点击弹出对话框，完成了点击弹出对话框和框内的数据渲染

渲染角色列表的select下拉菜单

36：完成了点击分配角色对话框展示和所有角色数据的获取，开始完成下拉框的数据渲染
1：拷贝组件
2：导入组件
3：v-model="selectedRoleId"双向数据绑定，他能拿到已选中用户的id， :label=item.roleName,它能获取到选中的数据，就是下拉框中的每一项数据，:value=item.id就是每一项的id，展示了下拉框中的数据。
4：完成了点击下拉框中的数据，就渲染到下拉框中

完成分配角色的功能

37：完成了分类角色的下拉菜单的数据渲染，开始调用接口完成分配用户角色的功能
1：接口文档
2：点击确定触发saveRoleInfo函数，如果没有选中任何数据，点击确定，则弹出提示信息，提示必须有所选择。 有选就调用接口发起数据请求，把该对象的id携带到后台，实现了数据的修改。
2.1：关闭的时候，将选中的下拉框，和选中的这个用户给清空。不但实现了修改，重新打开并实现了数据的重置功能，就是一个新的表单供用户修改，完成了分配角色的修改功能

提交本地代码到Git仓库并推送到码云

38：刚才是中途返回去完成了其他页面的分配角色，返回角色列表页面的仓库更新，因为已经完成了功能开发
1：本地更新
2：因为之前已经创建了远程分支，现在自己也所处分支上，直接push就会用本地分支把远程分支更新
3：完成远程主分支更新，1：切换到主分支再合并分支，再更新远程主分支。

介绍商品分类功能的作用

01：前台页面和后台管理页面的逻辑其实是一致的

创建goods_cate子分支并push到码云中

02：创建本地分支，并创建远程分支

通过路由加载商品分类组件

03：创建商品分类组件，并在router中配置为/home的子路由页面，实现了点击商品分类跳转到该页面。

绘制商品分类组件的基本页面布局

04：完成了点击跳转到组件页面，实现面包屑和卡片视图，的基础页面布局

调用API获取商品分类列表数据

05：实现了页面的基础布局，开始调用接口获取到接口数据，将商品分类数据打印查看
1：接口文档
2：在data中定义查询条件，里面包含type是查询第几层数据，pagenum是当前页码值，pagesize每页显示多少条数据。
2.1：定义了空数组，用来接收分类列表数据，total用来统计总共多少条数据。
2.2：在create中调用函数，获取到数据。封装函数，发起数据请求，params：this.queryInfo查询参数， 就是刚才定义的初始化查询对象，如果数据获取失败，就弹出提示，成功就把数据储存在空数组中，和总条数储存在total中，实现了页面数据的获取
3：打印了获取到的分类列表的数据

初步使用vue-table-with-tree-grid树形表格组件

06：完成了数据的获取，开始使用第三方依赖，布局树形表格，把数据渲染
1：在可视面板中下载第三方运行依赖
2：将下载的插件，导入到自己的main入口文件中，这样所有的子页面都可以使用。并将它注册为全局组件。vue.component('tree-table', TreeTable),以后就可以使用tree-table插件了
3：在vue页面中使用插件，每个属性需要看使用手册
3.1：:data=catelist商品分类的列表数据
3.2：:cloumns=cloumns为列定义数据，label就是表头的名称，cat_anme就是绑定的数据名称。
3.3：:selection-type=false 关闭表格前面的对话框， :expand-type=false关闭表格的折叠，
3.4：show-index显示index序号
3.5：index-text设置序号的标题名称
3.6:  border添加竖线边框， :show-row-hover:关闭鼠标经过背景色高亮效果
4：添加初始数据， 用来设置表格的数据
5：api方法
6：Attribute属性
7：代码示例和接口返回的数据
8：页面效果，暂时渲染了1级数据。

使用自定义模板列渲染表格数据

07：使用了第三方表格，并把1级数据根据文档把数据给渲染了，现在渲染是否有效
1：如何自定义插槽，插入自己的图标。
2：接口响应的数据
3：定义template插槽，slot：isok接收了data中模板，如果是false就渲染勾，如果不是就渲染x，实现了按需渲染图标
4：页面效果， 渲染了是否有效这行数据的图标，且是按需渲染的

渲染排序和操作对应的UI结构

08：渲染了第一个自定义模板， 开始渲染第二个自定义模板，渲染排序。
1：定义了插槽的规则与数据
2：定义了一个排序，也是按需渲染图标的，第二个就是直接渲染带图标的按钮，都是使用自定义模板的方式
3：接口文档
4：页面效果，渲染了2级和3级的数据，是根据scope.row.cate_level=数值，根据值渲染的

实现分页功能

09-渲染了123级的菜单数据，和自定义模板的数据，开始渲染分页功能
1：插入组件，@size-change监听页码值的改变
1.2：@current-change监听数据页的改变
1.3：:current-page=queryinfo.pagenum,渲染了默认是从第一页显示数据
1.4：:page-size=[1,2, 5,10]，按照一页显示多少条数据
1.5: :page-size="queryInfo.pagenum" 一页显示几条数据
1.6：layout页面所有分页组件的布局
1.7：handleSizeChange和handleCurrentChange都是监听了页码值和页面数据的变化，而重新渲染页面，实现了数据分页的功能
2：页面效果，实现了分页功能

渲染添加分类的对话框和表单

10：完成了分页功能，开始完成添加分类功能，实现点击弹出对话框，并添加了表单验证规则
1：添加了对话框，绑定了表单数据对象，对象中药有分类的名称，和分类的id，分类的等级。
1.2：绑定了验证规则
1.3：绑定了引用对象
1.4：prop指定了验证对象
1.5：双向v-model绑定了数据框的数据
1.6：lable表头的标题
1.7：在data中定义了表单数据对象和验证规则对象
2： 接口文档，3项值是必填项，父类id，分类名称，分类层级
3：点击弹出对话框，渲染了输入框，和添加了验证规则

获取父级分类数据列表

11：完成了单击添加分类弹出对话框和添加了表单验证规则，开始调用将下拉菜单的数据打印
1：接口文档，
2：点击弹出对话框的时候，就调用获取分类数据的函数，函数中调用接口，携带了params参数type:2,意思就是获取2级的数据因为第3级的数据是用户选择的，而不是我们渲染的
3：将获取到的数据打印到控制台中，还未渲染层级列表数据

渲染级联选择器

12：刚才获取到了2级的数据并打印了，现在根据数据把下拉菜单渲染
1：props指定渲染数据，value渲染的2级id， label渲染2级数据的名称，children就是渲染带chuildren的项， 
2：在级联选择器中渲染数据，：options指定了数据源， :props指定了级联渲染的配置对象， v-model指定了父级分类的id， @change打印选中的数据， clearable添加关闭按钮， change-on-select允许任意一级都可选中
3：代码示例和接口返回的数据
4：点击完成2级的数据渲染以及选中。

根据父分类的变化处理表单中的数据

13；渲染了级联选择框，开始完成分类名称的渲染
1：@change触发自己的事件函数，函数中如果选中了数据，就把选中的最后一项的id赋值给cat_pid就是3，cat_level就是3，
2：完成了分类名称的数据渲染，等下使用接口完成数据的修改

在对话框的close事件中重置表单数据

14：完成了表单数据添加的逻辑，开始完成点击关闭对话框的时候，将数据框清空
1：点击关闭时触发事件函数，函数中将表单重置，还要将数组清空，id和level归哦，实现真正的初始化
2：实现了添加分类数据的归0.重置功能

完成添加分类的操作

15：完成了数据清空重置功能，开始调用接口完成修改分类功能
1：响应的数据
2：编辑和删除的功能和之前的一样，需要同学们自己完成，调用接口完成了添加分了，并刷新了页面
3：页面效果，完成了添加分类，并重新渲染了页面数据
4-5：这2个功能需要同学自己课下完成

将goods_cate分支上的代码提交到Git仓库中

16：完成添加分类的功能。完成了本地分支更新，再完成了远程分支更新，合并分支，后再更新远程主分支

创建goods_params分支

17：创建并切换分支，再远程创建同名分支

介绍分类参数功能的作用

18: 后台的分类参数和前台分类参数的逻辑是一致的

通过路由加载分类参数组件页面

19：创建分类参数组件，实现点击跳转到该页面，并在router,js中挂载该路由。

渲染分类参数页面的基本UI结构

20：完成了点击跳转到分类参数页面，开始创建页面的基础布局
1：引入alert组件，
2：在element.js中解构该组件
3：页面效果，显示了面包屑和alert提示

调用API获取商品分类列表数据

21：完成了商品页面的基础外形布局， 再调用接口获取分类数据列表
1：在data中定义空数组
1.2：在created中调用事件函数，获取数据
1.3：封装异步函数，函数中发起请求，如果数据获取失败，就提示，成功就将数据打印在控制台中
2：接口文档，不需要携带参数，直接请求即可返回数据
3：成功的请求到了数据

渲染商品分类的级联选择框

22：获取到了分类列表的数据，导入级联选择器设置级联中的数据
1：级联选择器:options接收商品列表， :props指定级联框中的数据，v-model级联选择框中的数据。 @change级联选中项中发生改变，会触发这个函数，他能拿到选中好的数据，并显示在级联选择器中
2：完成了级联选择器中的数据渲染，和数据获取

控制级联选择框的选中范围

23：渲染好级联选择器的数据后也拿到了选中中级联数据并打印了，如果只选择了2项，是不能让数据被选中在级联中的
1：在@change中判断，如果选中的级联，返回的数组中的长度不满足3，就不允许级联被选中。将级联选中的数组给清空，就实现了数据的不选中，return阻止程序向下继续执行
2：页面效果，如果选中的数据没有3级，就将选中的数组给清空，就实现了数组中的数据清空

渲染分类参数的Tabs页签

24：完成了未选中3级数据，就清空级联中的数据，开始完成tab标签页面的渲染
1：导入标签页组件
2：解构标签页组件
3：在tabs中配置参数v-model双向绑定activeName指向当前点击的是哪项，默认的值就是tab选中的值，@tab-click点击时触发的事件函数，将当前被选中的tab高亮显示
4-5：页面效果，完成了tab标签页的渲染和选中的数据打印

渲染添加参数按钮并控制按钮的禁用状态

25：完成了tab中的数据渲染，开始实现，如果级联中没选中3级数据，就让添加参数按钮禁用
1：让动态和静态中添加参数的2个按钮禁用，用:disabled动态绑定事件函数中的返回结果，事件函数中如果选中的的长度没有3级，就返回true禁用，反之就返回false不禁用。注意:disabled能接收一个函数的return返回值
2:-3：页面效果，没有选中3级数据，就禁用按钮

获取参数列表数据

26：完成了级联未选中3级数据，就让添加参数按钮禁用。现在完成参数列表数据的获取并打印
1：在tab-pane中tab标签中，name是tab的标识名称，label就是title标题。
2：点击tab能在控制台中打印only或者many就是tab标签的标识名称
3：tab标签中的name是在data中activeName绑定的，它绑定的many，那么tab标签页显示的就是tab1.
4：cateId函数，返回的是选中的选中的分类id，如果选中了3项数据，就返回选中的这3项ID，返回给cateId这个函数
5：在级联选中事件函数中，触发的handleChange函数中，如果选中的是3级数据，就开始发起请求，将选中的3级分类的id【cateId】和选中的是静态还是动态，params：sel: this.actibeName发给后台服务器，服务器知道了是哪3级联的id和选中是静态和动态，将属于参数列表的数据返回。如果数据返回失败，就弹出提示，返回数据成功就把数据打印在控制台中，留给后续操作
6：控制台中拿到了参数列表的数据了

切换Tabs面板后重新获取参数列表数据

27：完成了参数列表的数据获取，开始完成小问题：@change事件中返回了刚才请求到的后台数据，但是点击tab却无数据返回，因为tab没有绑定刚才那个事件，无法获取数据的
1：点击tab无数据，需要点击tab能获取到参数列表的数据
2：将刚才写在handleChange事件函数，中所有的代码剪切到getParamsData事件函数中，函数中就是剪切过来的数据请求代码，在handleTabClick和handleChange中都调用该函数，2者都能获取到参数列表的数据了
3：点击级联和tab都能拿到后台返回的数据了

将获取到的参数数据挂载到不同的数据源上

28：解决了级联和tab都能拿到数据，区分动态和静态数据，将他们存储在自己的data中
1：点击tab是，拿到了数据，并且把拿到的数据，分类储存在动态和静态参数中
2：在获取参数中，将当前选中的tab页，把对应的数据储存起来

渲染动态参数和静态属性的Table表格

29：将请求到的数据进行了动静区分，好后续的操作。现在渲染表格中的分裂数据了
1：在table中:data绑定了manyTableData数据，静态表格就绑定了onlyTableData数据，将获取到的数据区分对待，开始渲染表格中的数据
2：表格中的cloumn行，label就是表头，prop就是指定渲染数据项，在最后一行中使用template插槽，将操作中的按钮给渲染
3：页面效果中的动静参数面板中的表格，按需渲染了

渲染添加参数的对话框

30：完成了动静tab页中的表格数据渲染，开始完成2者共用一个对话框，区分不同的数据，且通过表单验证
1-2：点击添加按钮，弹出dialog对话框，:model绑定表单数据对象，:rules验证规则，ref表单引用对象，:label动态显示文本，prop指定了分类的名称。v-mdeol绑定了添加表单中的分类名称
2.1：点击关闭的时候，触发关闭事件函数，在关闭对话框的时候，将表单中的数据重置了。
2.2：titleText标题的名称用函数封装，根据点击不同的当前高亮项，返回不同的文本信息。这样输入框标题就能渲染不同的数据了
3：点击点击面板中的添加按钮，其实共用的是一个对话框，但是对话框中数据不同而已

完成动态参数和静态属性的添加操作

31：完成了点击弹出共用一个对话框，框中显示不同的数据而已，开始完成参数添加的功能
1：点击确定的时候，触发事件函数中的，先对表单中的数据进行验证，调用接口获取数据，携带3级联的id，和添加的名和当前点击的是哪一个面板。【合计就是：点击了哪一面板，是不是选中了3级联，和选中的内容，都要给后台数据】
2：接口文档：要携带的参数，参数1是级联的数组id，参数2是添加的内容，和点击的面板
3-4：点击添加完成了添加参数的功能，添加的参数，会在表格中渲染数据

渲染修改参数的对话框

32：完成了添加参数内容，开始完成点击修改弹出对话框
1：在页面添加dialog对话框，:model绑定表单的数据对象， :rules绑定验证规则， ref表单引用对象， :label表头的标题，v-mdeol双向的是输入中的内容，
1.1：在不同的点击修改面板中的按钮，会弹出修改的弹出对话框
2-3：页面效果，点击弹出了修改对话框

完成修改参数的操作

33：完成了点击弹出修改对话框，开始完成修改参数的功能
1：接口文档，根据id查询参数接口，徐涛携带3级的id，和自己点击的那个id。编辑提交参数的接口完成数据的修改，要携带3级联的id，自己点击修改的ID，和携带的参数，就是自己修改的内容和修改的那一个面板中的数据
2-3：点击显示修改对话框，发起数据请求，将请求到的数据渲染到自己的输入框中，并显示对话框。
完成了点击显示修改对话框，并把请求到的数据渲染到输入框中

A: 点击确定修改按钮，
B：触发修改事件，函数中对表单中的内容进行验证，发起接口请求，如果数据请求失败，就提示，请求成功就调用getParamsData刷新页面数据
C：页面效果，点击弹出修改的对话框并渲染对话框中的内容，点击确定修改，发起数据请求，完成数据参数修改，并重新刷新页面表格，再次渲染页面数据

完成删除参数的业务逻辑

34：完成了修改参数的功能，开始实现删除参数的功能
1：点击删除，弹出删除的confirm对话框，如果是confirm弹出取消了删除，反之就调用接口携带级联的ID和自己的id，实现删除删除功能，如果数据删除失败，弹出提示，成功就弹出删除成功，并调用getParamsData重新刷新页面数据
2：接口文档
3：页面效果，点击删除，弹出删除对话框，点击确定删除，弹出删除的提示新，并重新刷新页面数据，完成删除参数功能

渲染参数下的可选项

01：完成了删除参数功能，开始渲染折叠框中的数据，将数据转换成数组并以标签的形式展示
1-2-3：在getParamsData中获取数据，把数据打印发现attr_vals返回的是一个字符串，每个数据都是用空格隔开的，使用forEach遍历数据，在遍历中用split将空格分隔，返回一个数组，并以逗号隔开的每一项
4-5；把分隔的数组，在tag中循环，并展示。页面中就渲染了tag标签。

解决attr_vals为空字符串时候的小问题

02：完成了tag数据以标签形式的展示，但是当空的折叠行，会莫名的多了一个空的标签，解决自动生成空白标签
1：在getParams改造数据， 在forEach中如果有数据就用split转成成数组，如果没有就是一个空的数组，就不会在页面显示多余的tab标签了
2：页面效果，其实就是['']数组中多了一个空白的字符串，所以就渲染了空白标签，使用3元表达示按需渲染了标签

控制按钮与文本框的切换显示

03：完成了解决生成空白标签，开始双击将标签改变成输入框
1：在页面使用动态编辑标签
2：拷贝就多了输入框和button按钮，input中的v-model就是输入框中的值，ref就是输入的引用对象， @keyup.enter.native就是失去键盘时触发的事件函数，@blur就是输入框失去焦点时触发的事件
3：在输入框失去焦点时，或者键盘弹起时，触发事件函数，函数中就打印ok，表示事件能被触发。在点击button按钮的时候，就会切换成input输入框
4：页面效果，点击按钮就会切换成输入框

为每一行数据提供单独的inputVisible和inputValue

04：完成了输入框和按钮的编辑切换，开始完成共用数据所产生的问题
1：问题描述，点击了一个输入框，但是所有行都多了一个输入框，因为共用的是同一个数据对象，和值。改造成独立的数据，数据就不会互相影响了
2：删除掉光光数据，文本框的切换，和文本框中的输入内容
3：在getParamsData的forEach遍历中，循环中给每个数据生成自己输入框显示和输入框的值，因为数据独立，就互不影响了。
4-5：点击只会自己行中的按钮变成输入框，其他行中的数据不会发生改变。

让文本框自动获得焦点

05：解决了数据共用所产生的问题，开始完成让输入框自动获取焦点功能
1-2：this.$nextTick() => {this.$refs.saveTagInput.$refs.input.focus}实现了页面元素渲染后，点击输入框，输入框自动获得焦点的功能
3：变成输入框后自动获取焦点

实现文本框与按钮的切换显示

06：完成了输入框自动获取焦点功能，开始完成输入框如果如果输入很对空格，失去焦点时，还原清空的输入框
1：输入框失去焦点或者键盘弹起事件，触发的事件函数，函数中如果输入框中的内容trim去除空格后，是空白的，就把输入框中的内容清空，隐藏输入框
2-3：完成了输入框内容的重置功能

完成参数可选项的添加操作

07：完成了输入框内容的空白重置功能，开始完成参数添加功能
1：接口文档，需要携带的参数有：attr_name输入框中的内容，attr_sel输入框中的tab面板，attr_vals参数的属性值，和修改的3级id+修改该行的id，
2：在失去焦点时触发的事件函数，发起数据请求，携带了3级id和自己的id，和参数2的新属性的名称依旧面板类型和就属性的值，完成tab标签中的内容修改，修改失败，就弹出失败的信息，成功就弹出修改成功。
3：点击tag完成了数据的修改

删除参数下的可选项

08：完成了tag标签中参数的修改，开始完成点击删除tag标签
1：在tag元素中添加closeable关闭的图标， @close点击关闭时触发的事件函数
2：函数中根据i序号，从数组中删除了一项数据，在调用saveAttrVals实现了保存数据，实现了数据删除功能，注意删除功能不需要调用getParamsData刷新页面数据，就能实现页面数据的重新渲染
3：页面效果，实现了点击数据实现了点击删除tag标签的功能

清空表格数据

10：完成了tag标签的删除功能，开始完成级联如果没有选中数据，页面就不能渲染表格数据
1-2：在getParamsData函数中，将面板中的数据清空，即可实现页面表格数据的情况。及时manyTableMenu和onlyTableData=[ ]， 就实现了数据的清空功能
3-4：如果级联选择器中没有选中数据，就不渲染表格中的数据

完成静态属性表格中的展开行效果

11：完成了级联中的数据没选中就不渲染表格功能，开始完成监听表格面板中表格的展开行
1：直接把之前对他面板的table-column直接拷贝一份即可，因为数据和处理函数是共用的，所以实现了代码重用的功能
2：点击静态属性面板，展开折叠，里面能展示tag标签数据，和点击实现了删除功能。就是代码重用的功能

将本地goods_params分支的代码提交并推送到码云

12：完成了动静面板中的表格数据渲染，添加和删除参数，以及折叠中的tag渲染修改和删除功能，完成了分类列表页面使用的功能开发，开始完成仓库更新
1：本地更新-->远程分支更新-->合并分支，更新远程主分支
2：远程仓库中的分支和主分支得到了更新

创建goods_list子分支并推送到码云

13：完成分类列表页面的开发，以及仓库更新，开始创建分支去完成商品列表页面的开发
1：创建并切换分支-->创建远程同名分支
2：远程多了同名分支

由于字数限制，文章分为上下篇

下一篇：vue项目一：电商后台管理项目PC端(下)