Skip to content

Commit b2bd00a

Browse files
i5tingi5ting
committed
add httpserver simply impl
1 parent d3164e4 commit b2bd00a

2 files changed

Lines changed: 118 additions & 35 deletions

File tree

‎doc/day1_express.md‎

Lines changed: 112 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,59 @@
22

33
http://expressjs.com/
44

5-
## 安装
5+
Express是一个基于nodejs的web框架，它是基于[connect](https://github.com/senchalabs/connect)中间件的.
66

7-
- 如何安装
7+
## 为什么使用Express
8+
9+
- 基于node的异步，性能比较好
10+
- Express本身比较成熟，目前已经是v4了
11+
- 有很多大规模应用实例，集群等都非常容易
12+
13+
## 无状态的http协议
14+
15+
大家都明白，我们的Web应用抽象起来就是客户端发出请求，请求到达服务器后，服务器经过一番捣鼓，给客户端发回一个应答。“请求”我们一般抽象成 request，“应答”是 response。服务器和客户端（一般也就是浏览器啦，但是绝不局限于浏览器哦。）之间交流的语言就是 HTTP 协议了。至于服务器怎么折腾出一个应答来的，就八仙过海，各显神通了。
16+
17+
总之，Web 应用中两个重量级的东东就是： Request ， Response 。
18+
19+
前面我们说到，每次有访问进来，我们的代码都会跑一遍。现在的问题是，在我们的代码里，怎么抓到客户端发来的 request , 然后，到哪里去找这个 response ，好把我们捣鼓出来的东西放进去，发给客户端呢？答案是，只要我们把他们作为参数交给 tellme 函数(你可以给这个函数取任何名字甚至不给他名字)，然后，当请求到达时，node.js 就会把客户的请求封装成 request ，预备发给客户的应答封装成 response 。我们拿到 request ，看看他请求些什么，再折腾些东西（读出个文件也好，去查数据库也好，随便你了。）丢进 response ，发给客户端。
20+
21+
TODO: 此处该补出一张express在node中得位置图片
22+
23+
24+
## node 基础
25+
26+
see https://github.com/nodeonly/nodejs-tutorial/blob/master/doc/day3_node.md
27+
28+
## node 版本的http server
29+
30+
```
31+
var http = require('http');
32+
33+
http.createServer(function(request,response){
34+
console.log(request);
35+
response.end('Hello world!');
36+
}).listen(8888);
37+
```
38+
39+
这就是最简单的实现
40+
41+
42+
## 安装Express
43+
44+
- 如何手动安装
845
- 如何使用generator
946

47+
### 如何手动安装
48+
49+
```
50+
npm init
51+
npm install --save express
52+
touch app.js
53+
node app.js
54+
```
55+
56+
### 如何使用generator
57+
1058
generator是express命令工具集，首先确保已经安装node和npm,先在全局安装这个工具集:
1159

1260
$npm install -g express-generator
@@ -27,6 +75,8 @@ generator是express命令工具集，首先确保已经安装node和npm,先在
2775

2876
![Mou icon](./images/expressimg1.jpg)
2977

78+
### 安装依赖
79+
3080
打开package.json，可以看到依赖的模块，执行命令来下载依赖的模块:
3181

3282
$npm install
@@ -39,10 +89,12 @@ generator是express命令工具集，首先确保已经安装node和npm,先在
3989

4090
![Mou icon](./images/expressimg2.jpg)
4191

92+
### 启动服务器
93+
4294
回到app.js层级，执行:
4395

4496
$npm start
45-
97+
4698
开始运行express打开端口，用浏览器打开http://localhost:3000/，在此估计会出现缺少模块的情况，如果有模块缺少，cd到node_modules文件夹下去安装缺失的模块:
4799

48100
$sudo npm install xxx(模块名称)
@@ -169,10 +221,18 @@ express.static不仅可以托管静态文件，并且提供接口可以拦截到
169221

170222
HttpServletRequest对象是有关于客户端所发出的请求的对象，只要是有关于客户端请求的信息，都可以藉由它来取得，例如请求标头、请求方法、请求参数、客户端IP，客户端浏览器等等信息。
171223

224+
客户端发来的请求，node.js 帮我们封装成 request 对象
225+
226+
在request里面我们可以获得
227+
228+
-
229+
172230
### 响应response
173231

174232
HttpServletResponse对象是有关于对客户端请求之响应，您可以利用它来设定一些要响应的讯息，例如标题信息、响应状态码等.
175233

234+
我们利用response,向客户端发送回答，说白了是向浏览器写内容。
235+
176236
### session
177237

178238
## 任务
@@ -224,24 +284,23 @@ HTTP是一个应用层协议，由请求和响应构成，是一个标准的客
224284

225285
返回给ajax对象:
226286

227-
228-
oGetBtn.onclick = function(){
229-
230-
$.ajax({
231-
type: "GET",
232-
url: "http://localhost:3000/getserver",
233-
data: {
234-
'method':'GET',
235-
'name':'rainBow',
236-
'sex':'man'
237-
},
238-
dataType: "json",
239-
success: function(data){
240-
var str = JSON.stringify(data);
241-
oResBox.innerHTML = str;
242-
}
243-
});
244-
};
287+
oGetBtn.onclick = function(){
288+
289+
$.ajax({
290+
type: "GET",
291+
url: "http://localhost:3000/getserver",
292+
data: {
293+
'method':'GET',
294+
'name':'rainBow',
295+
'sex':'man'
296+
},
297+
dataType: "json",
298+
success: function(data){
299+
var str = JSON.stringify(data);
300+
oResBox.innerHTML = str;
301+
}
302+
});
303+
};
245304
246305
点击GET按钮发送GET请求，并把发出去的参数整理成json格式并返回:
247306

@@ -256,26 +315,39 @@ HTTP是一个应用层协议，由请求和响应构成，是一个标准的客
256315
router.post('/', function(req, res) {
257316
res.send(req.body);
258317
});
318+
259319

260320
点击按钮post发送post请求:
261321

262-
$.ajax({
263-
type: "POST",
264-
url: "http://localhost:3000/getserver",
265-
data: {
266-
'method':'POST',
267-
'name':'rainBow',
268-
'sex':'man'
269-
},
270-
dataType: "json",
271-
success: function(data){
272-
var str = JSON.stringify(data);
273-
oResBox.innerHTML = str;
274-
}
275-
});
322+
$.ajax({
323+
type: "POST",
324+
url: "http://localhost:3000/getserver",
325+
data: {
326+
'method':'POST',
327+
'name':'rainBow',
328+
'sex':'man'
329+
},
330+
dataType: "json",
331+
success: function(data){
332+
var str = JSON.stringify(data);
333+
oResBox.innerHTML = str;
334+
}
335+
});
276336
277337
![Mou icon](./images/expressimg5.jpg)
278338

339+
更多，带有参数的post请求
340+
341+
router.post('/post/:id', function(req, res) {
342+
res.status(200).json({
343+
data:{
344+
id:req.param('id'),
345+
name:'sss',
346+
kkk:req.body.kkk
347+
}
348+
})
349+
});
350+
279351
### 如何实现文件上传
280352

281353
### request里如何取值
@@ -312,7 +384,12 @@ query处理get请求参数，整理成json各式:
312384
- `npm start` vs `npm test` (scripts自定义)
313385
- 如何写一个npm，以及发布
314386

387+
## 更多
315388

389+
- connect
390+
- express框架源码
391+
- 反向代理（proxy，比如haproxy，nginx）
392+
- 集群部署
316393
## 总结
317394

318395

‎doc/demo/day1/node_http/http.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var http = require('http');
2+
3+
http.createServer(function(request,response){
4+
console.log(request);
5+
response.end('Hello world!');
6+
}).listen(8888);

0 commit comments

Comments
 (0)