通过node.js创建web服务器时的请求与响应处理

请求相关处理:

通过request对象获取请求头、请求地址、请求方式等信息

 appServer.on('request',(request,response) =>{
    request.headers //获取请求头信息,返回请求头对象
    request.url //获取请求地址,返回请求地址字符串
    request.method //获取请求方式,返回请求方式字符串
}); 

全部代码如下:

/*
引入创建web服务器所需的系统模块http对象
 */
const http = require('http');
// 通过createServer()创建一个服务
const appServer = http.createServer();
/*
监听网络请求(当客户端发送请求时,该监听事件就会响应)
参数一:request 表示事件名称
参数二:事件处理函数,其中request 表示请求对象,response 表示响应对象
 */
appServer.on('request',(request,response) =>{

    request.headers //获取请求头信息,返回请求头对象
    request.url //获取请求地址,返回请求地址字符串
    request.method //获取请求方式,返回请求方式字符串
 

    // 根据客户端不同的路径,响应不同的数据
    if (request.url === '/login'||request.url === '/'){
        response.end('welcome to loginpage');
    } else if (request.url === '/index'){
        response.end('welcome to homepage');
    } else {
        response.end('not found');
    }
});

// 监听8090端口(该服务的端口为8090)
appServer.listen(8090);
console.log('web服务以启动,可以通过localhost:8090进行访问');

GET请求参数

定义:

GET请求参数一般在URL地址中,例如: http://localhost:8090/login?username=admin&password=123456 ,当前的username=admin&password=123456即为请求参数

获取请求参数:

通过url对象中的parse()解析url的示例代码如下:

/*
引入创建web服务器所需的系统模块http对象
 */
const http = require('http');

/*
引入处理url地址的url模块
 */
const url = require('url');

// 通过createServer()创建一个服务
const appServer = http.createServer();
/*
监听网络请求(当客户端发送请求时,该监听事件就会响应)
参数一:request 表示事件名称
参数二:事件处理函数,其中request 表示请求对象,response 表示响应对象
 */
appServer.on('request',(request,response) =>{

    // 解析url地址,返回一个解析后的对象
    let urlObj = url.parse(request.url);
    console.log('================ 解析后的url对象 start ================');
    console.log(urlObj);
    console.log('================ 解析后的url对象 end ================');
});

// 监听8090端口(该服务的端口为8090)
appServer.listen(8090);
console.log('web服务以启动,可以通过localhost:8090进行访问');

输入的地址为: http://localhost:8090/index?username=admin&password=123456 ,通过url对象中parse()解析后的数据如下

Url {
   protocol: null,
   slashes: null,
   auth: null,
   host: null,
   port: null,
   hostname: null,
   hash: null,
   search: '?username=admin&password=123456',
   query: [Object: null prototype] { username: 'admin', password: '123456' },
   pathname: '/index',
   path: '/index?username=admin&password=123456',
   href: '/index?username=admin&password=123456'
 }

POST请求参数:

1、post请求参数一般在请求体中进行传输

2、获取post请求参数需要通过data事假和end事件

3、可以通过querystring将系统模块转换为对象模块

示例代码如下:

/*
该Demo主要是为了处理post请求
引入创建服务所需的内置模块http
 */
const http = require('http');
/*
querystring 模块主要是为了将字符串请求参数转换为对象的模块
比如:username=admin&pwd=admin 转换为 { username: 'admin', pwd: 'admin' }
 */
const querystring = require('querystring');

// 通过createServer()创建一个服务
const appServer = http.createServer();

/*
监听网络请求
 */
appServer.on('request',(request,response) => {

    /*
    接收post请求时所携带的参数,接收post参数是通过data 和 end 事件来完成的
    由于post请求在理论上传输的数据量是无限的,为了减轻压力,post请求传输的数据不是一次性接收完的,它是通过逐次接收完成的
    data 事件 :当有请求数据传输时会触发该事件
    end 事件:当请求的数据传输完毕时会触发该事件
     */

    let data = '';
    request.on('data',params => {
        // 拼接数据
        data+=params;
    });

    request.on('end',() => {
        console.log('数据接收完毕了');
        console.log(data);
        //username=admin&pwd=admin
        // 将字符串参数转换为对象
        const object = querystring.parse(data);
        console.log(object);
        // { username: 'admin', pwd: 'admin' }

    });

    // 给客户端响应数据,否则客户端会一直处于等待的状态
    response.end('login success');



});

appServer.listen(8080);
console.log('web服务已启动,可以通过localhost:8080 进行访问');

响应相关处理:

通过respone对象设置响应码及响应头数据

/*
 设置响应数据
 参数一:响应码
 参数二:响应头对象,其中content-type 表示响应内容的数据类型,text/html;charset=utf-8 表示当前返回的数据类型为html,并且以utf-8编码格式返回
  */
response.writeHead(400,{
   'content-type': 'text/html;charset=utf-8'
});

全部代码如下:

/*
引入创建web服务器所需的系统模块http对象
 */
const http = require('http');
// 通过createServer()创建一个服务
const appServer = http.createServer();
/*
监听网络请求(当客户端发送请求时,该监听事件就会响应)
参数一:request 表示事件名称
参数二:事件处理函数,其中request 表示请求对象,response 表示响应对象
 */
