Vue

Vue3的一些基本配置

去掉ESLint校验：package.json中的extends去掉eslint:commends

引入icon图标

// main.js中
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// vue页面使用
<el-icon><edit /></el-icon>

Vuex

state: 存放数据
mutations: 同步操作，写方法用于改变state里面的数据，vue可以监听数据的改变进行更新（相当于methods）
actions：所有异步操作都放在这里，改变的数据不能够被vue监听
getters: 进行逻辑处理（相当于computed属性）
module：单一状态树，存放所有模块

新建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({state:{count: 0},mutations:{// state是必要参数addCount(state, number){state.count+=number}},actions:{setCount(content, payload){//增加setCount方法，默认第一个参数是content，其值是复制一份store,第二个是自定义参数return new Promise(resolve => {setTimeout(()=>{content.commit('addCount', payload);resolve();}, 1000);})}},getters:{// 不能改变state里面的值alertCount(state){return `当前值${state.count}`}}
})export default store;

页面使用

<template><div><b>count: {{this.$store.state.count}}</b></div><button @click="addCount">count++</button>
</template>
<script>
export default {name: 'HelloWorld',mounted() {console.log(this.$store.state.count)		// 获取state值console.log(this.$store.getters.alertCount)	// 执行getters里的方法},methods:{addCount() {this.$store.commit('addCount', 1)		// 执行mutation里的方法}}
}
</script>

简写vuex

采用解构方法import {mapState, mapMutations, mapGetters} from "vuex";

<script>
import {mapState, mapMutations, mapGetters} from "vuex";export default {name: 'HelloWorld',mounted() {console.log(this.count)		// 解构后，采用this.xx调用vuex的内容console.log(this.name)},methods:{...mapMutations(['addCount']), //mutations和actions要在methods里面解构...mapActions(['setCount']),btnAdd() {this.addCount(1)}},computed:{...mapState(['count', 'name']),	//state和getters要在computed里面解构...mapGetters(['alertCount']),}
}
</script>

异步action在页面的使用

async mounted() {console.log(`旧值: ${this.count}`)await this.$store.dispatch('setCount', 3);	// 默认写法await this.setCount(3);	// 解构写法console.log(`新值：${this.count}`)
},

v-model低层原理

<h2>v-model低层原理</h2>
<input placeholder="请输入数值" id="username" />
<p id="uName"></p>
<script>let obj={}Object.defineProperty(obj, 'username', {// 取值get:function (){console.log("取值")},// 设置值set(val) {console.log(val)document.getElementById('uName').innerText = val}document.getElementById('username').addEventListener('keyup', function (){// 监听事件obj.username = event.target.value;// console.log(event)})</script>

vue理解

渐进式框架，声明式渲染，借鉴MVVM思想
采用虚拟dom（不会重新渲染所有页面，先进行对比，有更新的部分会进行重新渲染（render函数））
高内聚，低耦合，使用组件化开发
computed属性：如果多次调用某个方法，computed里面只会计算一次，减少了资源消

vue2.0生命周期

创建前后：组件实例被创建
挂载前后：组件挂载到实例
更新前后：组件数据更新
销毁前后：组件实例销毁

vue性能优化

数据层级不能过深，合理设置响应数据
v-if 和 v-show合理选择
使用数据缓存，不频繁取值
分页、虚拟滚动

vue组件通信

props通信：子组件通过props接受来自父级组件的参数
$emit: 子组件传递数据给父组件
ref：父组件使用子组件的时候设置ref(ref = ‘foo’)，通过 this.$refs.foo 获取子组件实例
EventBus: 兄弟组件传值
$parent 或 $root: 通过共同祖辈搭建通信桥梁
provide 与 inject
父级组件：
```
provide(){  return {  foo:'foo'  }  
}  
```
子组件：
```
inject:['foo'] // 获取到祖先组件传递过来的值
```
父组件向子组件动态传参

需求
- 父组件是文章管理列表，带有一个编辑按钮
- 子组件（editor）是一个内嵌的富文本编辑器：点击编辑按钮，弹出Dialog框，富文本编辑器的内容显示为当前文章内容(暂且设为content属性)
- 我们需要传递content属性到子组件(editor)，但是子组件中v-model无法绑定props中的content，因此子组件中的文本内容绑定的是data中的html属性，我们需要将content传递并且赋值给html。
当前问题
- 按照props传参(子组件第一次可以接收content并且更新页面内容，当时当我们点击编辑其他文章，这时候content虽然有变化，但是无法更新到子组件html属性上面（相当于没有监听变化），导致页面无法更新到当前文章的content，仍然显示的是之前的content)
  
  父组件
```
<el-form-item label="内容"><WangEditor ref="editor" :content="formLabelAlign.content" />
</el-form-item>
```
  子组件
```
<template><Editorstyle="height: 500px; overflow-y: hidden;"v-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default{name: 'WangEditor',data() {return {html: this.content,}},props:['content'],
}
</script>
```
解决办法

在子组件加上content的监听，当content变化，再给文本编辑器内容绑定的html属性赋值.
```
watch:{content(newVal, oldVal){console.log('content change')console.log(newVal)this.html = this.content}
},
```

vue-router

1.路由守卫

A.全局路由

全局使用

router.beforeEach((to, from, next)=>{})：路由跳转前执行的操作
to：需要跳转的路径
from：当前页面路径
next：执行当前操作

// 登录拦截器
router.beforeEach((to, from, next) =>{if(to.path == '/login' || to.path == '/front/home'){next();}else{// 不是登录页面localStorage.getItem("user")?next():next("/login")}})

router.beforeResolve
router.afterEach((to, from) =>{})：路由跳转后
一般用于跳转后更改页面标题、声明页面等辅助功能

B.路由独享守卫

某个单页面渲染使用

boforeEnter(路由独享的守卫)

const routes = [{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {// reject the navigationreturn false},},
]

C.组件路由

组件渲染的时候使用

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

2.hash和history的区别

hash模式

带#号，改变URL时，页面不会重新加载
利用window.onhashchange事件实现，每次改变hash值，浏览器访问历史会新增一个记录
hash值是URL中#后面的值，不会传递给服务器
使用"后退"按钮，返回上一个页面

history模式
通过window.history实现页面无刷新跳转
路径会随http请求发送给服务器，因此前端URL必须和请求的后端URL一致，否则404
404举例
当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。

3.this.$router.push打开新页面

	// 默认写法（会覆盖当前页面）this.$router.push({path: '/news',query:{a_id: val.a_id, title: '旅游资讯', sub_title: val.title, date: val.date}})// 打开新页面的写法（使用resolve + window.open）let routeData = this.$router.resolve({name: 'news',query: { a_id: val.a_id, title: '旅游资讯', sub_title: val.title, date: val.date }})window.open(routeData.href, '_blank')

computed和watch的区别

computed是计算属性，函数内的变量可以缓存，除非变量发生变化，才会重新进行计算
watch主要是监听，每次值变化就会立即进行回调。

v-show和v-if的区别

v-show是控制display来让元素隐藏（会渲染到页面，不会触发生命周期）
v-if显示隐藏时是把整个元素删除（为true才会渲染组件，会触发生命周期）

created和mounted请求数据，有什么区别

created：渲染前调用，先初始化属性，再做渲染
mounted：渲染完成之后，先初始化页面，再对元素节点进行操作（这里请求数据，可能会出现闪屏问题）

vue中的修饰符

事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认行为
- .self 只有在event.target是当前元素触发
- .capture
- .once 事件只触发一次
- .passive 立即触发默认行为
按键修饰符
- .keyup .keydown
系统修饰符
鼠标修饰符
表单修饰符

MVC

view(视图层)-controller(控制器)-model(数据模型)

view主要用于UI界面展示和响应用户交互，controller用于监听数据改变和处理用户交互，model用于存放数据

MVVM

model-viewmodel-viewcontroller

在MVC的基础上，把contrler的数据和逻辑处理部分抽离出来，放到viewmodel中，是model与controller沟通的桥梁。

JS

JS组成三部分

ECMAScript: JS的核心内容，描述了JS的基础语法(var for 数据类型…)
文档对象模型(DOM)
浏览器对象模型(BOM): 对浏览器窗口访问和操作

location对象

包含了当前url的属性，主要有

protocol（‘http:’）协议
host(‘www.xx.com’) 网址
hostname(带了端口号)
path (/home/list) 访问路径
search (‘?id=123456&sort=discount’) 参数
hash (‘#title’)

innerText 和 innerHTML的区别

innerText不识别html标签，不保留空格和换行
innerHTML识别html标签，保留空格和换行

构造函数

函数名首字母大写
不需要return就可以返回结果
调用函数必须使用关键字new

// 构造函数
function Star(name, age, gender){this.name = name;this.age = age;this.gender = gender;
}
var dz = new Star('DZ', 18, 'male');
console.log(dz.age)

cookie sessionStorage localStorage的区别

三者均保存在本地浏览器
cookie：存储量小，由服务器写入，若设置了固定的时间，时间过后失效
session：页面关闭自动清除（主要用于检测用户刷新页面）
localStorage：一直保存在本地（存储不易变动的数据），不会自动清除

token的登录流程

客户端用账号密码请求登录
服务器验证请求，成功之后，给客户端签发一个token，
客户端将token保存在本地(localstorage或者cookie中)
每次客户端发送请求，都要携带token
服务端收到请求，需要先验证token，验证成功，给客户端返回请求数据

Token存localStorage还是session里面？

存localStorage里面，每次请求接口都需要把它当做字段传到服务器（容易被XSS攻击）
存cookie中，会自动发送，不能跨域（CSRF攻击）

基本&引用数据类型(JS内置对象)

基本数据类型：string，number，undefined，null，boolean，symbol，bigint
保存在栈内存中，保存的是一个值
引用类型：object（普通对象）Array Function Date
保存在堆内存中，保存的是引用数据类型的地址(多个引用会同时改变)。例如下：
```
let obj = {name: 'xm',age: 18
}
let obj1 = obj
obj1.name = 'change'
console.log(obj)
console.log(obj1)
```

常用的对象

Math(abs, ceil, sqrt, max, min…)
Date(getYear, getMonth…)
Array(push, foreach)
String(concat, length, slice, split)

操作数组的方法

push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter() reduce() isArray() findIndex()
改变原数组的方法：push() pop() sort() reverse() unshift() shift() splice()

数据类的检测方法

typeof() 判断基本数据类型
instanceof() 判断引用数据类型
constructor 基本可以判断基本数据类型和引用数据类型
```
console.log(('abc').constructor === String)
```

Object.prototype.toString.call() 可以判断所有数据类型

var opt = Object.prototype.toString
console.log(opt.call(2))     // [object Number]
console.log(opt.call('abc')) // [object String]
console.log(opt.call([]))   // [object Array]
console.log(opt.call({}))   // [object Object]
console.log(opt.call(true)) // [object Boolean]

闭包

优点：可以重复利用内部变量，不会污染全局变量，一直保存在内存中，不会被垃圾机制回收
缺点：闭包较多的时候，会消耗内存，导致页面性能下降，在IE浏览器会导致内存泄漏
应用：防抖（防止重复点击，n秒后执行事件，在n秒内重复点击，从最后一次点击开始计时 — 点击事件）节流（n秒内重复点击，只有一次生效 – 滚动条）

function fn(){let name = 'xiaoxie'function getName(){alert(name)}getName()
}
fn()

内存泄漏

JS里已经分配内存地址对象，但由于长期没办法回收和清除释放，造成长期占有资源的情况，导师运行速度缓慢甚至崩溃。

因素

未清空的定时器
过度的闭包
一些元素没被清除

事件委托（事件代理）

原理：利用事件冒泡的机制实现，把子元素的事件绑定到父元素身上

父元素添加addEventListener('click', 函数名, true/false) 默认true， false代表阻止（子元素）冒泡

原型链

原型链：一个实例对象在调用属性和方法的时候，会以此从实例本身=》构造函数原型 =》原型的原型去查找

以下例子的原型链：p1 -> Person -> Object -> null

原型就是一个普通的对象，它是为构造函数的实例共享属性和方法，所有实例中引用的原型都是同一个对象

<!--原型-->
function Person(){this.say = function (){console.log('sing')}
}
let p1 = new Person()
let p2 = new Person()
p1.say()
p2.say()

例：say调用了两次，在内存中占用了两个（如果多次使用，会造成资源浪费），为了解决这个问题，原型：将方法挂载到prototype上，所有实例共享这个方法，减少了内存消耗。

__proto__: 可以理解为指针，实例对象中的属性，指向了构造函数的原型(prototype)

p1.__proto__ === Person.prototype // 返回true

例如下:

<!--原型-->
function Person(){this.say = function (){console.log('sing')}
}
Person.prototype.run = function (){console.log('跑步')
}
let p1 = new Person()
let p2 = new Person()
//p1.say()
//p2.say()
p1.run();
p2.run();

new关键字

实现new关键字

    function newFun(Fun, ...args){// 1.创建空对象let obj = {}    // 引用类型// 2.把空对象和构造函数通过原型链进行连接obj.__proto__ = Fun.prototype// 3.把构造函数的this绑定到新的空对象身上const res = Fun.apply(obj, args)    // 值类型// 4.根据构造函数返回的类型判断，如果是值类型，返回对象；是引用类型，返回这个引用类型return res instanceof Object ? res:obj;}// 测试newFunfunction Person(name){this.name = name}Person.prototype.printName = function (){console.log(this.name)}let p1 = newFun(Person, 'xym')p1.printName()

JS的继承

原型链继承（子类继承父类，new出来的实例拥有父类相同的属性和方法）
缺点：无法向父类传参
```
    function Person(){this.info={name: '张三',age: 12}}function Child(){}Child.prototype = new Person();
```

构造函数继承（使用call / apply 方法实现继承，在子类里面调用父类）
缺点：无法实现函数的复用

function Person(){this.info={name: '张三',age: 12}
}
function Child(){Person.call(this)
}
let c1 = new Child();
c1.info.nick = 'nick name'
console.log(c1.info)

组合继承（调用了两次父类构造函数）

function Person(gender){this.info={name: '张三',gender: gender,age: 19}
}
Person.prototype.getInfo = function (){console.log(this.info)
}
function Child(gender){Person.call(this, gender)   // 构造函数继承
}
Child.prototype = new Person()  // 原型链继承
let c1 = new Child('男')
c1.info.nickname = '小张'
c1.getInfo()let c2 = new Child('女')
c2.info.nickname = '小红'
// c1 和 c2 互不影响
c1.getInfo()
c2.getInfo()

ES6使用class关键字继承父类
某些浏览器可能不支持

class Animal{constructor(kind) {this.kind = kind}getKind(){return this.kind}
}// 继承animal类
class Cat extends Animal{constructor(name) {// 子类构造方法必须调用super方法super('cat');this.name = name}getCatInfo(){console.log(this.name+' : '+this.getKind())}
}
let cat = new Cat('buding')
cat.getCatInfo()

  ## JS设计原理- JS引擎
- 运行上下文
- 调用栈
- 事件循环
- 回调## JS中的this指向- 全局对象的this指向window
- 全局作用域/普通函数中this指向window
- this永远指向最后调用他的对象
- apply call bind可以改变this指向
- 箭头函数this指向箭头函数外的一层## setTimeout和setInterval最小时间- setTimeout   4ms
- setInterval   10ms## promise- 解决回调问题```js
const myPromise = new Promise((resolve, reject) => {setTimeout(() => {resolve('foo');}, 300);
});myPromise.then(value => {console.log(value)
})

跨域？如何解决跨域？

跨域：当前页面接口访问的 协议/域名/接口 不同，（浏览器的同源策略）。(浏览器能发出请求，服务器能响应数据，返回的时候被浏览器拦截了)

解决办法

script调用js文件
服务器实现cors接口，前端正常访问就行。服务器收到前端请求，设置Access-Control-Allow-Origin

异步操作实现

回调函数callback

function f(x){console.log(x)
}
function printTime(){setInterval(function (){console.log('print fn exe')c = 1}, 3000)
}
var c = 0
printTime()
f(c)

js内部执行不是按照顺序的，因此这里先打印0,再输出"print fn exe"。采用回调函数实现异步

<script type="text/javascript"><!--回调函数，实现异步操作-->function f(x){console.log(x)}function printTime(callback){setInterval(function (){console.log('print fn exe')c = 1callback(c)}, 3000)}var c=0//方法一printTime(f)// 方法二printTime(function (x){console.log(x)})
</script>

async / await

function print(time){setTimeout(function(){console.log(time);return 1;},time)
}
async function fun(){let a = await print(1000);// let b = await print(3000);// let c = print(2000);console.log(a);// console.log(1)setTimeout(()=>{alert(a)}, 3000)
}
fun();

setTimeout(利用定时器实现异步操作)

ES6新特性有哪些？

新增了箭头函数
不能作为构造函数使用，不能使用new
没有arguments
不能用call，apply，bind改变this指向
this指向外层第一个函数的this
新增块级作用域（let 和 const）
不存在变量提升(在变量声明之后才能使用)
存在暂时性死区问题
块级作用域的内容
不能在同一个作用域内重复声明
Promise
解决回调地狱问题
自身有all，reject，resolve，race等方法
原型上有then，catch
把异步操作队列化
三种状态：pending-初始状态，fulfilled-操作成功，rejected-操作失败
async/await
同步代码做异步操作
解构赋值
从对象或者数组中取值，然后给变量赋值
set和map
set：数组去重
map的key类型不受影响
定义类语法糖(class)
数据结构(symbol)
模块化(export，import)

call、aply、bind区别

都能改变this的指向
call和aply功能类似，传参方法不同
call传的是一个参数列表
aply传的数组

实现深拷贝

深拷贝就是完全拷贝一个新的对象，会在堆内存开辟新空间，拷贝的对象被修改后，原对象不受影响

主要针对引用数据类型

扩展运算符
JSON.parse(JSON.stringify())

递归实现

// 深拷贝
let obj = {name: '张三',age: 18,say(){console.log('say name')},arr:[[1, 2], 3, 4, 5]
}
// let obj1 = {...obj}     // 方法一：扩展运算符
// obj1.name = 'xxx'
// console.log(obj)        // name : "张三"
// console.log(obj1)       // name : 'xxx'// 方法二：json.parse   =>  不能拷贝函数，即say没有拷贝进来
// let obj2 = JSON.parse(JSON.stringify(obj))
// obj2.name = 'aaa'
// console.log(obj)
// console.log(obj2)// 方法三 递归实现深拷贝
function exten(origin, deep){let res = {}if(origin instanceof Array) res = []    // 判断数组, 更改返回类型for(let key in origin){let value = origin[key]res[key] = (deep && typeof value == 'object' && value != null) ? exten(value, deep):value}return res
}
let obj3 = exten(obj, true)
obj3.name = 'bbb'
obj3.arr[0].push('ccc')
console.log(obj)
console.log(obj3)

ajax

ajax：交互式网页开发技术，在不重新加载整个页面的情况下，与服务器交换数据并更新部分内容

通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过js操作dom更新页面

创建XmlHttpRequest对象 xml
xml.open()和服务器建立连接
xml.send()发送数据
xml.onreadystate() , xml.change()事件监听服务器和通信状态
接收并处理服务器响应的数据
更新数据到html页面

axios封装

npm install axios  // 安装

创建service.js配置文件

import axios from 'axios'
import { Message, Loading } from 'element-ui'
const ConfigBaseURL = 'http://localhost:8080/' //默认路径，这里也可以使用env来判断环境
let loadingInstance = null //这里是loading
//使用create方法创建axios实例
export const Service = axios.create({timeout: 7000, // 请求超时时间baseURL: ConfigBaseURL,method: 'post',headers: {'Content-Type': 'application/json;charset=UTF-8'}
})
// 添加请求拦截器(请求前执行)
Service.interceptors.request.use(config => {loadingInstance = Loading.service({lock: true,text: 'loading...'})return config
})
// 添加响应拦截器(服务器响应后执行)
Service.interceptors.response.use(response => {loadingInstance.close()return response.data
}, error => {console.log('TCL: error', error)const msg = error.Message !== undefined ? error.Message : ''Message({message: '网络错误' + msg,type: 'error',duration: 3 * 1000})loadingInstance.close()return Promise.reject(error)
})

main.js使用

import {Service} from '@/utils/service'Vue.prototype.request = Service	//将axios放在vue的this上(vue2)
app.config.globalProperties.request = Service //(vue3)

使用

// post方法
this.request.post(`/menu/delete?id=${val}`).then(res=>{// 请求成功}else{// 请求失败}
});
// get方法
this.request.get("/echarts/getList").then(res =>{console.log(res)
})

创建http.js

import axios from "axios";//创建一个axios的对象
//生成一个axios的实例
const http=axios.create({baseURL:"http://localhost:8080/",// baseURL会在发送请求的时候拼接在url参数前面timeout:3000,//请求超时
});
export default http;//导出

main.js使用

import axios from "axios";
const app = createApp(App)
app.config.globalProperties.axios = axios

单页面使用

getWeather:function (){this.axios.get(url).then(res =>{// console.log(res)})}

封装API的js文件使用（异步调用）
封装函数js文件

import http from "./http";
export const getWeather = ()=>{return new Promise((resolve, reject)=>{http.get(url).then(res =>{resolve(res)})})
}

  页面调用

// 1.引入
import  {getWeather} from '../request/HomeHeader.js'
// 2.获取返回值
let res = getWeather()
// 方法一 采用promise实现异步
res.then((res)=>{console.log(res)
})
// 方法二 采用async/await实现异步async created() {let res = await getWeather()console.log(res)}

get和post请求

get是请求数据，post是提交数据
get的请求参数放在url中，不安全，post请求参数放在body中
get请求会缓存，post不会缓存
刷新或回退页面get不会重新请求，post会重新请求
get请求只能进行url编码，post支持多种编码方式

promise和async/await的区别是什么

都是处理异步请求的方式
async/await是基于promise实现的
promise是返回对象，使用then，catch方法处理和捕获异步请求，链式书写，造成代码重叠，维护下差
async/await使用try，catch捕获异常

SVG格式

基于XML语法的图像格式，可缩放矢量图，本质是文本文件，无论缩放都不会失真

JWT

JSON Web Token 通过JSON形式作为在web应用中的令牌

JWT认证流程

前端发送登录请求给接口
服务器核对账号密码成功，把用户id等信息作为jwt负载，和他和头部进行base64编码，形成jwt
前端每次请求都会把jwt放在http请求头的Authorization字段内
服务器验证jwt的有效性，返回对应结果

JSON

JSON是一种纯字符串形式的数据，适合网络传输

JSON.parse()
JSON.stringfy()

数据没有请求过来时，该怎么做？

给数据设默认值，最后进行判断

无感登录

用户不需要重新登录，优化用户体验

方案如下

在响应器中拦截，判断token过期后，调用刷新token的接口
后端返回过期时间，前端判断token过期时间，去调用刷新token的接口
设置定时器，定时刷新token

大文件上传

采用分片上传思想

把文件按照一定规则分块，分割成相同大小的数据
初始化一个分块上传，返回本次上传唯一标识
按照一定规则把各个数据上传
服务器判断文件完整性，完整就把文件块合并

断点续传

websocket（vue2.0实现）

前端
登录页：输入用户信息，进入聊天室
聊天页：输入消息，点击按钮发送

<template><div><ul><!--   消息展示   --><li v-for="item in msgList" :key="item.id"><div>用户：{{item.username}}</div><div>时间：{{new Date(item.dateTime)}}</div><p>消息：{{item.msg}}</p></li></ul><input type="text" placeholder="请输入消息" v-model="msg"><button @click="sendMsg">发送</button></div>
</template><script>
// npm install ws
const ws = new WebSocket('ws://localhost:8080')export default {name: "Two",data(){return{msg: '',username: '',msgList: []}},methods:{sendMsg(){const msg = this.msgws.send(JSON.stringify({id: new Date().getTime(),username: this.username,dateTime: new Date().getTime(),msg: this.msg}))},handleWsOpen(e){console.log('websocket open', e)},handleWsClose(e){console.log('websocket close', e)},handleWsError(e){console.log('websocket error', e)},// 接收消息handleWsMessage(e){// console.log('websocket message', e)let msg = JSON.parse(e.data)this.msgList.push(msg)console.log(msg)},},mounted() {this.username = localStorage.getItem('username')if(!this.username){this.$router.push('/login')}// 事件绑定ws.addEventListener('open', this.handleWsOpen.bind(this), false);ws.addEventListener('close', this.handleWsClose.bind(this), false);ws.addEventListener('error', this.handleWsError.bind(this), false);ws.addEventListener('message', this.handleWsMessage.bind(this), false);}
}
</script>
<style scoped></style>

后端
新建index.js文件

const Ws = require('ws')// 立即执行函数
;((Ws)=>{const server = new Ws.Server({port: 8080});	// 要和前端监听同一个端口// 初始化函数const init = ()=>{bindEvent();}function bindEvent(){server.on('open', handleOpen);server.on('close', handleClose);server.on('error', handleError);server.on('connection', handleConnection);}function handleOpen(){console.log('wb open')}function handleClose(){console.log('wb close')}function handleError(){console.log('wb error')}// 消息接收function handleConnection(ws){console.log('wb connection')ws.on('message', handelMsg)}// 消息处理function handelMsg(msg){// c : 表示每个客户端let oMsg = msg.toString()server.clients.forEach((c)=>{c.send(oMsg)})}init()
})(Ws);

HTTP协议以及浏览器原理

http协议

web端发送请求报文(请求头、URL、请求方法、请求数据、协议版本) ==》服务器端返回数据（响应头、协议版本、响应数据、响应代码(success/error)、服务器信息）

http协议是无状态协议导致了 cookies的产生（用于验证服务器的合法性）

http协议版本

1.0 只能
1.1
2.0

浏览器原理

输入网址
DNS域名解析（有该网页则返回，没有返回错误信息）
TCP三次握手（建立连接）
HTTP请求（获取资源） =》 HTTP响应
浏览器渲染页面。HTML解析 =》 DOM树，css =》css规则树，两者结合渲染成render树，浏览器通过render对页面进行渲染布局

http缓存

强缓存（本地缓存）和协商缓存（弱缓存）
网页请求资源
- 没有缓存 =》使用服务器资源 =》返回请求资源。
- 有缓存 =》强缓存命中 =》使用缓存内容 =》返回资源。
- 强缓存未命中 =》协商缓存命中，使用缓存内容；未命中 =》服务器资源 =》返回资源

浏览器如何渲染页面

html解析成DOM树，CSS解析成CSS规则树
浏览器将CSS规则树附着在DOM树上，结合生成Render渲染树
生成布局：浏览器解析渲染树节点的位置和大小，在屏幕上渲染出所有节点（重排）
将布局绘制在屏幕上，生成整个页面（重绘）

Http请求头和响应头

请求头
- Accept(浏览器可接受服务器返回数据类型, text/html, ‘/’ 代表所有)
- Accept-Encoding(gzip, deflate 申明浏览器接受的编码方法)
- Connection(keep-alive / close , 当浏览器与服务器建立了TCP连接，keep-alive表示不断开，下次请求服务器使用相同的TCP连接)
- Host(服务器ip和端口)
- Referer(浏览器的地址)
- User-Agent(浏览器的操作系统和名称、版本)
- Cookie（存储用户信息）
响应头
- Content-Type(Content-Type：text/html;charset=UTF-8):资源文件的类型以及编码方式
- Content-Encoding: 编码格式
- Date：服务器时间
- Server：服务器信息
- Connection(keep-alive/ close)
- Access-Control-Allow-Origin：指定可以访问服务器的网址(Access-Control-Allow-Origin: *代表所有网站可以跨域资源共享)
- Access-Control-Allow-Methods(GET, POST, DELETE, PUT)
- Access-Control-Allow-Credentials(是否允许发送cookie)

同源策略

协议(http)+域名(www.a.com)+端口号(8080)三者一致，其中一个不同就不是同源，需要跨域

跨域的方法

JSONP（利用script标签不存在跨域的方式）
CORS(服务器配置响应头Access-Control-Allow-Origin)
websocket
反向代理(中间件)

CSS

flex布局

flex 表示 flex-grow（设置扩展比例）, flex-shrink（设置收缩比例）, flex-basis（不伸缩的情况下子容器的原始尺寸）

flex:1: (1, 1, 0%) 不管内容多少，都是平分空间

flex:auto: (1, 1, auto) 根据内容的大小来分，不是均分的（除非内容都是一样，才均分）

flex:0: （0, 1, 0%）可缩小，不可扩大

flex:none:(0, 0, auto) 不可扩大不可缩小

CSS样式优先级（权重）

!import > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符

盒子模型

在html页面中所以元素都可以看成是一个盒子

盒子组成

内容content
内边距padding
边框border
外边距margin

盒模型类型

标准盒模型 margin+border+padding+content
IE盒模型 margin+content（padding + border）

控制盒模型的模式：box-sizing：content-box（默认值）, border-box（IE盒模型）

隐藏元素的方法

display: none（元素消失，不占空间）
opacity: 0 (透明度，占空间)
visibility: hidden（元素消失，占空间）
position: absolute(将元素移除页面)
clip-path(将元素剪掉)

px和rem区别

px: 像素，绝对单位长度,每个显示器像素大小一样
rem：相对单位，相对于html根节点font-size的值来改变，html的根节点font-size = 62.5% => 1rem = 10px (16px * 62.5% = 10px)

重绘和重排（回流）

重排(回流)：布局引擎根据所有样式计算出盒模型在页面的位置和大小
重绘：计算好盒模型在页面的位置和大小以及其他属性，然后根据每个盒模型的特性进行绘制
对DOM的大小、位置修改，重排
对DOM的样式修改，重绘

元素水平居中方式

定位+margin
flex布局
grid布局
table布局

例：

<div id="app"><div id="sub"></div>
</div><!--   定位+margin     -->#app{width: 400px;height: 400px;position: relative;border: 3px solid royalblue;}#sub{position: absolute;width: 100px;height: 100px;background-color: red;top: 0;right: 0;left: 0;bottom: 0;margin: auto;}

H5C3新特性

H5新特性

语义化标签
新增音频视频
画布canvas
localStorage和sessionStorage
表单控件email url search
拖拽释放api

css3的新特性

选择器：属性选择器、伪类选择器、伪元素选择器
增加了媒体查询
文字阴影
边框
盒子模型box-sizing
渐变
过度
自定义动画
2D和3D

rem做适配

CSS属性继承

css三大特性 继承(子元素继承父元素属性)、层叠、优先级

CSS可以继承的属性

文字：font
文本：line-height
元素可见性：visibility: hidden
列表属性: list-style

预处理器

css的预处理器增加了函数、变量等，便于维护

SASS
LESS

例：

<div id="app"><span></span>
</div>#app{span{// 这里写span的样式}
}@global: #eee;	// 定义全局变量，利于维护使用	
#app{color: @global;
}

Node.js

入门

数据库连接，登录小案例

<form action="http://localhost:8080" method="post"><input type="text" class="username" name="username" /><input type="password" class="password" name="password"/><input type="submit" value="提交" />
</form>

const mysql = require('mysql')
const http = require('http')
const queryString = require('querystring')const server = http.createServer((req, res)=>{let postVal = "";req.on("data", (chunk)=>{postVal+=chunk;})req.on('end', ()=>{let formVal = queryString.parse(postVal)let username = formVal.username;let pwd = formVal.password;console.log(username, pwd)// 连接数据库const conn = mysql.createConnection({host: 'localhost',port: 3306,user: 'root',password: '116054',database: 'test'})conn.connect();conn.query('select * from user where username=? and password=?', [username, pwd], (err, result, fields)=>{if(err) throw err;console.log(result);if(result.length>0){res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'});res.write('登录成功')res.end();      // 关闭http连接}});conn.end();     // 关闭数据库连接})
})server.listen(8080)     // 端口监听

express

处理404

// catch 404 and forward to error handler
// 方法一
var createError = require('http-errors');
app.use(function(req, res, next) {next(createError(404));
});
// 方法二
// 所有路由之后配置处理404
app.use((req, res, next)=>{console.log('错误', err)res.status(404).send('404 Not Found')
})