VUE学习笔记，最近12，12上班，没得空继续学习vue，先记录一下

目标

1：能够基于 Vue 初始化项目
2：能够基于 Vue 技术栈进行项目开发
3：能够使用 Vue 的第三方组件进行项目开发
4：能够说出前后端分离的开发模式

学习目录
1：项目概述

根据不同的应用场景，电商系统一般都提供了 PC 端，移动APP，移动Web,微信小程序等多种终端访问方式

PC 端 ------------| -------|
PC 后台管理 -------------| 服 -------|
小程序 -------------| 务 -------| 数据库
移动Web -------------| 器 -------|
移动APP -------------| -------|
1.2 电商后台管理系统的功能
电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计、等业务功能。

                电商后台管理系统

|-------|-------|-------|-----------|-------|-------|
| | | | | | |
用 退 用 权 商 订 数
户 出 户 限 品 单 据
登 登 管 管 管 管 统
录 录 理 理 理 理 计
| |
|–|--| |–|--|
| | | | |
角 权 商 分 参
色 限 品 类 数
列 列 列 管 管
表 表 表 理 理

1.3 电商后台管理系统的开发模式 （前后端分离）

电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的SPA项目
【 向后端拿接口 】 【 向前端暴露接口 】
用户-----> 前端项目（SPA）----->后端项目-----> 数据库

1.4 电商后台管理系统的技术选型

前端项目技术栈
Vue，Vue-Router，Element-UI， Axios， Echarts
后端项目技术栈
Node.js，Express，Jwt【类似Session状态保持】，MysqL， Sequelize

2：项目初始化

2.1 前端项目初始化步骤
① 安装 Vue 脚手架
② 通过 Vue 脚手架创建项目
③ 配置 Vue 路由
④ 配置 Element-UI 组件库
⑤ 配置 axios 库
⑥ 初始化 git 远程仓库
⑦ 将本地项目托管到 Github 或码云中
【
1： ssh-keygen -t rsa -C “[email protected]”
会生成 ssh key 把里面的 public key 添加到仓库中
2： ssh -T [email protected]
3： git config --global user.name “*" // 码云仓库会给
4： git config --global user.email "” // 码云仓库会给
git status // 查看提交状态
git add . // 把当前目录下的所有文件进行提交
git commit -m “your message” // 本地添加文件
git remote add origin https://gitee.com/*****/test_code.git // 远程提交
git push -u origin master
】
2.2 后台项目的环境安装配置
① 安装 MySql 数据库 【 phpStudy 里面的数据库 】 【 vue-api-server.rar 数据库支持 】
② 安装 Node.js 环境
③ 配置项目相关信息
④ 启动项目
⑤ 使用 Postman 测试后台项目接口是否正常
【
到 vue_api_server 根目录下，运行 npm install
用 node app.js 让项目接口跑起来 【 没有报错，说明跑起来了。 】
电商管理文档里看一下 【 修改里面的 sql 默认登录密码，开启 mysql 服务等 】
】

3：登录/退出功能

一： 登录业务流程
① 在登录页面输入用户名和密码
② 调用后台接口进行验证
③ 通过验证后，根据后台的响应状态跳转到项目主页
二：登录业务的相关技术点
① http 是无状态的
② 通过 cookie 在客户端记录状态 【 不跨域的时候用 cookie or session 】
③ 通过 session 在服务器记录状态 【 不跨域的时候用 cookie or session 】
④ 通过 token 方式维持状态 【 跨域的时候用 token 】
3.2 token 原理分析：
登录页面输入用户名和密码进行登录
|>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>|
|<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<|
服务器验证通过后生成该用户的 token 并返回 |
|<<【客户端存储该 token】 | |
客户端 | 后续所有的请求都携带该 token 发送请示 | 服务器
|>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>|
| |
| 【 服务器端验证 token 是否通过 】>>|

3.3 登录页面的布局
通过 element-ui 组件实现布局
el-form 【 登录表单 】
el-form-item 【 账号，密码，按钮 】
el-input 【 账号，密码输入框 】
el-button 【 登录，重置按钮 】
字体图标 【 账号的坐着像，密码的小锁 】

先到 工作目录 查看工作区域是不是干净的
git status 【 on branch master Your branch is up to date with ‘origin/master’ your branch is up to date with ‘origin/master’. 】
【 开发一个新功能，把一个新功能都放到一个分支上，开发完成，再合并到主分支上，master branch 】
git checkout -b login 【 创建 login 分支 】
git branch 【 查看所有分支 【 星号，表示当前所处 】 】
【
清理里面初始的组件，创建登录组件
添加背景色
添加盒子
安装 less-loader , less 【 安装到开发信赖 】
加头像图片
添加里面的注册框
添加输入框里面的小图标 【 如果没有图片，就用其它的图标库 】

表单的数据绑定： form 表单绑定，再绑定里面的项
添加表单校验规则
① el-form 绑定:rules 绑定校验名称
② el-form-item 绑定 prop 项
③ data 中绑定校验规则 【 prop 里面的名称一定要跟下面 v-model 绑定的一致，不然无效(不报错) 】

重置表单对象
把表单赋值: ref=“表单引用对象”
调用函数， this.$refs.表单引用对象.resetFields()，即可清空校验（重置很多田地的意思）

表单的预验证
表单赋值： ref=“表单引用对象”
调用函数， this.$refs.表单引用对象.validate((boolean, callbackFun) => {
// 处理方法 如果验证通过就发送请示，不通过就不发送
})
如果只有一个值，它返回的是 boolean 函数

登录预验证 【 提交之前先验证 】
配置 $axios【发送验证的方式】,设置基准路径如果验证成功了，它$