、安装依赖的组件

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的更多相关文章

  1. Node.js静态页面展示例子2

    例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑 ...

  2. Node.js 手册查询-4-Express 方法

    express 标签(空格分隔): node.js express [TOC] 安装: 新版本中命令行工具分家了 npm install -g express //安装 express 然后 npm ...

  3. Node.js 手册查询-5-Ejs 方法

    express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine' ...

  4. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  5. vue中通过js控制页面样式方法

    在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...

  6. Node.js 手册查询-3-Mongoose 方法

    Mongoose 参考手册 标签(空格分隔): MongoDB Mongoose 是什么? 一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据 ...

  7. 在CentOS 7上安装Node.js的4种方法（yum安装和源码安装）

    CentOS 7上的安装方法,其中涵盖了源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和通过NVM(Node version mana ...

  8. 在CentOS 7上安装Node.js的4种方法（包含npm）

    Node.js和Javascript有着千丝万缕的联系,可以说Node.js让Javascript显得从未如此强大.好吧…微魔其实是个门外汉…但是这并不能阻碍微魔学习探索未知的信心~今天在国外闲逛,看 ...

  9. JS实现页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

随机推荐

  1. win7用VMware安装CentOs7搭建Linux环境

    1. 首先要安装VMware 安装及破解教程 http://www.cnblogs.com/zhangqian27/p/9088237.html 2. 下载os镜像 CentOS下载地址: 阿里云开源 ...

  2. Binary Tree HDU - 5573 （思维）

    题目链接: B - Binary Tree  HDU - 5573 题目大意: 给定一颗二叉树,根结点权值为1,左孩子权值是父节点的两倍,右孩子是两倍+1: 给定 n 和 k,让你找一条从根结点走到第 ...

  3. 如何在eclipse安装apk包

    如何在eclipse安装下载好的apk包 好像是有好几种方法,我成功的是这种. 1.首先启动模拟器,我选择的是Android 4.2.2,因为...默认安得Android 7.1.1起不了,真是大坑, ...

  4. docker部署Javaweb环境数据库连接问题

    最近在docker部署了一个Javaweb项目运行的环境,在容器中部署了mysql和Javaweb项目,但是本地可以跑项目,放到容器里面不行. 具体报错内容是不能访问数据库. Could not ge ...

  5. 使用Crash工具分析 Linux dump文件【转】

    转自:https://blog.csdn.net/bytxl/article/details/45025183 前言 Linux 内核(以下简称内核)是一个不与特定进程相关的功能集合,内核的代码很难轻 ...

  6. Vue 指令篇 案例(输入提交显示 提交数据_列表)

    一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...

  7. Windows系统下安装dig命令

    dig 是一个 Linux 下用来 DNS 查询信息的工具,全称是Domain Information Groper,与 nslookup 类似,但比 nslookup 功能更强大.Windows 下 ...

  8. T-SQL ORDER BY子句 排序方式

    MS SQL Server ORDER BY子句用于根据一个或多个列以升序或降序对数据进行排序. 默认情况下,一些数据库排序查询结果按升序排列. 语法 以下是ORDER BY子句的基本语法. SELE ...

  9. LabVIEW中下拉列表和枚举的区别（两点）

    第一:如图,在表示法上,下拉列表表示的数据范围要大,枚举只能是U32,U16, U8 第二:在vi的动态调用过程中,常用下拉列表,因为枚举控件不能动态的增加或者减少项目,而下拉列表则可以.

  10. springboot：SunCertPathBuilderException: unable to find valid certification path to requested target

    有次创建springboot工程时报错,在之前是没有问题的.见下: 出现这种情况,有时在URL最后加一个反斜杠就可以了,但是这次不行,加了也没有用. 后来把URL改成了:http://start.sp ...