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

  • 相关阅读:
    【闲暇研究】某问道,问问,道道宠物素材整理
    小米手机刷机,官方教程。
    【闲暇研究】某问道,每日极品道具体验礼包。
    【闲暇研究】某问道,悟道只能用银元宝。
    Windows Server 2016从Evaluation评估版转换成正式版
    【闲暇研究】某问道,仙元、道具合成的修改,与参考文件。
    关于小米手机安装APP总是提示“与已安装应用签名不同”的问题
    WebStorm的快捷键,技巧
    Webstorm(常见配置+Emmet简单语法)
    05-方法重写
  • 原文地址:https://www.cnblogs.com/luzhanshi/p/10769876.html
Copyright © 2020-2023  润新知