初识NodeJS-EJS模板和路由、post、get传值并实现一个登录功能

本文链接：https://blog.csdn.net/qq_39595839/article/details/110729282

EJS模板

EJS是一个高效的嵌入式 JavaScript 模板引擎
可在前端页面嵌入后台数据
安装：npm install ejs
用法：

//前端嵌入数据
用户：<%=login.user%>，密码：<%=login.pws%>

//后台传递数据
 const ejs = require('ejs');
 let loginData = {username:'zhang',pwd:'123456'}
 
  ejs.renderFile('./views/doLogin.ejs', { login: loginData }, (err, data) => {
  	res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
    res.end(data)
    })

路由

前端通过网页浏览器访问的域名路径,携带post和get请求向后端传递交互数据
后端可根据访问的路径不同而获取不同交互数据，执行不同的数据处理

	const url = require('url');
    //获取路由
    let routeName = url.parse(req.url, true).pathname
    //获取/login的操作
    if (routeName == '/login') {
        //使用ESJ模板
        let msg = {
            user: 'zhang',
            pws: '123456'
        }
        ejs.renderFile('./views/login.ejs', { login: msg }, (err, data) => {
            res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
            res.end(data)
        })
        return
    }

获取post、get传值


 //后端
 //req.method获取请求方式
 //获取get传值
 let loginData = '';
 loginData=url.parse(req.url, true).query;
 
 //获取post传值
 //由于post传值以数据流的形式传递，则使用数据监听模式
  req.on('data', (chunk) => {
      loginData += chunk;
   })
 //数据传输完成
  req.on('end', () => {
  console.log(loginData);
  })

模拟登录

后端创建server.js文件

 const http = require('http');
const routes = require('./utility/route');
const path = require('path');
const url = require('url');
const ejs = require('ejs');
// console.log(http)
http.createServer(function (req, res) {
    //获取路由
    let routeName = url.parse(req.url, true).pathname;

    if (routeName == '/doLogin') {
        //获取post请求
        let loginData = '';
        //由于post数据以流的形式传递，使用数据监听模式
        console.log(req.method);
        if (req.method == 'POST') {
            req.on('data', (chunk) => {
                loginData += chunk;
            })

            req.on('end', () => {
                console.log(loginData);
                //渲染
                ejs.renderFile('./views/doLogin.ejs', { login: loginData }, (err, data) => {
                    res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
                    res.end(data)
                })

            })
            return
        }
        //获取get请求
        if (req.method == 'GET') {
            
            loginData=url.parse(req.url, true).query;
            console.log(loginData.title)
            //渲染
            ejs.renderFile('./views/doLogin.ejs', { login: loginData.title }, (err, data) => {
                res.writeHead(200, { 'Content-Type': `text/html;charset="utf-8"` });
                res.end(data)
            })
            return
        }

    }
    res.writeHead(404, { 'Content-Type': `text/plain;charset="utf-8"` });
    res.end('404')

}).listen(8888);

前端创建doLogin.ejs文件

<body>
    <form action='./doLogin' method="POST">
        用户名：<input type="text" name="username">
        <br />
        <br />
        密&nbsp;&nbsp;码：<input type="password" name="pwd">
        <br />
        <input type="submit" value="提交">
    </form>
    <%=login%>
</body>