、安装依赖的组件

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. 高程小tips

    1.DOM操作往往是JS程序中开销最大的部分,应尽量减少DOM操作.-P285  P297例子 2.元素的classList属性: 元素的classLis即该元素的class的值的集合,是一个列表(数 ...

  2. GridView position = 0重复加载的问题

    在做项目开发中,遇到GridView设置的adapter,adapter中包含异步加载图片的问题,因为gridView item的高度没有做限制,是自适应的,导致positon = 0会在加载时重复出 ...

  3. eclipse连接手机一直连接不起

    任何环境都搭配没有问题,依然连接不起手机,最后解决办法: 把sdk下tools的文件全部复制一份到platform-tools下即可

  4. 论文笔记：Selective Search for Object Recognition

    与 Selective Search 初次见面是在著名的物体检测论文 「Rich feature hierarchies for accurate object detection and seman ...

  5. python3编码（encode,decode）

    python3默认编码为unicode,由str类型进行表示.二进制数据使用byte类型表示. 字符串通过编码转换成字节码,字节码通过解码成为字符串 encode:str --> bytes d ...

  6. 在Linux下误删文件后恢复【转】

    针对日常维护操作,难免会出现文件误删除的操作.大家熟知linux文件系统不同win有回收站,删除后的文件可以到垃圾箱寻回,要知道linux文件修复比较费劲,网络上面的文档也是五花八门.所以本次研究一种 ...

  7. jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()

    jQuery插件开发 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可 ...

  8. Nginx 开启目录下载

    平时应用中,我们大都用apache搭建下载页面.毕竟Apache搭建起来非常方便,yum安装,创建目录就可以了. 但有时还是需要用nginx配置下载页面.这里就是一个简单的配置nginx下载页面的过程 ...

  9. liunx之Centos6.8杀毒软件的安装

    作者:邓聪聪 为了防止服务器中病毒,安装了类似与Windowns的杀毒软件Clanav,过程如下 首先下载clamav的软件包,官方下载地址为http://www.clamav.net/downloa ...

  10. C++怎么实现线程安全

    muduo库学习笔记1-C++多线程系统编程 网上都说这本书很适合初学者入门学习, 我今天开始准备从头再来; 第一章线程安全的对象管理 对象的生与死不能由对象自身拥有的mutex(互斥器)来保护; 如 ...