node.js 的页面渲染方法ejs

Posted yuf_ricky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了node.js 的页面渲染方法ejs相关的知识,希望对你有一定的参考价值。

、安装依赖的组件

npm i consolidate -D
npm i ejs -D

2、布局服务端

const express = require(\'express\');
const consolidate = require(\'consolidate\');
let server = express();
server.listen(8087);
//选择一种模板引擎
server.engine(\'html\', consolidate.ejs);
//设置模板文件的扩展名
server.set(\'view engine\', \'ejs\');
//指定模板文件的路径,同时在根目录下建www文件夹目录
server.set(\'views\', \'./www\');
server.get(\'/list\', (req, res) => {
    //渲染list.ejs文件
    res.render(\'list\', {data: [\'aaaa\', \'bbbb\', \'cccc\', \'dddd\', \'eeeee\']});
})

 

3、前端布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--这是一个公共的部份-->
<!--注意:这里面的include里面也是不包含www这级目录的-->
<%-include(\'./header.ejs\') %>
<p>这是一个列表</p>
<%if(data.length>0){%>
    <ul>
    <%for(let i=0;i<data.length;i++){ -%>
        <li><%=data[i]%></li>
    <%}%>
    </ul>
<%}-%>
<!--注意:
<% %> =>放置javascript代码
<%= %> =>放置变量
<% -%> =>不换行输出
<%- %> =>解析成html代码
-->
</body>
</html>

最后显示的结果

以上是关于node.js 的页面渲染方法ejs的主要内容,如果未能解决你的问题,请参考以下文章

如何在渲染 ejs 视图 Node.js 时捕获错误

res.render() 不渲染 ejs 文件,没有抛出错误 node.js app

在node.js中使用ejs的demo 第五篇

Node.js:根据条件渲染猫鼬元素

5款Node.js模板渲染框架

node.js + mysql + ejs 数据插入后无需重新加载页面即可更新屏幕信息