appServer.on('request',(request,response) =>{

    /*
     设置响应数据
     参数一:响应码
     参数二:响应头对象,其中content-type 表示响应内容的数据类型,text/html;charset=utf-8 表示当前返回的数据类型为html,并且以utf-8编码格式返回
      */
    response.writeHead(400,{
       'content-type': 'text/html;charset=utf-8'
    });

    response.end('<h1>web服务</h1>');
});

// 监听8090端口(该服务的端口为8090)
appServer.listen(8090);
console.log('web服务以启动,可以通过localhost:8090进行访问');

效果图:

响应相关操作

HTTP状态码( Status Code ):

200 表示请求成功

404 表示请求的资源未找到

500 表示服务器错误

400 表示客户端请求有语法错误

内容类型( content-type ):

text/plain 表示返回纯文本类型数据

text/html 表示返回html类型数据

text/css 表示返回css类型数据

application/javascript 表示返回一个javascript类型数据

image/jpeg 表示返回图片类型数据

application/json 表示返回json格式数据

charset=utf-8 表示返回的数据编码类型为utf-8格式的

路由:

路由是指客户端请求地址和服务器端代码的对应关系。简单的说,就是请求什么响应什么。

实际上所谓的路由就是一些判断代码,根据url地址的不同,响应不同的数据。如下代码:

/*
该Demo主要是演示路由
引入http模块
 */
const http = require('http');

const url = require('url');

const server = http.createServer();

server.on('request',(request,response) => {

    const currentUrl = request.url;
    console.log('currentUrl:'+currentUrl);
    //currentUrl:/index?admin=123

    //将当前的url地址解析为对象
    const urlObj = url.parse(currentUrl);
    console.log(urlObj);
    /*
    Url {
      protocol: null,
      slashes: null,
      auth: null,
      host: null,
      port: null,
      hostname: null,
      hash: null,
      search: '?admin=123',
      query: 'admin=123',
      pathname: '/index',
      path: '/index?admin=123',
      href: '/index?admin=123'
    }
     */
    // 获取路径,但不包括请求参数
    const pathname = urlObj.pathname;

    // 为了能够响应中文时不乱码而设置的
    response.writeHead(200,{
       'content-type':'text/html;charset=utf-8'
    });

    // 根据路径的不同,响应不同的数据
    if (pathname === '/'|| pathname === '/login') {
        response.end('欢迎进入登录页面');
    } else if (pathname === '/index') {
        response.end('欢迎进入主页面');
    } else {
        response.end('页面未找到');
    }



});
// 将当前的服务端口号设置为8888
server.listen(8888);
console.log('本服务已启动,可以通过localhost:8888进行访问');

静态资源:

所谓的静态资源,指的是客户端向服务端请求的资源,服务器端无需进行处理,可以直接响应给客户端的资源。例如:css、javascript、图片、html等等浏览器可以直接运行的文件。

https://www.guobao0730.com/wp-content/uploads/2020/02/image-50.png 就是客户端向服务器端请求静态图片资源的

动态资源:

相同的请求地址可以传递不同的请求参数,得到不同的响应资源,这种资源就是动态资源。如下请求,请求地址相同,但是id参数不同,那么也就会返回不同的数据。

http://localhost:8090/image?id=1

http://localhost:8090/image?id=2

示例代码:

/*
该Demo主要是为了演示静态资源访问的
请求地址路径与服务器的文件路径是可以不一样的。
1、获取用户输入的请求路径
2、然后将请求路径转换为服务器中真实的物理路径
3、然后读取服务器中文件的内容
4、最终将服务器中文件的内容返回给客户端
 */
// 引入创建web所需的http系统模块
const http = require('http');
// 引入处理url地址的url系统模块
const url = require('url');
// 引入处理路径分隔符的path系统模块
const path = require('path');
// 引入处理文件的fs系统模块
const fs = require('fs');

// 创建服务
const server = http.createServer();

/*
监听请求
参数一:监听的时间名称
参数二:监听的事件处理函数
 */
server.on('request',(request,response) => {

    // 获取输入的url地址(url地址和参数)
    const urlObj = url.parse(request.url);
    console.log(urlObj);

    // 获取url地址
    const pathname = urlObj.pathname;

    // 拼接服务器静态资源路径
    const publicPath = path.join(__dirname,'public');
    console.log(publicPath);
    //D:\WebstormProjects\node-demo\static\public

    // 拼接静态资源的文件路径
    const filePath = path.join(publicPath,pathname);

    /*
    读取该文件
    参数一:文件的绝对路径
    参数二:读取文件时的处理函数
     */
    fs.readFile(filePath,(error,dos) => {

        if (error == null){
            // 如果文件读取成功,那么将改文件响应给客户端
            response.end(dos);
        } else {
            // 文件未找到时给出客户端404的状态码, 并设置响应数据的编码格式,以防乱码
            response.writeHead(404,{
                'content-type':'text/html;charset=utf-8'
            });
            response.end('文件未找到');
        }

    });

});

server.listen(8008);
console.log('本服务已启动,可以通过localhost:8008进行访问');

服务器资源目录结构:

服务器资源目录结构

效果图:

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注