项目

一.登录页 login页
登录状态保持：服务器和客户端同源，使用cookie或者session来保持登录状态，跨域使用token来维持登录状态，登录将数据发送给服务器，服务器返回登录结果，其中带有token，客户端得到并保存，后续请求都都要携带token发送给服务器，服务器会验证token来确保用户身份，token保存在sessionStorage中。
为表单添加了验证规则，在将数据发送到服务器端之前首先通过refs对象获取到表单dom元素.validate（async valid => {}）来验证数据是否符合验证规则，验证通过后服务器返回状态码判断是否正确，正确就在sessionstorage设置一个服务器生成的token，然后通过编程式导航this.$router.push()跳转到home页。//在入口文件导入的路由规则。

在路由页 使用router.beforeEach//挂载路由导航守卫,接受一个函数，三个参数，to表示将要访问的路径，from表示从哪个路径跳转来，next是一个函数，表示放行
如果to.path==='/login' 直接return next()放行
如果不是登录页获取本地sessionstoreage的token参数，如果不存在就直接强制next('/login')重定向回登录页，
如果存在就next()放行，如果没登录就不能通过url地址访问/home，也就不能访问他的子组件

vue-router：先导入vue和vue-router 然后把所要用的组件导入，设置路由规则 router = new VueRouter
将'/'重定向登录页，home页是导航菜单和页头，主题区域内容通过设置为/home的子路由规则，根据path导向到不同的组件，显示在内容区域内 设置完export default router 导出

导入axios包后，设置axios.defaults.baseURL请求的根路径
设置了一个axios.interceptors.request.use(config => {})，每当发送请求时就会执行这个拦截器里的代码，验证用户身份
HTTP协议中的 Authorization 请求消息头含有服务器用于验证用户代理身份的凭证
设置将本地存储的token值传入config.headers.Authorization（请求头对象添加字段），带回服务器进行校验，返回config
authorization用于表示HTTP协议中需要认证资源的认证信息
二.主页，home页
使用了el-container布局容器，el-header头部，el-aside侧边栏，el-main主要容器
el-header头部，注销功能 设置了一个btn点击后将sessionStorage.clear()清除，然后通过路由push到login页
侧边栏 el-aside
折叠：设置了一个切换的button，设置了一个布尔值，默认值为false不折叠，注册了一个点击事件：将布尔值取反 this.iscol = ! this.iscol 实现切换，在el-aside里将:width动态绑定一个三元表达式；如果布尔值为真，将width设为64px，否则为200px
菜单的数据是通过后台返回的数据循环生成的，有一个难点：循环生成的菜单无法一一设置前面的icon图标，只能设置成一样的，解决：将后台给每一个菜单项id值设置了一个对象，分别为icon的类名，然后在循环中设置了，通过动态绑定类为每个菜单项设置不同的icon类名，:class=对象.属性 iconobj[item.id]

二级子菜单改造成子路由链接 将el-router的router属性设置为true就行 点击二级菜单就通过将:index设置的属性:index='/'+subItem.path跳转到不同的路由。

当点击二级菜单的时候，被点击的二级子菜单并没有高亮，我们需要正在被使用的功能高亮显示
我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index，为每个二级菜单添加了点击事件，将path值作为参数传入，然后点击的时候把path值野保存到sessionstorage中，将一个值动态绑定到el-menu的dafault-active中，在created()将ss的值取出来赋给这个动态绑定的值，这样在会话期间就会一直高亮

