从零开始学Node.js(十)：EJS模板引擎、GET/POST

最新推荐文章于 2021-12-09 17:02:16 发布

NayelyAA

最新推荐文章于 2021-12-09 17:02:16 发布

阅读量211

点赞数

分类专栏： Node.js

本文链接：https://blog.csdn.net/weixin_40992982/article/details/105601435

版权

Node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

从零开始学Node.js(十)：EJS模板引擎、GET/POST

文章目录

- 从零开始学Node.js(十)：EJS模板引擎、GET/POST
- - EJS模块引擎
  - GET和POST

EJS模块引擎

EJS是后台模板，可以把数据库和文件读取的数据显示到html页面上，这是个第三方模块，需要通过npm进行安装。

npm install ejs --save

本次项目的原型以从零开始学Node.js（九）做的demo为例，进行改造。废话不多说，我们希望用户在访问/login路径的时候，可以在网页中显示从数据库中读出来的相关信息，不过目前还没有涉及到数据库这方面的介绍，所以先写死模拟一下效果。

这里呢就用到了一个EJS模板中的方法，renderFile()。其作用是读取文件，渲染文件里面的内容，输出解析后的内容。在示例中我们写了一个以.ejs结尾的文件，实际上文件的类型也可以是html等等。语法如下：

ejs.renderFile(filename,data,options,function(err,str){})

下面对各个参数进行一个解释。

参数	参数说明
str	这个是用来渲染的数据展示区域
data	这个是渲染的数据,可以是对象或者数组
opstions	这是个额外的参数配置,可以省略,详见后面
filename	这个是需要读取渲染的文件路径
err	读取渲染失败的提示

那么接下来我们实际操作一下，下面的代码演示了渲染的数据为变量和list的情况。app.js代码如下所示。

const http = require('http');
const routes = require('./module/route');
const url = require('url');
const ejs = require('ejs');

http.createServer(function (request, response) {

    //创建静态web服务
    routes.static(request, response, 'static');

    //路由
    let pathname = url.parse(request.url).pathname;

    if (pathname == '/login') {
        let msg = "假装是数据库中获取到的数据...";
        let list=[
            {
                title:'Monday'
            },
            {
                title:'Tuesday'
            },
            {
                title:'Wednesday'
            },
            {
                title:'Thursday'
            },
        ]
        ejs.renderFile("./view/login.ejs", { 
            msg: msg, 
            list:list
        }, (err, data) => {
            response.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
            response.end(data);
        })
    } else if (pathname == '/register') {
        response.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
        response.end("执行注册");
    } else {
        response.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
        response.end("页面不存在~");
    }

}).listen(8082);

console.log('Server running at http://127.0.0.1:8082/');

其中涉及到的渲染界面login.ejs如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>这是一个登陆页面</h2>
    <h3><%=msg%></h3>
    <ul>
            <%for(var i=0;i<list.length;i++){%>
                <li><%=list[i].title%></li>
            <%}%>
    </ul>
</body>
</html>

GET和POST

我们通过实现这样一个功能，来展示如何获取get和post传值。本次项目的原型以从零开始学Node.js（九）做的demo为例，进行改造。

get传值：http://127.0.0.1:8082/news?page=2&id=1，如何获取?后面的page和id信息？当然是用url模块了。form.ejs中，主要实现了用户名和密码的输入以及提交表单，代码比较简单，就不贴了。

post传值：当我们访问http://127.0.0.1:8082/login时，跳转到登陆界面，在form表单中输入好用户名和密码之后，提交就是一个post请求，该请求的url是doLogin，然后在处理该请求时，我们打印出来用户名和密码。

const http = require('http');
const routes = require('./module/route');
const url = require('url');
const ejs = require('ejs');

http.createServer(function (request, response) {

    //创建静态web服务
    routes.static(request, response, 'static');


    //路由
    let pathname = url.parse(request.url).pathname;
    
    
    //获取请求类型
    //console.log(request.method);
    if(pathname=='/news'){
        var query=url.parse(request.url,true).query;
        response.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
        response.end('get传值获取成功');

    }else if (pathname == '/login') {
        //post演示
        ejs.renderFile("./view/form.ejs",{},(err,data)=>{
            response.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
            response.end(data);
        })
        
    } else if(pathname =='/doLogin'){
        //获取post传值
        let postData='';
        request.on('data',(chunk)=>{
            postData+=chunk;
        })
        request.on('end',()=>{
            console.log(postData);
            response.end(postData);
        })

    }else if (pathname == '/register') {
        response.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
        response.end("执行注册");
    } else {
        response.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
        response.end("页面不存在~");
    }

}).listen(8082);

console.log('Server running at http://127.0.0.1:8082/');

在上面这个例子当中，还有一些不太完善的地方，我们如何分清楚一个请求是get还是post？以及，打印出来的post传值数据仅仅是个字符串，如何获取具体的值呢？大家可以思考一下。

NayelyAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
从零开始学Node.js(十)：EJS模板引擎、GET/POST

从零开始学Node.js(十)：EJS模板引擎、GET/POST文章目录从零开始学Node.js(十)：EJS模板引擎、GET/POSTEJS模块引擎GET和POSTEJS模块引擎 EJS是后台模板，可以把数据库和文件读取的数据显示到html页面上，这是个第三方模块，需要通过npm进行安装。npm install ejs --save ...
复制链接

扫一扫