前端知识点

第一天(2021.01.25)

link和@import的差别

1.link是HTML的标签，@import是CSS提供的
2.link引入的样式页面加载的时候同时加载，@import在页面加载完的时候才加载样式
3.兼容性问题：link没有兼容性问题，@import在ie5以上才能使用
4.在使用JavaScript控制样式的时候，只能使用link

DNS映射

Domain Name System ：域名系统
DNS映射类似于一个电话本（存储域名和ip相互映射的分布式数据库）
计算机跟擅长于记住网站的ip地址，而我们习惯于记录表一个域名比如www.baidu.com

DNS 映射的两种查询方式

1.递归解析
主机向本地服务器查询一般采用递归查询，如果主机查询的本地服务器不知道被查询的域名的IP地址，那么本地域名服务器会以DNS客户的身份，向其他根域名服务器发出查询请求报文（即提主机继续查询），而不是让主机自己进行下一步的查询。
递归查询的返回结果要不是IP地址，要不然就是报错，表示无法查询到IP地址
2.迭代解析
当根域名服务器收到本地域名服务器发出的迭代查询请求报文的时候，要不然返回IP地址，要不然告诉本地服务器：“你下一步应该去哪里查询”

客户端-本地dns服务端：这部分属于递归查询。
本地dns服务端—外网：这部分属于迭代查询。

DNS负载均衡技术

当一个网站用户足够多的时候，假如每一次请求的资源都位于同一台服务器的时候，服务器会随时容易蹦到。这个时候需要用到负载均衡技术，他的原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS请求的时候，按顺序返回不同的解析结果，将客户端的的访问引导到不同的机器上面去，使得不同的客户端访问不同的服务器。从而达到负载均衡的目的。

根据什么来分配服务器？
1.机器的负载量
2.机器距离用户地理位置的距离等

第二天 (20210128)

从输入URL到页面显示的全过

1、输入URL地址
2、浏览器找到域名对应的IP地址
3、浏览器向web服务器发送HTTP请求
4、服务器永久重定向响应
5、浏览器跟踪重定向地址
6、服务器处理请求
7、服务器返回一个HTTP响应
8、浏览器显示HTML
9、浏览器发送请求获取HTML中的资源（图片、视频、音频、CSS、JS）

第三天（20210205）

vuex是什么？

集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，适用于大型单页应用。应用足够简单的话使用store模式就可以了
点击跳转官方文档

webSocket

webSocket是一种通信协议，类似http协议，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息
http协议有一个缺陷：请求只能由客户端发起。

1、clear
2、npm install -y
（创建package.json文件，并跳过所有问题。
一个package.json文件可以的作用：作为一个描述文件，描述了你的项目依赖那些包、允许我们使用“语义版本规则”，指明你项目依赖的版本，让你的构建更好的与其他人共享）
3、npm instal --save ws （安装ws）

nodmon

编写调试node.js项目，修改后，需要频繁手动close再重新启动。nodmon监听代码修改后自动重启。
下载安装在全局：npm install -g nodemon
在项目文件夹打开终端。

live-server

live-server是可以运行前端静态文件的一个服务器，既然我们要前后端分离，所以就需要单独将html代码运行起来，这里我们选择live-server，等到后边真正部署的时候在用nginx。
在项目文件夹打开终端，安装
npm install -g live-server

vue使用

1、直接引入 cdn 文件的方式
2、自己构建 webpack 的方式
3、使用官方提供脚手架的方式

20210225

v-if 和 v-show的差别

1、v-if 是真正的条件渲染，条件为true的时候才渲染，条件为false的时候销毁，v-show 只是简单的控制元素的css样式来做到隐藏
2、v-if有更大的切换开销，v-show有更大的初始化渲染开销。所以一般需要频繁切换的元素便可以使用v-show来控制，七月的情况可以使用v-if
3、v-if 有配套的的 v-eles-if、v-else。v-show只有孤零零的一个
4、v-if 可以配合template使用。而v-show 不能（因为v-show需要控制元素样式，而template不是一个元素块，不能控制）

vue list

通过数组的下标去修改的话，页面将不会更新
直接修改数组的长度，页面也不刷新

解决方法：
第一种
1、Vue.set（需要修改的数组，下标，修改为什么值）
2、vm.$set （需要修改的数组，下标，修改为什么值）
第二种
vm.list.splice(1);

跨域

前端同源策略引起的跨域，后端代码没有跨域

通过正向代理请求数据

通过正向代理的时候方式请求数据，测试时候可以使用
根目录下面新建 vue.config.js

module.export = {
	devServer:{
		proxy:'http://xxxxxxx'
	}
}

遇到post传递的参数不生效的问题

判断是否参数格式问题：json还是key=value&key=value形式