主题内容布局用到了栅格系统分为24列 el-row :gutter:'20'(设置每个栏之间的间距）
el-col :span：“4” 设置占几份

定义了获取菜单的函数，从后台接口调出数据然后将函数放入created()，在vue实例创建完成后立即调用，此时还没有挂载dom元素

三.用户列表数据 /users
el-table，将从后台接口返回的数据存放在一个对象数组在el-table设置 :data='userlist'，在table-column中设置prop来接受每个对象的键名来读入数据，自动渲染出数据，自定义渲染使用作用域插槽v-slot=‘xxx’接受某一行的对象数据，使用template模板来自定义渲染接收数据

数据分页和数据查询
定义了一个获取用户列表的参数对象，其中包含一个空字符串表示查询的数据，当前页数，和每一页显示多少数据，在获取用户列表的时候使用get请求，params将这个参数对象传入，后台接口会查询相应的数据然后显示在页面，使用el-pagination分页的内置事件来相应页码改变时的操作，将最新的参数传入参数对象中，重新调用获取数据的接口

添加和修改信息
使用了el-dialog，用一个动态属性:visible.sync接收一个布尔值，来控制对话框的显示和隐藏，对话框里嵌套了一个表单用来修改和添加
输入完成后的邮箱和手机使用了自定义验证规则，因为不能只是用长度等简单的规则进行判断是否合法，自定义函数是一个函数，通过正则表达式来判断是否合法，合法就callback返回，不合法就在callback函数传入一个error对象提示不符合规则，在验证规则使用validater：自定义验证规则的名字使用

删除信息，使用了message-box的弹框，不能使用vue.use()进行引入，不然项目初始化的时候都会弹出小弹窗，全局使用的话，将这个单独的组件引入之后，挂载到了vue原型身上，但是
我在vue.prototype.confirm()里面传入了配置参数，.then()返回点击确认后执行的函数，将对应删除的数据行的id，调用删除的接口删除，删除完成后重新调用获取数据的函数来刷新页面，.catch()返回点击取消后执行的函数，提示已取消操作

角色列表拓展项：三层for循环配合栅格系统渲染

从后台调接口返回的数据是通过children嵌套的，在二级三级循环使用上一级的item.children继续循环渲染
分配权限树形控件

el-tree
1.点击分配权限的对话框时执行一个函数，参数为这一行的所有数据，调用后台的获取权限列表的接口，将权限列表的所有数据保存在一个对象里，作为tree的:data
2.难点（得到权限数据的三级节点）利用了递归的方法，使用了一个函数，将这一行的所有数据和一个空数组传入，空数组代表已分配的权限，递归判断当前行角色的行数据是否含有children属性，如果不含有则把三级节点的id（就是角色本来拥有的权限push到这个空数组），不然就使用该节点的children继续forEach循环递归调用这个函数。把这一行所有该角色拥有的权限保存在这个数组中，此时对话框的checkbox就会默认选中，然后把选中这一行角色的id保存在一个空字符串中，一会利用该id值对某个角色的权限进行修改。
3.通过this.$refs.treeRef对象来调用getCheckedKeys和getHalfCheckedKeys，半选中的id值和全选中的id值通过了es6新用法展开运算符将其合并成一个数组，因为后台接口说明参数是字符串，所以使用join（“，”）将其连接成字符串，然后调用后台接口将修改后的各个节点的id传回后台，将数据更新
4.关闭对话框时候将默认选中的数组清空。

四.商品分类页
这一页使用了一个树形表格，用的是一个树形表格插件'vue-table-with-tree-grid'，在vue ui中的开发依赖下载后在入口文件导入后，然后使用vue.component引入为全局可用的组件，名字为tree-table,调后台接口获取对应的数据后根据使用说明配置属性，有一些项用了自定义渲染，使用了一些v-if，v-else-if，v-else等，没什么难点，
这一页还使用了级联选择器 商品分类一共有三级，前两级算父级分类，只能给父级分类添加子分类或者不选则添加的是一级分类，级联选择器渲染出所有的父级分类，然后v-model双向绑定一个selectedOpt用来保存选中的分类，数组保存选中数组的id，如果selectedOpt数组的length大于0，证明选中了父级分类，等于0则没选中，将选中数组的最后一项的id值赋值给addForm中的cat_pid父级分类id，之后调接口来添加对应的分类

五.分类参数页
级联选择器，使用了计算属性computed()将选择中的id值得数组的第三项保存起来后面调接口要用的到。
选择将对应的tab标签激活时的参数传到get请求的参数中，找到对应的动态参数或静态属性，获取数据，每个参数都有拓展项，从后台获取完数据后是一个字符串，在接收数据传入双向绑定数据项之前对数据进行了split处理，然后循环渲染出相应的tag标签，在之后有一个+new tag标签，注册了一个事件，点击后将默认隐藏的表单显示然后自动获得焦点，用到了this.nextTicl()通过refs获取到这个表单DOM元素，然后.refs.input.focus()获取焦点，为每个tag项注册了清除事件，删除某一项的时候，将其从绑定的数组中删除，然后调用接口来更新数据。

困难：input表单的多项一起修改，因为循环渲染出来的所以不能全都绑定在一个值上，所以在一开始接收数据准备渲染的时候，为接收到的数据都添加了两个属性来控制显示隐藏和接收文本值，然后单独操作一个就不受其他的影响了，每添加一个，失去焦点时候就往数组中push一项再调用更新的接口

六.商品列表
和之前的功能差不多，重复比较多，有一个发现，input的number可以键盘输入E,e=2.71...
使用onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'解决

七.添加商品
el-step和el-tab关联，两者使用了同一个属性，将tab的name设置为了012345，只能设置成字符串，所以在step用的时候用了activeIndex-0将字符串转数字，前三页都是表单，没什么其他东西
第四页图片使用的是组件自带的ajax，里面不包含authorization,在:headers传入了页面的token值带回后台进行验证
定义了三个不同的触发时间，上传成功，查看和删除，
成功 就将服务器响应数据的临时路径放入图片信息数组中。
查看 将响应的图片存储的url传入图片src属性，将默认关闭的预览对话框设置为true。
删除 的时候，点击叉号服务器会返回对应存储的临时路径，然后用了es6findindex传入了一个回调函数，找到了存储该路径图片信息数组对应的索引，然后用splice删除该路径

难点：将整个表单数据项发送请求之前首先进行验证，发现级联选择器双向绑定的是数组，服务器需要的是字符串，所以不能直接修改这个上传信息对象的数据，所以这里用了lodash的.cloneDeep（）将这个对象进行了深拷贝，操作了深拷贝后的对象，之后调接口进行上传post

八订单列表
有一个省市区联动的级联选择器和前面配置的差不多，数据是现成的，还有个时间线组件

九数据统计
下载echarts插件，导入，然后创建了一个包裹echarts的容器
所有的操作在mouted里面函数里进行的 //基于dom创建后执行，页面上的元素已经被渲染
首先先初始化echarts实例 var myChart = echarts.init(document.getElementById('main'))
从服务器获取数据，需要将配置对象和数据对象两个对象进行合并，用了lodash的merge(1，2)函数进行合并对象，将合并后的对象传入实例对象.setOption()中创建了echats图表

项目上线：添加了进度条，每次请求时网页上都有进度条，使用的是NProgres
导入对应的样式，在axios的请求和响应拦截器中分别添加了nprogress.start().done()表示开启进度条和关闭进度条，请求时开启，收到响应时关闭
vuecli3.0默认隐藏了webpack配置项，创建了vue.config.js来设置
chainWebpack可以通过链式编程的形式，修改webpack配置 *
configureWebpack可以通过操作对象的形式，修改webpack配置
config.set()
默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.**.js文件中，导致该js文件过大
那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.**.js文件中
index.html添加加载外部CDN来引入了对应的依赖项，开发入口文件删除对应引入的包

9.路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。
路由懒加载实现步骤：
1.安装 @babel/plugin-syntax-dynamic-import
2.在babel.config.js中声明该插件
3.将路由更改为按需加载的形式
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
部署服务器使用了pm2来管理应用，会在服务器持续开启node服务器，不会关闭终端后结束任务。