、安装依赖的组件

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. asyncio模块中的Future和Task

      task是可以理解为单个coroutine,经过ensure_future方法处理而形成,而众多task所组成的集合经过asyncio.gather处理而形成一个future. 再不精确的粗略的说 ...

  2. java SPI & spring factories

    SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制.SPI是一种动态替换发现的机制, 比如有个接口,想运行时动态的给它添加实现,你只需要添加 ...

  3. 在已有的Java项目中使用Kotlin

    需要配置两个地方首先在项目点gradle文件中引入Kotlin插件 然后在module的build.gradle文件中应用插件

  4. The question that comes to mind

    1.在 vue 与小程序中   属性中的小括号是否都可以写表达式 例如: <view checked={{op==1?false:true}}></view>

  5. 使用jQuery重置(reset)表单的方法

    由于JQuery中,提交表单是像下面这样的: 代码如下: $('#yigeform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽: 代码如下: $('#yigeform' ...

  6. 目标检测----ImageAI使用

    1.开源项目  github地址  https://github.com/OlafenwaMoses/ImageAI 2.目标检测(Object Detection)入门概要 3.Pycharm中无法 ...

  7. Eclipse同时显示两个编辑窗口

    同时打开两个编辑窗口,点住一个窗口,拖到编辑窗口的最下面时或者最右面,会出现两个两个编辑窗口的轮廓,松开即可!

  8. delphi 的 ORM 框架

    delphi 的 ORM 框架,收集如下: 1.EntityDac    https://www.devart.com/entitydac/download.html 2.mORMot    The  ...

  9. Python 编程核心知识体系（REF）

    Python 编程核心知识体系: https://woaielf.github.io/2017/06/13/python3-all/ https://woaielf.github.io/page2/

  10. logging模块--日志文件

    初级的使用配置模式类似与print 默认打印waring等级及以上--通过更改等级来测试代码 logging.debug("debug no china") #调试模式 loggi ...