Skip to content

Commit 2fd3a8e

Browse files
wangjieCodewangjieCode
committed
test
1 parent b10e0b8 commit 2fd3a8e

File tree

5 files changed

+146
-0
lines changed

5 files changed

+146
-0
lines changed

‎react/lifeC.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
当组件都实例被创建并插入到dom中
2+
1. constructor
3+
2. static getDerivedStateFromProps
4+
3. render
5+
4. componentDidMount
6+
7+
当组件的props或state的发生变化
8+
1. static getDerivedStateFromProps
9+
2. shouldComponentUpdate
10+
3. render
11+
4. getSnapshotBeforeUpdate
12+
5. componentDidUpdate
13+
14+
组件移除
15+
1. componentWillUnmount
16+
17+
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
18+
19+
1. static getDerivedStateFromError()
20+
2. componentDidCatch()
21+
22+
23+
24+
在react class组件中
25+
react组件主要有3个状态
26+
初始化
27+
construter
28+
componentWillmount
29+
render
30+
componentDidmount
31+
更新
32+
shouldComponentUpdate
33+
卸载 componentWillUnmount

‎vue/ObjectFreeze.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
{{ message }}
15+
</div>
16+
<script>
17+
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
18+
// 此api会冻结对象的属性，不支持任何修改，但在属性值是引用类型的时候，引用类型无法被冻结，这个被称为浅冻结
19+
var app = new Vue({
20+
el: '#app',
21+
data: Object.freeze({
22+
list: [1,2,3],
23+
message: "message"
24+
})
25+
})
26+
</script>
27+
</body>
28+
29+
</html>

‎基础/images/2021-06-16-08-47-49.png‎

97.3 KB
Loading

‎基础/用户状态.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
http无状态
2+
记录用户状态的方式 cookie Session jwt token
3+
4+
## cookie
5+
储存在浏览器中，一般情况js和服务端都可修改，每个请求都会将浏览器的cookie带到服务端
6+
常用的属性
7+
8+
1. name=value
9+
键值对，设置 Cookie 的名称及相对应的值，都必须是字符串类型- 如果值为 Unicode 字符，需要为字符编码。- 如果值为二进制数据，则需要使用 BASE64 编码。
10+
11+
12+
2. domain
13+
指定 cookie 所属域名，默认是当前域名
14+
3. path
15+
指定 cookie 在哪个路径（路由）下生效，默认是 '/'。如果设置为 /abc，则只有 /abc 下的路由可以访问到该 cookie，如：/abc/read。
16+
4. maxAge
17+
cookie 失效的时间，单位秒。如果为整数，则该 cookie 在 maxAge 秒后失效。如果为负数，该 cookie 为临时 cookie ，关闭浏览器即失效，浏览器也不会以任何形式保存该 cookie 。如果为 0，表示删除该 cookie 。默认为 -1。- 比 expires 好用。
18+
5. expires
19+
过期时间，在设置的某个时间点后该 cookie 就会失效。一般浏览器的 cookie 都是默认储存的，当关闭浏览器结束这个会话的时候，这个 cookie 也就会被删除
20+
6. secure
21+
该 cookie 是否仅被使用安全协议传输。安全协议有 HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false。当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效。
22+
7. httpOnly
23+
如果给某个 cookie 设置了 httpOnly 属性，则无法通过 JS 脚本 读取到该 cookie 的信息，但还是能通过 Application 中手动修改 cookie，所以只是在一定程度上可以防止 XSS 攻击，不是绝对的安全
24+
25+
## session
26+
主体内容储存在服务器中，然后一个新请求介入的时候会生成一个SessionId设置到cookie中，下一次请求的时候通过cookie的方式带到服务器端，找到和其对应的信息内容。
27+
### 过期时间
28+
按照服务器设置的过期时间，当浏览器关闭后，SessionID在关闭页面的时候会被清理，但是服务器的session状态还在，只是下次请求的时候会给浏览器新的sessionID
29+
30+
## jwt
31+
有3个部分组成，分别是header.payload.signature
32+
33+
![](images/2021-06-16-08-47-49.png)
34+
## token
35+
和jwt相比，区别是token会去查数据库，

‎笔试题/html+css/两栏布局.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,62 @@
1111
<style>
1212
.wrapper {
1313
height: 500px;
14+
display: flex;
15+
}
16+
.left{
17+
height: 100%;
18+
width: 200px;
19+
background-color: blue;
20+
}
21+
.right {
22+
width: 100%;
1423
background-color: red;
1524
}
25+
</style>
26+
<div class="wrapper">
27+
<div class="left"></div>
28+
<div class="right"></div>
29+
</div>
30+
</section>
31+
<br/>
32+
<section>
33+
<style>
34+
.wrapper {
35+
height: 500px;
36+
}
1637
.left{
1738
height: 100%;
1839
width: 200px;
40+
float: left;
1941
background-color: blue;
2042
}
43+
.right {
44+
width: 100%;
45+
background-color: red;
46+
}
47+
</style>
48+
<div class="wrapper">
49+
<div class="left"></div>
50+
<div class="right"></div>
51+
</div>
52+
</section>
53+
54+
<br/>
55+
<section>
56+
<style>
57+
.wrapper {
58+
height: 500px;
59+
}
60+
.left{
61+
height: 100%;
62+
width: 200px;
63+
background-color: blue;
64+
}
65+
.right {
66+
width: 100%;
67+
/* margin-left: 200px; */
68+
background-color: red;
69+
}
2170
</style>
2271
<div class="wrapper">
2372
<div class="left"></div>

0 commit comments

Comments
 (0)