、安装依赖的组件

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. printf是在libc库中么？

    libc中果然有很多的函数,使用nm看了一下,里面竟然还有reboot函数,汗! 使用grep,可以看到各种 printf 也都在这里头. objdump是看函数的地址与函数名对应的,虽然也能证明pr ...

  2. STL之partition学习

    顺便存一下numeric函数的使用方法吧,感觉用处不大. https://blog.csdn.net/baishuo8/article/details/84073565 partition函数,将元素 ...

  3. L3-2 森森快递 （30 分)（贪心+线段树/分块）

    题目链接:https://pintia.cn/problem-sets/1108203702759940096/problems/1108204121661857798 题目大意: 森森开了一家快递公 ...

  4. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  5. shell编程 之 输入输出重定向

    1 输入输出重定向 标准输入:从终端得到命令,对于计算机来说,是从终端获得了命令,执行完了以后,结果和执行状态或者错误提示又会发回终端,这叫标准输出. 输入输出重定向就是从终端以外的别的地方得到输入, ...

  6. Android SpannableString实现TextView的点击事件

    最近项目中遇到一个问题,就是一段文字中股票可点击并跳到股票详情,只记得SpannableString可以实现富文本功能,但并不知道可实现的富文本有点击功能,就开始借助万能搜索引擎,结果不出意料,的确有 ...

  7. web层直接调用 dubbo的服务，合适吗？

    目前很多互联网app项目,都是采用这样的一个基本项目结构:即由后端提供Restful的api接口,然后供前端例如IOS.Android或者H5端去调用,如图: 在这种结构下,后台的代码分层常规一般会有 ...

  8. 使用html2canvas生成一张图片

    注意事项: 1.图片生成问题,生成图片测试机正常传到正式机,无法生成!!====>>原因是正式机中,使用的是CDN加载,导致图片跨域,而canvas不支持图片跨域!!!==>> ...

  9. where（泛型类型约束）

    .NET支持的类型参数约束有以下五种: where T : struct T必须是一个结构类型 where T : class T必须是一个类(class)类型,不能是结构(structure)类型 ...

  10. slice的部分说明

    1.slice是数值的一个引用,并不会新增内存地址. 2.slice的容量和长度是两个概念,这个长度跟数组的长度是一个概念,即在内存中进行了初始化实际存在的元素的个数.何谓容量?如果通过make函数创 ...