node.js 的页面渲染方法ejs

最新推荐文章于 2024-08-31 13:58:33 发布

转载最新推荐文章于 2024-08-31 13:58:33 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rickyctbu/p/9682245.html

文章标签：

#javascript #前端 #ViewUI

本文介绍如何使用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>