二十一、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)

<!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

巴特西

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

初识 EJS 模块引擎

Nodejs 中使用：

最新文章

热门文章