nodejs简单使用ejs模板引擎,如何获取get、post请求传值

目录结构

 

 在npm.com网站上搜索ejs的使用方法

下载ejs   

npm install ejs --save

 

app.js

复制代码
const http = require('http');
const fs = require('fs');
const routes = require('./module/routes')
const url = require('url');
const ejs = require('ejs');

http.createServer(function (req, res) {
  // 注册路由
  routes.static(req,res,"static");

  let pathname = url.parse(req.url).pathname;

  if(pathname === '/login'){

    let msg = "数据库里面获取的数据";
    let list = [
      {title:"新闻1"},
      {title:"新闻2"},
      {title:"新闻3"},
      {title:"新闻4"},
      {title:"新闻5"},
    ]
    ejs.renderFile("./views/login.ejs",{msg:msg,list:list},{},(err, data) => {
      res.writeHead(200, {'Content-Type': 'text/html;charset="utf-8"'});
      res.end(data);
    })
  }else if(pathname === '/news'){
    // get请求
    // 获取请求类型
    console.log(req.method,"请求类型");
    var query = url.parse(req.url).query;
    console.log(query);
    res.writeHead(200, {'Content-Type': 'text/html;charset="utf-8"'});
    res.end(query);
  }else if(pathname === '/form'){
    // 获取请求类型
    ejs.renderFile("./views/form.ejs",{},{},(err,data) => {
      res.writeHead(200, {'Content-Type': 'text/html;charset="utf-8"'});
      res.end(data);
    })
  }else if(pathname === '/dologin'){
    // 获取post传值
    let postData = '';
    req.on('data',(chunk) => {
      postData += chunk;
    });
    req.on('end',() => {
      console.log(postData,"postData");
      res.end(postData)
    })
  }else{
    res.writeHead(404, {'Content-Type': 'text/html;charset="utf-8"'});
    res.end('<h1>这个页面不存在</h1>');
  }
  



  
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');
复制代码

views/login.ejs

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>ejs模板引擎</h2>
  <h3><%=msg%></h3>
  <br>
  <h2>列表渲染 "<%%><%%>"之间可以写javascript代码</h2>
  <ul>

    <%for(var i = 0;i < list.length;i++){%>
      <li><%=list[i].title%></li>
    <%}%>

  </ul>
  
</body>
</html>
复制代码

views/form.ejs

用来发post请求

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="/dologin" method="post">
    用户名:<input type="text" name="username"/>
    <br>
    <br>
    密码:<input type="password" name="password"/>
    <br>
    <br>
    <input type="submit" value="提交">
  </form>
</body>
</html>
复制代码

 

 

posted @   古墩古墩  Views(411)  Comments(0Edit  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2020-08-19 各种创建数组的方法
2019-08-19 vue-cli3运行本地项目后,端口不随设置的随便变化
2019-08-19 element-ui下拉按钮的用法
2019-08-19 css偷懒神奇
点击右上角即可分享
微信分享提示