### 1.2 业务流程图
### 1.3 程序流程图
### 1.4 测试用例
## 第2课时
### 2.1 环境安装
1. 安装**node.js**
https://nodejs.org/en/download/
查看版本号 node –v、npm –v 出现版本号即安装成功。（如未出现，请重启电脑后再试）node8.9或以上版本
2. 管理nodejs版本（非必装）
执行命令安装：npm install -g n
n latest (升级node.js到最新版)
n stable（升级node.js到最新稳定版）
n 后面也可以跟随版本号，例如：$ n v0.10.26 或者 $ n 0.10.26
3. 全局安装**vue-cli3.0脚手架**
卸载：如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要先卸载：npm uninstall vue-cli -g
安装：npm install -g @vue/cli
查看版本号：vue -V，出现版本号即安装成功。
3.0对2.0版本的桥接：npm install –g @vue/cli-init
### 2.2 建立项目仓库
注意，可以使用git可视化管理工具[GitKraken](https://www.gitkraken.com) - 使用教程[1](https://www.cnblogs.com/brifuture/p/8823253.html) [2](https://www.cnblogs.com/brifuture/p/8830797.html) [3](https://www.cnblogs.com/brifuture/p/8869952.html) [4](https://www.cnblogs.com/brifuture/p/8877048.html) [5](https://www.cnblogs.com/brifuture/p/8947031.html) [6](https://www.cnblogs.com/brifuture/p/8969526.html) [7](https://www.cnblogs.com/brifuture/p/9009747.html) [8](https://www.cnblogs.com/brifuture/p/9021362.html) [9](https://www.cnblogs.com/brifuture/p/9052512.html)
### 2.3 构建项目
```shell
$ vue create vue-admin
```
## 第3课时
### 3.1 Vue-cli
### 3.2 vue.config.js
> `vue.config.js` 是一个可选的配置文件，如果项目的 (和 `package.json` 同级的) 根目录中存在这个文件，那么它会被 `@vue/cli-service` 自动加载。你也可以使用 `package.json` 中的 `vue` 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。区别于vue2.0-cli中在webpack.config.js中进行配置。
```js
// vue.config.js
module.exports = {
// 配置选项...
}
```
### 3.3 路由懒加载
> 路由懒加载指的是当路由被访问的时候才加载对应组件。
传统路由写法：
```js
import Home from "../views/Home.vue";
Vue.use([
{
path:'/',
name:'Home',
component: Home
}
]);
```
路由懒加载写法：
```js
Vue.use([
{
path:'/',
name:'Home',
component: ()=> import('../views/Home.vue')
}
]);
```
### 3.4 路由重定向redirect
```js
// 从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
// 重定向到名字为foo的组件
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
```
### 3.5 Element-UI
官网：[Element-UI](https://element.eleme.cn/#/zh-CN)
1. **安装依赖** - `npm i element-ui --S`
2. **全局引入**
```js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
## 第4课时
### 4.1 Vue文件规则
### 4.2 Vue基本指令
- **v-model**：在表单控件或者组件上创建双向绑定。
- **v-bind** **绑定属性**：绑定方式v-bind:attributeName 或 :attributeName
- **v-for**：基于源数据多次渲染元素或模板块，添加在循环出现的模版上而不是父元素
```vue
## 第8课时
### 8.1 axios拦截器
官网：[axios](http://www.axios-js.com) 安装 `npm install axios`
> 首先为了避免组件之间重复写接口，需要将接口脱离出来，形成单独的api文件引入即可。
> 然后定义拦截器，在对应的api中引入拦截器进行处理。
> 拦截器应用举例：
```js
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
```
一般会在请求拦截器中对请求添加一些参数：Tokey，userID......
### 8.2 模块引用
通过export default导出就不需要{}来import，但是这样只能导出一个函数；
```js
// file1.js
function service(){}
export default service;
// file2.js
import service from 'file1.js'
```
通过export导出时import需要{}，且可以导出多个函数；
```js
// file1.js
function service1(){}
function service2(){}
export {service1, service2};
// file2.js
import {service1, service2} from 'file1.js'
```
### 8.3 接口文档
详见：http://www.web-jshtml.cn/file/api.html
## 第9课时
### 9.1 环境变量与模式
默认情况下，一个 Vue CLI 项目有三个模式：
- `development` 模式用于开发环境
- `production` 模式用于生产环境（项目上线）
- `test` 模式用于测试
通过`process.env.NODE_ENV`的值development/production来知道此时处于何种环境下，并且根据当前的环境我们可以进行不同配置，举例如下：
```js
publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 基本路径
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist', // 输出文件目录
```
我们也可以在项目根目录创建一个名为 `.env.development` 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入，production同理。
**环境变量**：
- 以 `VUE_APP_` 开头 - 例如设置`VUE_APP_SECRET=secret`后，在构建过程中，`process.env.VUE_APP_SECRET` 将会被`secret`所取代。
- `NODE_ENV` - 会是 `"development"`、`"production"` 或 `"test"` 中的一个。
- `BASE_URL` - 会和 `vue.config.js` 中的 `publicPath` 选项相符，即你的应用会部署到的基础路径。
### 9.2 跨域设置
1. 本地`http://192.168.1.106:8080`调用`/getSms`接口则对应的URL为`http://192.168.1.106:8080/getSms/`
2. baseURL设置 - 相当于在访问的借口前加了一个前缀
- 如果axios的baseURL设置为`http://192.168.1.1`，则此时对应的URL为`http://192.168.1.1/getSms/`
```
const service = axios.create({
baseURL: 'http://192.168.1.1',
timeout: 1000, // 超时
})
```
- 如果axios的baseURL设置为`/api`，则此时对应的URL为`http://192.168.1.106:8080/api/getSms/`
```
const service = axios.create({
baseURL: '/api',
timeout: 1000, // 超时
})
```
3. 在vue.config.js中进行跨域配置 - 当访问域名时遇到/api，则讲前面的域名转换为target，即原本`http://192.168.1.106:8080/api/getSms/`变成了`http://www.web-jshtml.cn/productapi/api/getSms/`，此时我们不需要`/api`则借助pathRewrite将其转为空，最终访问urk为`http://www.web-jshtml.cn/productapi/getSms/`
```js
proxy: {
'/api': {
target: 'http://www.web-jshtml.cn/productapi', // 服务地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
```
## 第10课时
暂无
## 第11课时
### 11.1 setTimeout/setInterval
> 需求：验证码按钮在请求过程中禁用并显示“发送中”，在请求成功后，倒计时60s结束后显示“重新发送”。
通过setTimeout/setInterval来实现，但是要注意，setTimeout/setInterval在使用过程中要注意清除！！！
- setTimeout:clearTimeout(变量) 只执行一次
- setInterval:clearInterval(变量) 不断的执行，需要条件才会停止
## 第12课时
### 12.1 promise对象
> 主要了解四个内容，resolve，reject，all，race。
- 普通语法
```js
let promise = new Promise((resolve, reject) => {
// ...
})
promise.then(response => {
console.log('成功')
console.log(response)
}).catch(error => {
console.log('失败')
console.log(error)
})
```
- all方法 - 数组内promise全部成功(resolve)，才执行then，只要有一个返回(reject)不成功，就执行catch。
```js
Promise.all([promise1(true), promise2(true), promise3(true)]).then(response => {
console.log('全部调用成功');
}).catch(error => {
console.log('有些可能失败了');
})
```
- race方法 - 竞速，只有有一个率先改变状态，最终的状态就跟着改变。
```js
Promise.race([promise1(false), promise2(true), promise3(true)]).then(response => {
console.log('成功');
}).catch(error => {
console.log('失败了');
})
```
## 第13课时
### 13.1 密码sha1加密
安装完js-sha1后，`import sha1 from 'js-sha1'`导入，然后直接使用`sha1()`即可。
```shell
$npm install js-sha1
```
密码加密的流程：
1. 在前端预先加密一次
1. 登录的密码：123456（普通字符串）
2. 经过加密后：sha1('123456') == '541216ad5s4f5ds1f5asd4f65asd4' （加密后的字符串）
2. 后台加密
1. 接收到字符串：'541216ad5s4f5ds1f5asd4f65asd4'
2. 后台再次加密：md5('541216ad5s4f5ds1f5asd4f65asd4') == '8f9qwersd3g165y4d1sf3s1f6aew4'（最终的加密后的密码）
3. 登录 - 用户名与加密后的密码进行匹配，成功则登录，失败则提示
## 第14课时
暂无。
## 第15课时
### 15.1 Router路由
1. 在HTML中以a标签形式跳转 - 在template中设置`
**5个部分**
**1. state** —— 储存初始化数据 this.$store.state.xxxxx
**2. getters** —— 对State里面的数据二次处理（对数据进行过滤类似filter的作用）this.$store.getters.xxx
**3. mutations** —— 对数据进行计算的方法全部写在里面，在页面中触发时使用 this.$store.commit('mutationName')
**4. modules** —— 模块化Vuex
**5. actions** （异步）—— action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：
- action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步（视图触发Action，Action再触发Mutation），也可以处理异步的操作
- action改变状态，最后是通过提交mutation，this.$store.dispatch(actionName)
- 角色定位基于流程顺序，二者扮演不同的角色。Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求。
**模块化** - 参考资料:[Vuex 模块化使用](https://segmentfault.com/a/1190000019924674)
```js
export default new Vuex.Store({
modules:{
login,
info,
user
}
})
// 模块化后使用可以添加模块名
this.$store.state.moduleA.name;
// getter，mutation，action 他们默认都是注册在全局命名空间的，我们可以模块导出的时候加个 namespaced: true 使其成为带命名空间的模块，然后就可以通过模块名访问了，具体详见参考资料
this.$store.getters['moduleA/fullName'];
this.$store.dispatch('moduleA/ASYNC_SET_NAME', { name: "JJ" });
```
### 18.2 浏览器存储
**1. cookie_js**
```shell
$npm install cookie_js --save
```
```js
// 储存
cookie.set('key', 'value');
cookie.set({ key1: 'value1', key2: 'value2' });
// 获取
cookie.get('key');
cookie.get(['key1', 'key2']);
// 清除
cookie.remove('key');
cookie.remove('key1', 'key2');
cookie.remove(['key1', 'key2']);
```
**2. HTML5本储存**
- sessionStorage(关闭浏览器时即清除) 临时性
>存储大小：5M（数据量大小）；存储于客户端；只能存储字符串类型；主要存储一些比较简单的东西，或是小的交互；
```js
// 存储
window.sessionStorage.setItem("key","value");
// 获取
window.sessionStorage.getItem("key");
// 删除
window.sessionStorage.removeItem("key");
// 清空所有
sessionStorage.clear();
```
注意：在存取的时候需要对象和字符串进行转换，JOSN.parse() 字符串转为对象 + JSON.stringify() 对象转为字符串。
- localStorage(手动清除) 长期性；
```js
// 存储
window.localStorage.setItem("key","value");
// 获取
window.localStorage.getItem("key");
// 删除
window.localStorage.removeItem("key");
// 清空所有
localStorage.clear();
```
## 第19课时
### 19.1 守卫路由
> 常见用途：用户进入首页，如果未登录则自动跳转至登录页面。
```js
router.beforeEach((to, from, next) => {
/**
* to: 进入的页面
* from: 上一个页面
* next: 跳转页面
*/
})
```
注意：一定确保要调用 next 方法（也就是写了next方法），否则钩子就不会被 resolved，可能会陷入死循环。
- next()：参数为空，即执行了to里面的路由对象，且跳转不会再执行beforeEach，带参数的next跳转会再次触发beforeEach
- next('/')或者next({ path: '/' })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 toprop 或 router.push 中的选项。
- next(error)：如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
**Token登录检测举例**
```js
/**
* 1、直接进入非白名单路径如index的时候，参数to被改变成了 "/index"，触发路由指向，就会跑beforeEach
* 2、若token不存在，且不在白名单中，next 指向了login，再次发生路由指向，再跑beforeEach，参数的to被改变成了"/login"
* 3、白名单判断存在，则直接执行next()，因为没有参数，所以不会再次beforeEach。
*/
const whiteRouter = ['/login']; // 设置白名单
router.beforeEach((to, from, next) => {
if (getToken()) {
// token 存在
next()
} else {
// token不存在 - 跳转登录页面
if (whiteRouter.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
```
### 19.2 Token登录检测
## 第20课时
### 20.1 回调$emit与修饰符sync
子组件通过`vm.$emit(eventName,arg)`传递信息给父组件，而父组件上通过`
我是一个子组件，我在红色的海洋里！
```
```vue
// 父组件
如果父组件没用插入内容,我将作为默认出现
注意：watch只有数据发生改变才会执行，而created()阶段在数据实例化之前，此时改变 data() 中的数据是不会触发 change 事件的，无法进入 watch 代码部分，但是mounted()阶段在数据实例化之后，此时改变 data 中的数据是会触发 change 事件的，也就能被 watch 到。
### 23.3 v-slot插槽
1、匿名插槽 - 没有指定，全部显示
以下例子，在渲染中slot就会被替换成父组件中的插槽内容hello，注意子组件中几个slot就显示几个插槽内容：
```vue
方法1：父、子组件通讯 props、emit、.sync
```vue
// 下面的“属性名”和“方法名”要一一对应
// 父组件.vue
{{ data }}
```
方法2：中央事件总线 - 各级组件之间均可通讯
```js
// bus.js - 创建实例
import Vue from 'vue';
export default new Vue();
// 调用事件
import Bus from 'bus.js'
Bus.$emit('getTarget', 'hello world!');
// 注册事件
import Bus from 'bus.js'
Bus.$on('getTarget', target => {
console.log(target);
});
```
方法3：Vuex
> 略，详见vuex部分。
方法4：$attrs、$listeners
- $attrs从外层组件传到内部组件
> 举例：A组件嵌套B，B组件嵌套C；A传递属性到B，B可以通过this.$attrs获取，并且要继续传递给下一层，就需要在下一层组件上绑定`v-on='$attrs'`，注意如果B中通过props接收相同名称的属性， this.$attrs此时以及后续都不能读取到该名称属性。$listeners传递方法同理。
方法5：provide、inject - 跨级组件间的通信
```js
// 祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量
// 父组件
provide("customVal", "我是父组件向子组件传递的值");
// 子组件
inject("customVal"); // 通过this.customVal获取
```
方法6：$parent、$children
> 略，感觉较少用。
## 第25课时
### 25.1 动态路由
> 路由文件中可以设置默认路由(任何角色都能访问)和动态路由(按角色分配访问权限)，在路由守卫中判断用户角色并且动态分配路由权限。具体详见[guard.js](./src/router/guard.js)。
### 25.2 自定义指令
实现不同权限显示按钮的需求，除了可以通过[全局方法](#201 全局方法)（也就是通过注册全局方法，在按钮中v-if调用该方法并传入参数来判断是否显示），还可以是使用自定义指令的方法来实现。
**自定义指令5种状态**（操作DOM元素）
- bind：只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
- Inserted：被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
- Update：被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
- componentUpdate：被绑定的元素所在模板完成一次更新周期的时候调用
- Unbind：只调用一次，指令元素解绑的时候调用
```js
// 通过v-hello使用即可
Vue.directive("hello",{
bind:function(el,bingind,vnode){
el.style["color"] = bingind.value;
console.log("1-bind");
},
inserted:function(){
console.log("2-insert");
},
update:function(){
console.log("3-update");
},
componentUpdated:function(){
console.log('4 - componentUpdated');
},
unbind:function(){
console.log('5 - unbind');
}
})
```
注意自定义指令不要忘记在main.js中引入。
## 第26课时
### 26.1 keep-alive组件缓存
>vue内置组件，能在组件切换过程中保留内存中DOM元素，防止重复渲染DOM，提高性能。
原本路由：
```vue
### 28.2 Nginx安装
1. 连接并进入服务器
```shell
$ssh root@服务器地址
```
2. nginx安装
```shell
// 安装：
$yum install nginx
// 卸载
$yum remove nginx
// 查看是否安装成功
$nginx –v
// 查看文件位置
$nginx –t
// 指定配置文件 - 后续的配置操作将围绕其展开
$nginx –c 目录
// 停止
$nginx -s stop
// 退出
$nginx -s quit
// 重启加载配置
$nginx -s reload
```
### 28.3 CentOS7 防火墙
**基本操作：**
启动：systemctl start firewalld.service
停止：systemctl stop firewalld.service
重启： systemctl restart firewalld.service || firewall-cmd –reload
开启开机启动： systemctl enable firewalld
禁止开机启动：systemctl disable firewalld
查看防火墙状态：firewall-cmd --state
**端口操作：**
查看已开放的端口： firewall-cmd --list-ports
开启端口： firewall-cmd --zone=public --add-port=80/tcp --permanent
关闭端口： firewall-cmd --zone=public --remove-port=3338/tcp --permanent
查询某端口是否开启： firewall-cmd --query-port=80/tcp
重启防火墙： firewall-cmd --reload
### 28.4 iptables配置
注意：CentOS 7中默认是firewalld防火墙，如果使用iptables需要先关闭firewalld防火墙（1.关闭防火墙，2.取消开机启动）。
> #关闭防火墙 systemctl stop firewalld
>
> #取消开机启动 systemctl disable firewalld
>
> #查看状态 firewall-cmd --state
**安装iptables：**
检查是否安装了：service iptables status
安装iptables：yum install -y iptables
安装iptables-services：yum -y install iptables-services
注册iptables服务：systemctl enable iptables.service
开启服务：systemctl start iptables.service
查看状态：systemctl status iptables.service
**Iptables配置：**
\#配置filter表
\### 允许 已连接的数据包 进入
\### 允许 新建连接的 22 80 443 端口的 tcp 包 进入
iptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 22 -j ACCEPT
iptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp -m state --state NEW -m tcp --dport 443 -j ACCEPT
### 28.5 nginx配置
**proxy_pass**
- proxy_pass配置中url末尾有/时，nginx转发会将原url去除loc带/时ation匹配表达式 后的内容拼接在proxy_pass中url之后。
- proxy_pass配置中url末尾不带/时，如url中不包含path，则直接将原url拼接在proxy_pass中url之后；如url中包含path，则将原uri去除location匹配表达式后的内容拼接在proxy_pass中的url之后。
```js
// 举例 - 测试地址：http://www.web-jshtml.cn/productapi/getSms/
// 1、配置中url末尾有/时
// 代理后实际访问地址：http://www.web-jshtml.cn/api/getSms/;
location ^~ /productapi/ {
proxy_pass http://www.web-jshtml.cn/api/;
}
// 代理后实际访问地址：http://www.web-jshtml.cn/getSms/;
location ^~ /productapi/ {
proxy_pass http://www.web-jshtml.cn/;
}
// 代理后实际访问地址：http://www.web-jshtml.cn//getSms/;
location ^~ /productapi {
proxy_pass http://www.web-jshtml.cn/;
}
// 代理后实际访问地址：http://www.web-jshtml.cn/api//getSms/;
location ^~ /productapi {
proxy_pass http://www.web-jshtml.cn/api/;
}
// 2、配置中url末尾无/时
// 代理后实际访问地址：http://www.web-jshtml.cn/productapigetSms/;
location ^~ /productapi/ {
proxy_pass http://www.web-jshtml.cn/productapi;
}
// 代理后实际访问地址：http://www.web-jshtml.cn/api/getSms/;
location ^~ /productapi {
proxy_pass http://www.web-jshtml.cn/api;
}
// 代理后实际访问地址：http://www.web-jshtml.cn/productapi/getSms/;
location ^~ /productapi/ {
proxy_pass http://www.web-jshtml.cn;
}
// 代理后实际访问地址：http://www.web-jshtml.cn/productapi/getSms/;
location ^~ /productapi {
proxy_pass http://www.web-jshtml.cn;
}
```
**location匹配规则**
| **标识符** | **描述** |
| ---------- | ------------------------------------------------------------ |
| = | **精确匹配**；用于标准url前，请求字符串和url严格匹配。如果匹配成功，就停止匹配，立即执行该location里面的请求。 |
| ~ | **正则匹配**；用于正则url前，表示uri里面包含正则，并且区分大小写。 |
| ~* | **正则匹配**；用于正则url前，表示uri里面包含正则，不区分大小写。 |
| ^~ | **非正则匹配**；用于标准url前，nginx服务器匹配到前缀最多的uri后就结束，该模式匹配成功后，不会使用正则匹配。 |
| 无 | **普通匹配（最长字符匹配）**；与location顺序无关，是按照匹配的长短来取匹配结果。若完全匹配，就停止匹配。 |
>**优先级** - 多个location配置的情况匹配顺序为：首先精确匹配 = ；其次前缀匹配 ^~；其次是按照配置文件中的正则匹配；然后匹配不带任何修饰符的前缀匹配；最后交给/通用匹配；
```js
// 举例
location = / {
//精确匹配/ ，主机名后面不能带任何字符串
echo "规则A";
}
location = /login {
//精确匹配 /login 开头的地址，匹配符合以后，不在继续往下搜索
echo "规则B";
}
location ^~ /blog/ {
//非正则匹配，匹配/blog/后，停止往下搜索正则，采用这一条
echo "规则C";
}
location ~ \.(gif|jpg|png|js|css)$ {
//区分大小写的正则匹配 若匹配成功，停止往下搜索正则，采用这一条
echo "规则D";
}
location ~* \.png$ {
//区分大小写的正则匹配 ，停止往下搜索正则，采用这一条
echo "规则E";
}
location / {
//因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求
//如果没任何规则匹配上，就采用这条规则
echo "规则F";
}
location /blog/detail {
//最长字符串匹配，若完全匹配成功，就不在继续匹配，否则还会进行正则匹配
echo "规则G";
}
location /images {
//最长字符串匹配，同上
echo "规则Y";
}
location ^~ /static/files {
//非正则匹配，若匹配成功，就不在继续匹配
echo "规则X";
}
// 当访问根路径/的时候，比如http://www.web-jshtml.cn/ ，会匹配规则A。
// 当访如http://www.web-jshtml.c/login ，会匹配规则B。
// 当访如http://www.web-jshtml.c/login.html ，会匹配规则F。
// 当访如http://www.web-jshtml.c/blog/detail/3.html ，会匹配规则C。 - 按匹配优先级去找
```
**rewrite 重定向**
指令语法：`rewrite regex replacement [flag];`
| 字符 | 描述 |
| --------- | ------------------------------------------------------------ |
| \ | 将后面接着的字符标记为一个特殊字符或者一个原义字符或一个向后引用 |
| ^ | 匹配输入字符串的起始位置 |
| $ | 匹配输入字符串的结束位置 |
| * | 匹配前面的字符零次或者多次 |
| + | 匹配前面字符串一次或者多次 |
| ? | 匹配前面字符串的零次或者一次 |
| . | 匹配除“\n”之外的所有单个字符 |
| (pattern) | 匹配括号内的pattern |
rewrite最后一项flag参数：
| 标记符号 | 说明 |
| --------- | -------------------------------------------------- |
| last | 本条规则匹配完成后继续向下匹配新的location URI规则 |
| break | 本条规则匹配完成后终止，不在匹配任何规则 |
| redirect | 返回302临时重定向 |
| permanent | 返回301永久重定向 |
```js
// 举例：
// 表示匹配成功后跳转，执行永久301跳转
rewrite ^/(.*) http://www.web-jshtml.cn/ permanent;
```
## 第29课时
### 29.1 总结
### 29.2 Vue2.0重置
基础模版（方法使用this.XXX; 数据使用this.XXX）：
```js
export default {
name: "vue2.0_example",
components: {},
props: {}, // 其他地方使用props直接通过this.XXX即可
data() {
return {
myData: 0
}
},
computed: {
myData(){
return XXX;
}
},
watch:{
a(val, oldVal){ // 普通的watch监听
console.log("a: "+val, oldVal);
},
b:{ // 深度监听，可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);
},
deep:true // true 深度监听，
immediate: true // 初始化监听
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {},
methods: {
myFunc() {}
},
}
```
## 其他
### 1. 日报、周报总结
> 建议养成写日报的习惯，这样写周报就比较容易。
- 周报内容：
1、........
2、........
3、........
- 总结周报：
1、这周做了什么？
2、在项目上体现出来的业绩？
3、开发中遇到的问题以及解决方法和思路？
- 技术难点：如何攻克这些难点？
- 业务沟通：业务的想法，建议性东西
- 项目想法：项目上的自己的见解想法、建设性建议等
### 2. 项目管理
git仓库不同分支可记录进行管理：
## 课时总结
- 第1学时 了解产品从0到1的开发流程，产品经理、UI设计师、研发部、测试工程师
- 第2学时 安装node.js、vue3.0脚手架、创建github代码管理仓库、构建vue项目
- 第3学时 2.0与3.0的差异，vue.config.js、引入全局样式、router重定向、elementui依赖，git命令提交文件
- 第4学时 vue文件标准结构、v-for遍历、key、v-bind属性、@click事件、绑定class、基础数据类型、引用数据类型区别
- 第5学时 熟悉element-ui组件、制作表单验证、了解组件的用法
- 第6学时 封装校验js文件、webpack目录配置指向、export暴露方法、import引用、指令v-show、v-if的区别
- 第7学时 2.0语法转3.0、setup函数、reactive函数、ref函数、isRef、toRefs方法
- 第8学时 axios拦截器，模块管理API，export、export default的区别
- 第9学时 axios跨域配置、环境变量、接口文档
- 第10学时 登录接口接调试、响应拦截、elementui message、root参数
- 第10-1学时 登录接口接调试、响应拦截、elementui message、root参数
- 第11学时 按测试用例流程开发项目、注册接口联调、倒计时setTimeout、setInterval、超时timeout、登录接口调试、定时器知识点
- 第12学时 了解基础的Promise的方法、resolve、reject、all、race、then、catch
- 第13学时 请求头拦截、Request Headers添加参数、登录密码sha1加密、前端台加密流程、代码优化封装方法
- 第14学时 简单了解vue学习目标，具体学习什么东西，了解基础的指令
- 第15学时 后台首页搭建、router路由跳转、children属性、components组件、局部组件引入
- 第16学时 elementui的el-menu组件生成路由菜单、定义全局elemenui样式表、修改组个样式
- 第17学时 svgIcon制作、全局组件Vue.component、父子组件传值props、propsData、计算属性computed
- 第18学时 Vuex、State、Getters、Mutations、菜单导航收起、展开
- 第18-1学时 cookie存储，sessionStorage存储、localStorage存储、JSON.parse、JSON.stringify
- 第18-2学时 Vuex的action异步、同步、modules模块管理状态数据
- 第19学时 router.beforeEach路由守卫，检测toKen是否非法进入后台，to、from参数、next方法、Vuex命名空间
- 第19-1学时 登录存储token、token存在基础逻辑进入后台
- 第19-2学时 退出后台清除token、防止非法进入、GIT代码合并、提交当天开发的代码
- 第20学时 设计稿UI制作、element-ui组件、el-select、el-row、el-col、el-button
- 第20-1学时 设计稿UI制作、element-ui组件、el-table、el-pagination
- 第20-2学时 设计稿UI制作、element-ui组件、el-dialog、父子组件回调emit、修饰器sync、vue2.0、3.0写法、watch
- 第20-3学时 设计稿UI制作、element-ui组件、el-messageBox、自定义全局方法export install、VUE3.0组件重命名、watch
- 第20-4学时 设计稿UI制作、信息分类UI制作
- 第21学时 信息管理模块，一级分类接口、获取分类接口、onMounted、相关优化
- 第21-1学时 信息管理模块，删除接口、修改接口
- 第21-2学时 接口封装，vue3.0封装方式，vuex的actions方式，为后期维护方便
- 第21-3学时 添加信息接口、获取列表接口、分页处理请求数据、获取分类优化，变量优化
- 第21-4学时 单记录、批量删除接口、table组件数据加载优化、formatter属性返回值、日期组件配置数据格式、筛选条件处理
- 第21-5学时 信息编辑接口、添加子级分类接口、请求全部分类接口
- 第21-6学时 原型学习、原型版本查看、GIT命令控制代码版本迭代、合并代码、创建新分支
- 第22学时 router路由跳转、5种传参方式、vuex配合HTML5本地储存
- 第22-1学时 详细页数据读取、初始化数据、富文本编辑器、vue devTool依赖
- 第22-2学时 elementui upload组件结合七牛云第三方储存，七牛云建立空间、域名绑定、解析
- 第22-3学时 elementUI组件二次封装开发，组件封装的一些问题思考，什么时候需要watch，传参动态配置数据
- 第23学时 用户管理功能迭代、git分支创建、日常工作中的日报、周报总结、项目的管理
- 第23-1学时 用户管理UI制作、elementUI el-select组件封装、参数配置、组件命名冲突
- 第23-2学时 真正理解vue组件化开发、组件概念、优势、全局组件component、局部组件import、从源头解决BUG
- 第23-3学时 vue生命周期，组件生命周期，3.0改写2.0组件
- 第23-4学时 vue3.0生命周期，封装el-table组件
- 第23-5学时 封装el-table组件，v-slot插槽3种方式，数据绑定
- 第23-6学时 封装el-table组件，数据请求，整合url请求地址，统一api文件夹管理
- 第23-7学时 封装el-table组件，业务逻辑的拆分、组合
- 第23-8学时 elementUI 页码组件、业务逻辑拆分页码，配置项
- 第23-9学时 vue2.0 mixins混入、按需混入、全局混入
- 第24学时 省、市、区、街道组件封装、业务逻辑抽离
- 第24-1学时 省、市、区、街道组件封装、业务逻辑抽离
- 第24-2学时 省市区数据返回，el-radio、el-checkbox、获取角色管理API
- 第24-3学时 用户添加接口、json对象深拷贝、浅拷贝用法及注意事项
- 第24-4学时 组件通讯开始篇.sync、elemntUI Switch组件、用户列表、删除接口联调
- 第24-5学时 组件通讯完整版（重点知识）
- 第24-6学时 用户状态接口、编辑接口、搜索接口联调（上）
- 第24-7学时 用户状态接口、编辑接口、搜索接口联调（下）
- 第25学时 动态路由开发，以系统分配路由，系统列表接口
- 第25-1学时 动态路由开发，以角色分配路由
- 第25-2学时 按钮级权限
- 第25-3学时 按钮级权限，自定义指令处理
- 第26学时 组件缓存keep-alive、接口优化避免资源浪费
- 第26-1学时 BUG修复、监听路由变化、环境变量参数配置
- 第26-2学时 404页面
- 第26-3学时 404页面问题修复，退出接口联调
- 第27学时 BUG修复过程、优先级排序、项目流程阶段
- 第28学时 ECS云服务器购买、了解服务器的基础结构、nginx安装、端口配置、防火墙
- 第28-1学时 nginx配置、多项目部署、单项目部署、iptables安装配置
- 第28-2学时 nginx配置、日志查看，proxy_pass指向配置、调通接口数据、域名解析访问项目
------
如果发现本项目有错误，欢迎提交 issues 指正。