Git-搭建Git服务端

搭建一个git本地服务端,注意区别!(Github、gitlab)

阅读更多
反思-不要再二三十岁时就开始老去

高三时在「心理FM」上听到的一篇好文,昨晚又听了一遍,非常喜欢,转载。

文:陌忘宇
主播:冰夏
心理FM:不要二三十岁就懒得去奋斗

阅读更多
【Nao机器人】Modules/BehaviorControl/BehaviorControl

记录下。。。看这个目录的关系。

阅读更多
【Nao机器人】机器人行为之getUp

在赛场上机器人是很难避免跌倒的(守门员经常会扑倒挡球),在 BHuman 中带了跌倒后站起的行为,这篇文章是记录下最近对此行为运行过程的分析。

阅读更多
【Nao机器人】CABSL有限状态机

这里主要总结下最近看的关于 CABSL 的代码和资料。

行为规范语言 CABSL (有限状态机)控制机器人在比赛中的行为。B-Human 系统中执行动作选择的部分称为行为控制。

阅读更多
【Nao机器人】BHuman项目结构

学习 bhuman 代码。

阅读更多
Nodejs-数据通信

fetch

fetch 是原生的用来替代 ajax 进行数据交互的。

解析text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求数据
let res=await fetch('data/1.txt');
//2.解析
let str=await res.text();

alert(str);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
</body>
</html>

解析JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求
let res=await fetch('data/1.json');
//2.解析
let json=await res.json();

console.log(json);
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
</body>
</html>

解析二进制数据blob

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oImg=document.getElementById('img1');
let oBtn=document.getElementById('btn1');
oBtn.onclick=async function (){
//1.请求
let res=await fetch('data/1.png');
//2.解析
let data=await res.blob();
let url=URL.createObjectURL(data); // 其实这个 url 是把这个图片的二进制数据写到Chrome的临时文件去(小的内存里,大的放文件,后面删)

oImg.src=url;
};
};
</script>
</head>
<body>
<input type="button" value="读取" id="btn1">
<img id="img1" />
</body>
</html>

ajax 2.0

