front & back

vue/cli + ElementUI 环境搭建

vue/cli

ElementUI

# 安装node.js
apt install nodejs
# 安装npm
curl -qL https://www.npmjs.com/install.sh | sh
# 用npm再次安装node并进行覆盖，因为apt安装的版本通常较低，用npm可安装最新 版本
npm install -g node --force
# 使用vite创建项目(推荐) 
npm init vite@latest demo -- --template vue

  # 或通过之前的方式
  # 安装vue/cli
  npm install -g @vue/cli
  # 创建项目 webpack方式
  vue create demo

# 安装ElementUI
npm install element-plus --save 

node升级

# nodejs
npm install -g n
n stable  # 更新成最新的稳定版本(推荐)
n lts     # 长期支持版
n latest  # 最新版
n 10.14.2 # 指定安装版本

vue

1. v-model 数据双向绑定，只对表单控件标签的数据双向绑定有效
2. :model 相当于v-bind:model的缩写，v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。
3. v-bind:attr 可简写为:attr 绑定标签属性的值
4. v-on 可简写为@ 事件(处理函数)绑定
5. v-show 标签的显示或隐藏
6. v-if 标签的添加与删除
7. v-for 循环 item in items
8. v-if,v-else-if,v-else 分支控制
9. 计算属性computed 计算的结果会缓存下来，不用每次都计算(相比于用函数实现计算的优点)
10. 父子组件通信
    1. 父向子传：子组件props中设置属性字段，然后在父组件中传递属性值即可
    2. 子向父传：子组件中this.$emit(事件，值)，然后在父组件中监听此事件即可
    3. 同级组件传：新建一个Vue实例如event，发送组件用event.$emit()，接收组件用event.$on()
11. 过滤器
    1. 定义过滤器：Vue.filter(myFilter,处理函数handler)
    2. 使用过滤器：{{ data | myFilter }}

wrk压测

docker run -it --rm --net host williamyeh/wrk \
-d 10s -t 4 -c 100 --latency http://localhost:9090/api/v1/video

跨域请求

Ajax请求才会有跨域问题(协议、域名、端口之一不同)，解决方法：

1. jsonp
2. CORS:后端通过在header中添加Access-Control-Allow-Origin:serverName
3. nginx反向代理:缺点是可能携带不了cookies
   1. 跨域问题是浏览器的安全策略，是对浏览器来说的，只要浏览器请求的前端与后端地址不同就会跨域，浏览器就会阻止
   2. 所以只要让浏览器感觉前后端的请求是同一个协议域名端口就可以避免，通过而nginx作反向代理后，前后端的请求都是nginx服务器，所以也就不存在跨域了

OSS上传文件

1. OSS签名直传(服务端签名后，客户端可直接通过签名后的URL上传到OSS)：https://help.aliyun.com/document_detail/31926.html
2. 有一点不足就是服务端无法实时了解用户上传了多少文件，上传了什么文件。如果想实时了解用户上传了什么文件，可以采用服务端签名直传并设置上传回调。

cookie & session

1. cookie
   1. 内容存放在浏览器，通过请求头发送
2. session
   1. 内容存放在服务器或redis中，session ID存放在浏览器
   2. 还有一种相当于将cookie加密存放，在浏览器中保存加密后的内容，简单相当于cookie，但有一定的不安全性，因加密的密钥可能泄漏
3. token

哈希

1. 用户密码加密哈希：bcrypt
   1. 原理：加盐循环加密
   2. 循环次数可设置为12(加密时间大约0.5s)
2. 检索哈希：MurmurHash
   1. 优势：快速；对于规律性较强的key，其随机分布特征表现更良好
   2. 非加密性哈希(故不适用对密码哈希)，但适用于检索操作

其他

1. js中then处理正常返回值的情况，catch处理异常无返回值的情况，如服务器宕机等
2. ssh-copy-id，上传ssh密码凭证，不用每次连接都输密码
3. 因服务端是在docker中，所以当连接MySQL和redis时不能写127.0.0.1，因为此时的127.0.0.1代表的时docker中的地址，而不是宿主机的地址，所以应该填写宿主机的地址(172.x.x.x)，对于阿里云等服务器最好填写其内网地址而非公网ip
4. MySQL：推荐使用utf8mb4，此为真正的utf8，而mysql中的utf8最多只有3个字节

html

script标签用于加载js，link标签用于加载css

js

1. jquery，一种js库，让js更简单，更方便操作dom元素
2. ajax，一种异步请求技术，jquery有对其的封装
3. axios，一种ajax的实现库
4. node.js
   1. js只能在浏览器上运行，node.js可在系统上运行，打破了js的局限
   2. 单线程事件驱动指的是js执行代码的线程是一个，就是代码不能并发，但等待io事件是非阻塞的事件驱动
   3. 模块：一个文件
   4. 包：模块（文件）+package.json
5. js与cpp比较

   js	cpp
   原型语言	类语言
   关注本身	关注类别
   修改自身	继承
   静态语言	动态语言
   编译时类型检查	运行时检查