持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情
创建node服务器的
1.导入http的模块
var http = require('http');
2.创建服务实例
var server = http.createServer();
3.监听端口
server.listen(8080, function () {
console.log('http://localhost:8080');
});
4.监听客户端的请求
server.on('request', function (req,res) {
router(req,res)
});
router.js里面主要是一些请求分发的处理
router.js 的源代码
var fs = require('fs');
var url = require('url');
var controller = require('./controller');
var querystring = require('querystring');
module.exports = (req,res) => {
// res.setHeader('Content-Type', 'text/plain;charset=utf-8');
// res.setHeader('Content-Type', 'text/html;charset=utf-8');
// res.write('<h1>有点害怕了</h1>');
// res.end();//断开服务
// 读取文件内容(响应html)
//获取请求方法
console.log(req.method);
if( req.method === 'GET' ) {
// 获取请求参数
// console.log(req.url);
// console.log(url.parse(req.url,true).query.id)
if(req.url == '/'){
controller.index(res)
}else{
//响应图片
fs.readFile('./monika.webp',function(err,data){
res.end(data);
})
}
}else if(req.method == 'POST'){
console.log(req.url);
//获取请求体的参数
var data = ''
req.on('data',function(d){
// console.log(d);//请求的流数据 <Buffer 75 73 65 72 6e 61 6d 65 3d 78 75 6a 69 65 26 61 67 65 3d 31 32 33 34 35 36>
//需要拿到所有的数据在处理
data += d
})
// 结束的事件
req.on('end', function(){
controller.user(querystring.parse(data),res)
// console.log(querystring.parse(data)) //返回的数据 { username: 'xujie', age: '123456' }
});
}
}
post获取请求参数和get不一样,get可以直接获取,但是post需要更加底层一点,需要监听data来获取数据,而且获取的数据是16进制的流对象,需要通过querystring来获取可以识别的数据,同时还需要注意一个问题,就是监听数据流的时候,需要在数据读完之后在通过querystring来转换数据。
为了更加模块化,我们抽出一个controller.js
controller.js 源码
var fs = require('fs');
module.exports = {
index(res){
fs.readFile('./index.html','utf-8',function(err,data){
res.end(data);
})
},
user(postData,res) {
// 业务逻辑的处理
console.log(postData)
res.end();
}
}
还有一个测试的html页面源码也贴一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>你好吧~~~~~</h1>
<img src="./monika.webp" width="200px"/>
<form action="./" method="post">
<input type="text" name="username"><br>
<input type="text" name="age"><br>
<input type="submit" value="post提交">
</form>
</body>
</html>
monika这个图片自己可以随便找个图替代一下。
总结
大致了解通过nodejs搭建一个web服务器的全过程,同时也更加理解了node里面的模块化