前端知识总结

http状态码分类

1xx，服务器端接收到请求，但是还没有返回

2xx,请求成功

3xx，重定向（301：永久重定向，302：临时重定向，304：资源未修改）

4xx,客户端错误（403：没有权限，404：资源未找到）

5xx，服务器端错误（500：服务器错误）

http的methods

get：获取数据

post：发送数据

put/patch:修改数据

delete：删除数据

RestfulAPI

restful api是一种新的api设计方法

传统API设计：把每个url当作一个功能

RestfulAPI:把每个url当作唯一的资源，restful api设计有两个特点：

1.尽量不使用url参数

2.使用method来表示操作类型

http headers

request headers

Accept 浏览器可接收的数据格式

Accept-Encoding 浏览器可接收的压缩算法，如gzip

Accept-Language 浏览器可接收的语言

Connection：keep-alive 一次tcp链接重复使用

Cookie

Host：请求的域名

User-Agent：（简称UA），浏览器信息

Content-type：发送数据的格式，如application/json

Content-length:返回数据的大小，如多少字节

Content-Encoding :返回数据的压缩算法，如gzip

Set-cookie:服务端修改cookie

缓存相关的headers

Cache-Control

Last-Modified

Etag

http缓存

强制缓存

初次请求资源，服务端返回资源和cache-control

再次请求资源，在max-age设置的时间之内，直接从本地缓存获取资源

如果时间超过了max-age，再次从服务端获取资源和cache-control

cache-control的值有：

max-age：设置资源的过期时间

no-cache:不使用本地缓存，交给服务端处理

no-store:不使用本地缓存，直接从服务端获取资源

private

public

协商缓存

服务器端判断需要请求的资源与客户端缓存的资源是否一致

如果一致，则返回304，使用客户端的缓存，如果不一致，则返回200和新的资源

http协商缓存过程

初次请求，返回资源的资源标识

再次请求，带着资源标识

如果资源标识一致，返回304，,并使用本地缓存的资源，如果资源标识不一致，则返回200状态码，新的资源，以及新的资源标识

资源标识

Last-Modified：资源的最后修改时间

Etag：与资源唯一对应的字符串

Git常用命令

git clone  将文件克隆下来

git fetch  拉取远程分支到本地

git add .   将文件从工作区提交到暂存区

git commit  将文件从暂存区提交到本地仓库

git push    将文件从本地仓库提交到远程仓库

git checkout 切换分支

git merge xxx 合并分支

git status   查看文件的状态

Chorme调试工具

Elements

console

network

debugger

application

抓包

移动端H5页，查看网络请求，需要用到抓包工具

windows一般用fiddler

Mac os一般用Charles

手机和电脑连接同一个局域网

将手机代理到电脑上

手机浏览网页，即可抓包

webpack

//在目录下创建webpack配置文件webpack.config.js
const path =require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
mode:'development',//production
entry:path.join(__dirname,'src','index.js'),
output:{
         filename:'bundle.js',
         path:path.join(__dirname,'dist')

},
plugin:[
new HtmlWebpackPlugin({
  template:path.join(__dirname,'src','index.html'),
  filename:'index.html'
});
],
devServe:{
  port:3000,
  contentBase:path.join(__dirname,'dist')}
}

npm install html-webpack-plugin
npm install webpack-dev-server

Babel的作用

Babel可以将Es6转化为Es5

ES6模块化

export {xxx};

import{ xxx } from 'xxxxxx';

常用的Linux命令

ls   查看文件夹和文件（平铺）
ll   查看文件夹和文件（列表）
clear  清屏
mkdir  创建文件夹
rm  -rf 删除文件夹
cd   去某个目录
mv  xxx.html  yyy.html 修改文件名
mv  xxx.html  ./../xxx.html  移动某个文件
cp  xxx.js  yyy.js  复制xxx.js文件并生成yyy.js文件
touch xxx.js  新建xxx.js文件
vi xxx.js  新建xxx.js文件并且打开
cat xxx.js  查看xxx.js文件
head xxx.js 查看xxx.js文件的头部
tail yyy.js 查看yyy.js文件的尾部
grep "关键字" 文件名  在文件中查找关键字