响应动态网页
- 文件结构
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态网页</title> </head> <body> <h1>我是动态网页</h1> <h2><%=msg%></h2> </body> </html>app.js
// 1.导入http模块 const http = require("http"); // 导入quertString,将参数转换为对象,方便处理 const quertString = require("querystring"); const dynamicServer = require("./dynamicServer"); // 2.通过http模块创建服务对象 const server = http.createServer(); // 3.通过服务对象监听用户请求 server.on('request', (req, res) => { // 1.获取请求类型 let method = req.method.toLowerCase(); // 2.获取请求路径 let url = req.url; let path = url.split("?")[0]; // 3.获取请求参数 let params = ''; if (method === "get") { // 4.处理get请求参数 params = url.split("?")[1]; params = quertString.parse(params); // 5.处理路由 if (path.startsWith('/login')) { let data = { msg: "我是动态资源" }; // 将动态数据放在req中传递给renderHTML方法适用 req.data = data; dynamicServer.renderHTML(req, res, './www/index.html'); } else if (path.startsWith('/register')) { console.log('get处理注册请求', params); } } else if (method === 'post') { // 4.处理post请求参数 req.on("data", (chunk) => { // 每次只能拿到一部分数据 params += chunk; }); req.on("end", () => { // 这里才能拿到完整的数据 params = quertString.parse(params); // 5.处理路由 if (path.startsWith('/login')) { console.log('post处理登录请求', params); } else if (path.startsWith('/register')) { console.log('post处理注册请求', params); } }); } }).listen(3000);dynamicServer.js
ejs是js模板引擎，将数据和模板合并然后生成HTML文本
安装：npm install ejs
html中编写渲染的数据<%=%>
const ejs = require("ejs");
/**
*
* @param {请求对象} req
* @param {响应对象} res
* @param {资源路径} rootPath
*/
function renderHTML(req, res, fileName) {
ejs.renderFile(fileName, req.data, function (err, str) {
// str => 输出渲染后的 HTML 字符串
res.writeHead(200, {
"Content-Type": "text/html;charset=utf-8;"
});
res.end(str); // str为完整的html文档
});
}
module.exports = {
renderHTML
}- 终端执行：
nodemon app.js - 请求——浏览器输入：http://127.0.0.1:3000/login.html
- 响应——浏览器显示页面
