二十一、Node.js-EJS 模块引擎

初识 EJS 模块引擎

我们学的 EJS 是后台模板,可以把我们数据库和文件读取的数据显示到 Html 页面上面。它
是一个第三方模块,需要通过 npm 安装
https://www.npmjs.com/package/ejs

大家可以在上面的网站获取到ejs的使用说明
安装:

npm install ejs –save / cnpm install ejs --save

Nodejs 中使用:

下面使用代码简单的展示出后台数据渲染在前台页面的过程,今后会慢慢的补充其他细节

项目结构:

创建服务的00service03_ejs.js代码:

var http = require("http")
var url = require("url")
var ejs = require('ejs')
http.createServer(function (req, res) {
    res.writeHead(200, {"Content-Type": "text/html;charset='utf-8'"})
    var allUrl = req.url;
    var path = url.parse(allUrl).pathname;
    var str = '我是后台数据,将来我是从数据库读出来的'
    var list =[
            '1111',
            '2222',
            '3333'
    ]
    var labelStr='<h2>我是html标签h2包裹的内容</h2>';
    if (path == "/login") {
        // 把后台(数据库)的数据渲染到模板上面
        ejs.renderFile(//这里我们通过ejs.renderFile()方法将后台数据输送给前台页面
            /**
             * ejs.renderFile()方法一共有三个参数:
             */
            //参数1:我们要输出后台数据的目标页面路径:
            "views/login.ejs",//这里的login.ejs,其实就是login.html,在下面的补充内容我会补充介绍
            //参数2:我们需要输出的数据,以对象的形式输出:
            {
            msg: str,
            list: list,
            labelStr:labelStr
        },
            //参数3:回调函数,输出数据之后我们会获取到渲染了我们后台数据的页面内容data
            function (err, data) {
            res.end(data)//然后我们将data输出到浏览器,我们的页面就可以展示出来了
        });
    } else if (path == "/register") {
        res.end("register")
    } else if (path == "/admin") {
        res.end("admin")
    }
}).listen(8000)

login.ejs代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>这是一个ejs后台模板引擎登录</h1>
<!--<%= %>输出标签(原文输出 HTML 标签)(就是后台传什么数据,我就展示什么数据,不会解析html标签-->
<h1><%=msg%>></h1>
<!--<% %>流程控制标签:里面可以书写我们的js代码逻辑-->
<%for (var i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<%}%>
<%=labelStr%>
<!--<%- %>输出标签(HTML标签会被浏览器解析)-->
<%-labelStr%>
</body>
</html>

访问页面效果:

.ejs文件补充了解:

点击下方链接:

https://www.cnblogs.com/luzhanshi/p/10769867.html

 

posted @ 2019-04-25 17:39  指尖下的世界  阅读(427)  评论(0编辑  收藏  举报
/* 看板娘 */ /*炸泡*/
/* 鼠标点击求赞文字特效 */