响应动态网页

  • 文件结构

文件结构


  • 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
  • 响应——浏览器显示页面

最后修改:2021 年 05 月 15 日 12 : 53 AM
如果觉得我的文章对你有用,请随意赞赏!