码迷,mamicode.com
首页 > Web开发 > 详细

node.js 的页面渲染方法ejs

时间:2018-09-20 18:01:31      阅读:605      评论:0      收藏:0      [点我收藏+]

标签:文件的   结果   idt   data   expr   express   scale   文件   view   

、安装依赖的组件

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、布局www下的list.ejs文件

<!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>
<p>这是一个列表</p>
<%if(data.length>0){%>
    <ul>
        <%for(let i=0;i<data.length;i++){%>
            <li><%=data[i]%></li>
        <%}%>
    </ul>
<%}%>
</body>
</html>

注意<% %>,<%= %>,<%- %>,<% -%>的使用

最后显示的结果

技术分享图片

 

node.js 的页面渲染方法ejs

标签:文件的   结果   idt   data   expr   express   scale   文件   view   

原文地址:https://www.cnblogs.com/rickyctbu/p/9682245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!