2021-11-10 node学习笔记（二）内置模块http的使用,request对象和response对象和创建服务器的示例

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/121240603

本文详细介绍了Node.js中内置模块http的使用，包括创建服务器、request对象和response对象的属性与功能。通过示例代码展示了如何根据req.url动态渲染不同页面，并解决在运行过程中遇到的问题，如文件类型配置。最后探讨了创建服务器的另一种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

要使用http中的服务器和客户端,必须require(‘http’),
作用是加载引入内置的http模块

1.步骤

引入http内置模块,创建服务器
设置监听
传参
运行服务器js文件,打开浏览器查看效果

2.示例一

代码

httpServer.js

// 1.引入http内置模块
var http = require("http");
// 2.创建服务器
http.createServer((req, res) => {
    // 4.传参
    // res.write("hello world");
    res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); //设置支持中文和HTML标签
    res.write(`
      <html>
        <b>你好世界</b>
      </html>
    `);
    res.end(); //可以res.write多次,但要记得res.end不然服务器会等待直到超时
}).listen(3000, () => { //3.设置监听的端口号
    console.log("server create!");
});

输出:

集成终端输出:

PS D:\nodestudy> node httpServer.js
server create!

浏览器输出:(浏览器地址栏输入:localhost:3000即可,不需要另外借助其他服务器)
你好世界

*注:每次修改res.wirte内容都要CTRL+C关闭再重新打开服务器(也可下载相关插件),页面内容才会实时变化

3.参数

request对象:req请求是浏览器==>服务器

request 对象表示 HTTP 请求，
包含了请求查询字符串，参数，内容，HTTP 头部等属性
--就是要接受浏览器传的参数

常见属性:

req.url:提取地址栏数据
req.on('data'): 提取非地址栏数据所有的http[s]都会触发end事件
req.on('end')

response对象:res响应是服务器==>浏览器

response 对象表示 HTTP 响应，
即在接收到请求时向客户端发送的 HTTP 响应数据
--就是要返回渲染的内容

常见属性:

设置响应头:res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
返回数据:res.write(字符/数据<string><buffer>)
结束响应:res.end();//必须写

4.示例二(重要)

要求

使用req.url获取用户请求的路径
使用res.write为req.url得到的不同路径渲染不同的结构和样式
把渲染页面和渲染状态码做成单独js文件引入

代码

httpServer.js

// 1.引入http内置模块
var http = require("http");
// 引入自定义插件
var moduleRenderHTML = require("./module/renderHTML");
var moduleRenderStatus = require("./module/renderStatus");
// 2.创建服务器
http.createServer((req, res) => {
    // 4.传参
    if (req.url === "/favicon.ico") return; //忽略图标
    console.log("当前路径:" + req.url);
    // res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); 
    res.writeHead(moduleRenderStatus.renderStatus(req.url), { "Content-Type": "text/html;charset=utf-8" }); //调用renderStatus
    res.write(moduleRenderHTML.renderHTML(req.url)); //调用渲染页面
    res.end();
}).listen(3000, () => { //3.设置监听
    console.log("server create!");
});
// 渲染状态码
// function renderStatus(url) {

// }
// 渲染页面
// function renderHTML(url) {

// }

renderHTML.js

// 渲染页面
function renderHTML(url) {
    switch (url) {
        case "/home":
            return `
            <html><h1>我是首页</h1></html>
          `;
        case "/list":
            return `
        <html><div style="background:red">我是详情页</div></html>
      `;
        case "/api/list":
            return `
        <ul><li>111</li><li>222</li><li>333</li></ul>
      `;
        default:
            return `
        <html><h1>404 not found</h1></html>
      `;
    }
}

exports.renderHTML = renderHTML;

renderStatus.js

// 渲染状态码
function renderStatus(url) {
    var arr = ['/home', '/list'];
    return url.includes(arr) ? 200 : 404; //返回200或404
}
exports.renderStatus = renderStatus;

结果

命令:node httpServer.js
解决报错:

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'D:\phpstudy_pro\WWW\10_10\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

把 package.json文件中,“type”: “module”,改成"type": “commonjs”,
在浏览器地址栏输入
http://localhost:3000/home
http://localhost:3000/list
http://localhost:3000/api/list
等
输出结果:
终端:

PS D:\phpstudy_pro\WWW\10_10> node httpServer.js
server create!
/home
/line
/list
/api/list

浏览器页面:
在这里插入图片描述

5.创建服务器的另一种方式

(接上例)
httpServer.js

var http=require('http');

// 2.创建服务器
// http.createServer((req, res) => {
//     // 4.传参
//     if (req.url === "/favicon.ico") return; //忽略图标
//     console.log("当前路径:" + req.url);
//     // res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); 
//     res.writeHead(moduleRenderStatus.renderStatus(req.url), { "Content-Type": "text/html;charset=utf-8" }); //调用renderStatus
//     res.write(moduleRenderHTML.renderHTML(req.url)); //调用渲染页面
//     res.end();
// }).listen(3000, () => { //3.设置监听
//     console.log("server create!");
// });

// 创建服务器的另一种方式
const server = http.createServer();
server.on('require', (req, res) => {
    if (req.url === "/favicon.ico") return; //忽略图标
    res.writeHead(moduleRenderStatus.renderStatus(req.url), { "Content-Type": "text/html;charset=utf-8" }); //调用renderStatus
    res.write(moduleRenderHTML.renderHTML(req.url)); //调用渲染页面
    res.end();
});
server.listen(3000, () => {
    console.log("server create!");
});