nodejs 搭建web服务

40 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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里面的模块化