Vue学习日记28

1.Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist
解析：

cd node_modules
rm -rf caniuse-lite
rm -rf browserslist
cd ../
npm install caniuse-lite browserslist
npm run start

2.error in copy-webpack-plugin unable to locate static
解析：先检查报错的目录下是否存在报错的路径，若是缺失手动补上即可。

3.安装并启动Nginx
解析：

yum install nginx
systemctl start nginx.service #开启nginx服务
systemctl enable nginx.service #跟随系统启动

4.CSS组合选择符
解析：
[1]后代选择器[以空格分隔]
[2]子元素选择器[以大于号分隔]
[3]相邻兄弟选择器[以加号分隔]
[4]普通兄弟选择器[以破折号分隔]

5.CSS伪类语法
解析：
[1]伪类的语法

selector:pseudo-class {property:value;}

[2]CSS类也可以使用伪类

selector.class:pseudo-class {property:value;}

6.anchor伪类
解析：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

7.CSS :before选择器
解析：:before选择器向选定的元素前插入内容。

8.CSS :after选择器
解析：:after选择器向选定的元素之后插入内容。

9.div,p
解析：选择所有

元素和

元素。

10.SCSS和Sass格式转换
解析：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

11.HTML DOM
解析：HTML DOM定义了访问和操作HTML文档的标准方法。
[1]HTML Document
[2]HTML Element
[3]HTML Attributes
[4]HTML Events

12.JavaScript对象
解析：
[1]Array对象
[2]Boolean对象
[3]Date对象
[4]Math对象
[5]Number对象
[6]String对象
[7]RegExp对象
[8]全局属性和函数

13.Browser对象
解析：
[1]Window对象
[2]Navigator对象
[3]Screen对象
[4]History对象
[5]Location对象

14.权限控制
解析：权限控制就是在路由跳转[router.beforeEach]中判断token中的权限和要去往[to]页面的路由信息[router meta)中配置的权限是否匹配，同时侧边栏也是根据权限动态生成的，当所登录的账号没有权限访问时，就不显示在侧边栏中[例如，访客登录就无法看到编辑器的侧边栏选项]，这样用户既看不到侧边栏选项，又无法直接访问到，双重控制更安全。

15.Access to XMLHttpRequest at ‘http://127.0.0.1:8000/userinfo?token=’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.
解析：

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'X-Token'
)

16.Content-Type
解析：Content-Type是指发送信息至服务器时的内容编码类型，常见的表单提交或上传文件的常用的资源类型有application/x-www-form-urlencoded、multipart/form-data、 application/json、 application/xml，默认情况下为application/x-www-form-unlencoded。

17.同源策略
解析：
[1]只有当协议、端口、和域名都相同的页面，则两个页面具有相同的源。只要网站的协议名protocol、主机host、端口号port这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用，会受到同源策略的限制。
​[2]同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本对不同域的服务进行跨站调用[通常指使用XMLHttpRequest请求]。

18.浏览器将CORS请求分成两类
解析：
[1]简单请求[simple request]
[2]非简单请求[not-so-simple request]

19.判断是否存在token，如果存在的话，则每个http header都加上token
解析：

if (token) {
        config.headers.Authorization = token;
        console.log('interceptors config=',config)
    }

20.axios添加token
解析：
[1]axios请求中添加token
[2]在request拦截器中添加token

21.设置axios请求的token
解析：axios.defaults.headers.common[‘token’] = ‘f4c902c9ae5a2a9d8f84868ad064e706’

22.设置axios请求头
解析：axios.defaults.headers.post[“Content-type”] = “application/json”

23.查看vue-cli版本
解析：

vue -V

24.options请求
解析：options请求是前端在发跨域请求的时候会先发起的预请求，这是浏览器的行为。

25.JavaScript异步模式
解析：
[1]回调函数[callback]
[2]事件监听[Listener]
[3]观察者模式
[4]promise对象

参考文献：
[1]CSS选择器：https://www.runoob.com/cssref/css-selectors.html
[2]JavaScript和HTML DOM参考手册：https://www.runoob.com/jsref/jsref-tutorial.html
[3]XML DOM教程：https://www.runoob.com/dom/dom-tutorial.html
[4]Django-restframework：https://blog.csdn.net/weixin_30265103/article/details/98826237