主要是 FormData 对象。(其实就是一个表单数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用户:<input type="text" name="user" /><br>
密码:<input type="password" name="pass" /><br>
文件:<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script>
let oForm=document.querySelector('#form1');

oForm.onsubmit=function (){
let formdata=new FormData(oForm);

let xhr=new XMLHttpRequest();

xhr.open(oForm.method, oForm.action, true);
xhr.send(formdata);

xhr.onreadystatechange=function (){
if(xhr.readyState==4){
if(xhr.status==200){
alert('成功');
}else{
alert('失败');
}
}
};

return false; // 阻止表单自己的提交事件
};
</script>
</html>

使用 jQuery 来处理 FormData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form1" action="http://localhost:8080/" method="post">
用户:<input type="text" name="user" /><br>
密码:<input type="password" name="pass" /><br>
文件:<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
<script src="jquery.js" charset="utf-8"></script>
<script>
$('#form1').on('submit', function (){
let formdata=new FormData(this);

$.ajax({
url: this.action,
type: this.method,
data: formdata,
processData: false, // 告诉 jQuery 不要瞎处理我的数据
contentType: false // 不要随便改 contentType,我传什么是什么
}).then(res=>{
alert('成功');
}, res=>{
alert('失败');
});

return false; // 阻止表单自己的提交事件
});
</script>
</html>

webSocket

性能高、双向。

包:socket.io,简单、方便、兼容 IE5、自动解析数据。

服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const http=require('http');
const io=require('socket.io');

//1.建立普通http
let server=http.createServer((req, res)=>{});
server.listen(8080);

//2.建立ws
let wsServer=io.listen(server);
wsServer.on('connection', sock=>{
//sock.emit('name', 数据)
//sock.on('name', function (数据){});

// 接收前端发过来的数据
sock.on('aaa', function (a, b){
console.log(a, b, a+b);
});

// 向前端发数据
setInterval(function (){
sock.emit('timer', new Date().getTime());
}, 1000);
});

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://localhost:8080/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock=io.connect('ws://localhost:8080/');

sock.emit('aaa', 12, 5); // 向服务器发数据

let on = sock.on('timer', time=>{ // 接收服务器发的数据
console.log(time);
});

</script>
</head>
<body>

</body>
</html>


Nodejs-ajax跨域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const http=require('http');

let allowOrigin={
'http://localhost': true,
'http://aaa.com': true,
'https://aaa.com': true,
}

http.createServer((req, res)=>{
let {origin}=req.headers;

if(allowOrigin[origin]){
res.setHeader('access-control-allow-origin', '*');
}

res.write('{"a": 12, "b": "Blue"}');
res.end();
}).listen(8080);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oBtn=document.getElementById('btn1');

oBtn.onclick=function (){
let ajax=new XMLHttpRequest();

ajax.open('GET', 'http://localhost:8080/a', true);
ajax.send();

ajax.onreadystatechange=function (){
// readyState 0~4
// 0:初始化 1:已连接 2:已发送 3:响应头已经接收到 4:相应体已经接受
if(ajax.readyState==4){
if(ajax.status>=200 && ajax.status<300 || ajax.status==304){
alert('成功');
let json=JSON.parse(ajax.responseText);
console.log(json);
}else{
alert('失败');
}
}
};
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="btn1">
</body>
</html>

ajax为什么不能跨域?

SOP:同源策略,你代码请求的资源应该和你在一个域名下,如果不是,浏览器会禁止这个请求。

ajax是被谁阻止住的?

不是服务器,是浏览器阻止的,这是浏览器的一种”自律”的行为。

服务器是一定会响应的,响应后如果不是同源,浏览器会把这个东西扔掉。

所以这个时候需要服务器返回数据的时候需要声明一下,声明我们是一家子(就是声明哪些人可以从我这里获取数据),如上代码。



Nodejs-几个系统包

assert

1
2
3
4
assert(5<3, 'aaa');

assert.deepEqual(变量, 预期值, msg); // 深度比较,相当于 ==
assert.deepStrictEqual(变量, 预期值, msg); // 相当于 === (比较类型)

path

1
2
3
4
5
6
7
8
9
10
11
const path=require('path');

let str='/root/a/b/1.txt';

console.log(path.dirname(str)); // 文件夹名 /root/a/b
console.log(path.extname(str)); // 扩展名 .txt
console.log(path.basename(str)); // 文件名 1.txt

console.log(path.resolve('/root/a/b', '../c', 'build', '..', 'strict'));
console.log(path.resolve(__dirname, 'build'));
// __dirname 类似于C中的宏,是当前路径

url

1
2
3
4
const url=require('url');

let str='http://www.bing.com:8080/a/b/1.html?a=1&a=2&a=3';
console.log(url.parse(str, true)); // true表示解析后面的参数(query),解析成 JSON,不加true就是一个字符串

querystring

1
2
3
4
const querystring=require('querystring');

console.log(querystring.parse("a=12&b=5&c=99"));
console.log(querystring.stringify({a: 12, b: 99, c: 'blue'}));

net

网络通信。

OSI七层参考模型
物理层 > 数据链路层 > 网络层(IP) > 传输层(TCP) > 会话层 > 表现层 > 应用层(HTTP)

5层模型
物理层 > 数据链路层 > 网络层(IP) > 传输层(TCP) > 应用层(HTTP)

net就是传输层(TCP)的一个包,可以保证质量。


TCP:保证质量,特别适合网络传输文件,不能丢数据。

UDP:保证速度,特别适合网络视频直播等,丢一两帧问题不大。



Nodejs-处理POST文件数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
用户:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
<input type="file" name="f1">
<input type="submit" value="提交">
</form>
</body>
</html>

Nodejs中原生不带处理文件数据的包。

POST 文件:

原生处理

1
2
POST文件
<分隔符>\r\n字段信息\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>\r\n字段头\r\n\r\n内容\r\n<分隔符>--
  1. 用<分隔符>切分
1
2
3
4
5
6
7
[
null,
"\r\n字段信息\r\n\r\n内容\r\n",
"\r\n字段信息\r\n\r\n内容\r\n",
"\r\n字段信息\r\n\r\n内容\r\n",
'--'
]
  1. 第0个和最后1个,扔掉
1
2
3
4
5
[
"\r\n字段信息\r\n\r\n内容\r\n",
"\r\n字段信息\r\n\r\n内容\r\n",
"\r\n字段信息\r\n\r\n内容\r\n",
]
  1. 每一项
1
2
3
4
"\r\n字段信息\r\n\r\n内容\r\n"

"字段信息\r\n\r\n内容"
"字段信息", "内容"

multiparty 包

安装

npm i multiparty -D

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const http=require('http');
const multiparty=require('multiparty');

http.createServer((req, res)=>{
let form=new multiparty.Form({
uploadDir: './upload' // 上传到哪里
});

form.parse(req);

form.on('field', (name, value)=>{
console.log('字段:', name, value);
});
form.on('file', (name, file)=>{
console.log('文件:', name, file);
});

form.on('close', ()=>{
console.log('表单解析完成');
});
}).listen(8080);

上传的文件名是随机的,重名概率不大(特别小),万一重复就会覆盖之前的文件。