NodeJs---EJS模块

最新推荐文章于 2024-10-04 15:14:26 发布

muzidigbig

最新推荐文章于 2024-10-04 15:14:26 发布

阅读量1.5k

点赞数

分类专栏： nodejs 文章标签： node ejs node在页面上渲染后台数据

本文链接：https://blog.csdn.net/muzidigbig/article/details/87349622

版权

nodejs 专栏收录该内容

36 篇文章 32 订阅

订阅专栏

初识 EJS 模块引擎

我们学的 EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 Html 页面上面。它是一个第三方模块，需要通过 npm 安装

https://www.npmjs.com/package/ejs

安装：

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

Nodejs 中使用：

ejs.renderFile(filename, data, options, function(err, str){
// str => Rendered HTML string
})

EJS 常用标签
 <% %>流程控制标签
 <%= %>输出标签（原文输出 HTML 标签）
 <%- %>输出标签（HTML 会被浏览器解析）

<%_ %>删除其前面的空格符

<%# %>注释标签，不执行、不输出内容

<%- %> 删除紧随其后的换行符

<% _%> 将结束标签后面的空格符删除

<a href="<%= url %>"><img src="<%= imageURL %>" alt=""></a><ul>

<ul>
    <% for(var i = 0 ; i < news.length ; i++){ %>
         <li><%= news[i] %></li>
    <% } %>
</ul>

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

开始使用：

目录结构

最关键的就是 req.url 属性，表示用户的请求 URL 地址。所有的路由设计，都是通过 req.url来实现的。

url.parse() 解析 URL

url.format(urlObject) // 是上面 url.parse() 操作的逆向操作

url.resolve(from, to) 添加或者替换地址

08ejs.js

let http = require('http');  // 创建本地服务器
let url = require('url');   // 路径模块
let ejs = require('ejs');

const port = "8888";
const host = "127.0.0.1";

constant server = http.createServer((req,res) => {
    res.writeHead(200,{"Content-Type":"text/html;Charset=utf-8"});
    // 获取客户端请求的路径
    let pathname = url.parse(req.url).pathname;
    if(pathname == '/login') {
        let serverData = '<h4>你好，我是后台数据！</h4>';
        let arr = ['muzi','digbig','muzidigbig'];
        // 把从数据库获得到的数据渲染到模板上面
        // ejs.renderFile(.ejs模板渲染页面,数据库/文件的数据,回调函数)
        ejs.renderFile('views/login.ejs',{
            msg:serverData,
            list:arr,
        },(err,data) => {
            // 不在页面中输出返回的data参数  将不渲染.ejs模板
            res.end(`返回显示的数据：${data}`)
        })

    }else if(pathname == '/regi'){
        let data = '这是一个注册页面'
        ejs.renderFile('views/register.ejs',{
            msg:data
        },(err,data) => {
            res.end(`返回显示的数据：${data}`)
        })
    }else{
        res.end('页面待开发')
    }
});

/**
 * 启动服务器监听指定端口
 * @param {String} port 端口
 * @param {String} host 主机名
 * @param {Function} callback 回调函数
 */
server.listen(port, host, error => {
    if (error) {
        throw error;
    } else {
        console.log("启动成功！")
    }
})

渲染的视图页面.ejs后缀的页面跟我们的.html页面很相似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>这是一个ejs的后台模板引擎的模板页面--login</h2>
    <!-- 渲染后台传递过来的数据 -->
    <h3><%-msg%></h3>
    <!-- 循环数据 -->
    <ul>
        <% for(let i=0;i<list.length;i++){ %>

            <li><%= list[i]%></li>
        <% } %>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>注册</h2>
    <!-- 渲染后台传递过来的数据 -->
    <h3><%= msg%></h3>
</body>
</html>

然后运行我们的08ejs.js即可

注：

一般运行：