vue_shop项目历程

一、前端项目初始化

• ① 安装 Vue 脚手架
• ② 通过 Vue 脚手架创建项目（选择babel，router，eslint，手动配置）
• ③ 配置 Vue 路由
• ④ 配置 Element-UI 组件库 (搜索vue-cli-plugin-element,选择按需导入)
• ⑤ 配置 axios 库
• ⑥ 初始化 git 远程仓库
• ⑦ 将本地项目托管到 Github 或 码云 中

二、后台项目的环境安装配置

• ① 安装 MySQL 数据库
• ② 安装 Node.js 环境
• ③ 配置项目相关信息
• ④ 启动项目
• ⑤ 使用 Postman 测试后台项目接口是否正常

三、登录/退出功能

3.1、 登录概述

业务流程：

① 在登录页面输入用户名和密码
② 调用后台接口进行验证
③ 通过验证之后，根据后台的响应状态跳 转到项目主页

相关技术点：

• http 是无状态的
• 通过 cookie 在客户端记录状态
• 通过 session 在服务器端记录状态
• 通过 token 方式维持状

3.2、 登录 — token 原理分析

3.3、登录功能实现

1. 登录页面的布局

通过 Element-UI 组件实现布局 （需要用到的elementui组件）

• el-form
• el-form-item
• el-input
• el-button
• 字体图标
  

实现登录界面界面：

1. 清除界面，App.vue，router.js中的导入和路由规则，删除view，Helloword组件
2. 创建login.vue组件，通过router.js挂载到根组件中（导入login.vue，配置路由规则），在App.vue中创建路由占位符（router-view）
3. 创建全局样式，在asets文件夹下创建css文件夹，创建global.css（设置占满全屏，背景颜色）文件，再通过main.js中的导入global.css
4. 创建登录框部分（背景颜色，大小，垂直水平居中用flex布局）
5. 创建登录框中的log，设置大小130px，img大小100%，使用position：absolute，设定left和transform：translate移动log
6. 创建表单区域：在plugin文件中element.js中引入（import所需要的ui元素），(只用一个import导入)，创建两个输入框，两个按钮，使用position:absolute进行定位，bottom：“0”，设置padding两边为20px,上下为0。
7. 为文本框添加小图标：搜索elementUI官网，有两种方式给输入框添加icon图标，第一种：prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，第二种：通过slot插槽方式添加icon
8. 注意：在使用elementUI的输入框时，无法输入文字时，需要script中设置data (组建中的data是函数返回的值) 的用于在输入框中绑定的值：
9. 设置密码框的类型：type=“password”
10. 为输入框添加双向绑定：在form标签中使用 :model=‘form’， input或者其他标签中都需要使用 model=‘form.属性名’ 将数据双向绑定到data返回的对象中
11. 添加表单验证功能：1、在form表单开始标签，设置rules=‘规则名’，2、在data中配置规则对象（规则总体为对象，其中规则为数组对象），3、在form-item中引入属性prop=‘具体的属性名’ 用于加上规则
12. 添加重置功能：1、form中设置ref=“自定义实例对象名”；2、为重置按钮创建点击事件；3、methods中，点击事件获取实例对象中的$ref并调用resetFields（）函数，移除表单内容注意：click的this指向表单的实例对象 使用nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
13. 表单的预验证：登录点击事件调用validate（valid）函数，返回一个boolean型值
14. 根据表单验证发送请求：1、导入axios依赖，并设置在Vue的构造函数上（所有的实例对象都能通过this.$http访问）；2、form实例对象引用$http方法获取返回的参数，参数通过await和对象数值解构，传回一个data对象；3、验证：当data的staus=200或者不等时，调用$messge方法（通过plugin中element.js导入并创建在Vue构造函数上）提示成功或者失败
15. 实现登录跳转Home界面：1、sessionStorage（）中存入服务器传入的token值，用于验证用户处于登录状态，登录成功后，this调用$router.push(程序化路由)转到Home界面
16. 实现退出功能： 1、清除window.sesionStorage中的token；2、跳转到login页面
17. 装换分支，合并分支，提交master和和login源代码至github中

实现home主界面

