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 @ 2021-08-19 23:28  古墩古墩  Views(393)  Comments(0Edit  收藏  举报