响应动态网页

nhw649

2021 年 05 月 15 日

34955 次浏览

暂无评论

2742字数

NodeJS 前端

响应动态网页

文件结构

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
  }