1. 创建主界面布局，选用elementUI的布局容器，按需导入需要的插件（container，header，aside，main），设置背景颜色，查看布局，设置容器（el-container）占满全屏
2. 主页header布局：加入logo，文字，el-button；设置样式为flex，justify-content为space-between（占据两边布局）；align-item为center（垂直居中布局）；字体颜色为白色，大小30px；
3. 主页侧边栏布局：引用elementUI菜单栏相关插件，进行布局
4. 侧边栏的展开与折叠：使用按钮块，设置背景颜色，使用三元表达式（collapse）
5. ** 通过接口获取菜单数据 ** 1、创建axios拦截器，为请求添加授权操作，具体的方式为调用拦截器，返回config的请求头对象header中添加一个属性，属性为sessionStorage的token（登录时无值）；2、根据api文档向服务器发送请求，获取菜单数据
6. 渲染至菜单栏
7. 使用menu的router属性，将index设为转换的路由
8. 根据服务器返回的数据创建路由

完成users界面

9. 设计card中的头部框，设计，导入布局插件使用插件，设置全局样式，头部的margin
10. 获取用户列表数据、 使用axios发送请求（先定义一个发送总参数对象），使用await接收数据，存入接收数据的对象中，注意：将请求函数放在生命周期函数created函数中执行，且生命周期函数中不能用箭头函数，因为会改变this的指向
11. 创建表格：使用elementUI中的插件el-table创建表格，使用获取的数据（对象数组）渲染至表格中
12. 创建表格索引：加一项el-table-column ，设置type为index
13. 制作状态开关：在状态栏使用作用域插槽，设置template 属性slot-scope，slot-scope.row获取全部数据，并可以在子组件中进行双向绑定（scope.row.mg_state）
14. 加入操作按钮
15. ** 翻页效果的完成** ：使用el-pagination，其中两个函数size-change：返回一个改变的当前页显示条数，可与发送请求的数据pagesize绑定，current-change：返回改变页码，可以与返回请求的数据pagenum绑定
16. 修改用户状态： 暂定
17. 实现搜索功能：为输入框双向绑定发送的参数querry上，为搜索按钮绑定一个点击事件为发送请求getlist
18. 添加用户功能：1、实现界面（点击添加按钮出现添加用户的对话框，2、在对会话框主体区，写入添加用户的表单，为表单创建数据对象（‘FormData对象，使用：model绑定），为每个表单项创建表单数据（FormData.name等，使用v-model绑定）为表单添加相应的验证功能，创建表单验证规则rules：‘表单名’，在各个表单项中创建prop=“表单中创建的各个规则对象”.3、使用自定义验证规则；4、为取消按钮设置重置功能：监听对话框close事件，绑定函数（通过this.$refs.(ref名称).resetFilds方法清除表单内容）；5、添加表单预验证功能：与重置功能一样，通过ref引用属性调用validata函数，该函数的返回值即为预验证的boolean值；5、发送用户添加请求：采用post方法请求参数为表单存入的数据
19. 修改用户数据操作： 1、根据id查询数据，并传入editformdata中，2、用户预验证；3、使用put方式传入值，并调用函数刷新页面
20. 删除用户操作： 为列表中的删除按钮绑定点击删除函数（同时传递参数此时id数据），对接接口调用delete方法删除当前数据

完成权限管理功能，

权限管理界面

1. 完成基本界面布局
2. 请求数据
3. 将数据挂载到界面中
   角色管理界面
4. 1、简单的 面包屑导航，和card布局，添加按钮；2、请求角色数据；3、渲染到界面中
5. 1、完成下拉列表选项的界面数据渲染（使用作用域插槽获取当前数据对象的全部数据，使用pre标签格式化）；2、使用el-tree渲染数据；3、重难点：关于项目中角色权限的分配

完成分类管理的功能

1. 商品分类界面ui设计：1、界面设计：三块，面包屑导航，按钮，表格，分页栏；2、获取数据：先在data中定义一个发送请求的对象，再在methods中定义一个获取商品分类列表的函数，在生命周期函数中调用它，在data中定义一个数组（用于存储请求获得的数据），total用于接收获得的商品分类总数
2. 商品分类界面表格设计：1、导入插件（vue-table-with-tree-gird）,在main.js中引用进该依赖；2、在商品分类界面使用自定义组件名称创建表格，其中属性data为数据源，columns是一个为表格各列设置数据的数组对象（每一个对象为一列），对象中属性有lable，prop，width等；
3. 商品分类界面分页设计：1、使用el-pagination标签创建分页显示
4. 商品分类界面逻辑设计：1、分页设计：