、安装依赖的组件

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. Setup Mission End

    编写FPSGameMode 新建函数OnMissionComplete,并设置为蓝图可实现事件 UFUNCTION(BlueprintImplementableEvent,Category=" ...

  2. 前端必备——js中前端与后台的数据交互全解

    只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...

  3. 为Oracle GoldenGate准备数据库

    了解如何为Oracle GoldenGate准备数据库,包括如何配置连接和日志记录,如何在数据库中启用Oracle GoldenGate,如何设置闪回查询以及如何管理服务器资源. 为集成进程配置连接 ...

  4. Ettercap内网渗透

    最近网速很卡,于是想到有人在蹭网,怎么捉弄一下呢? 1.开启ettercap ettercap -G 2. Hosts->Scan,List 发现有几个新的地址192.168.1.71,192. ...

  5. python 携带cookie获取页面内容

    有时会遇到爬取的页面需要登录,这就要带上cookie了. 下面记录了几种携带cookie的方法 # coding=utf-8 import requests s = requests.Session( ...

  6. [转] 浅谈Trie树（字典树）

    原文地址:https://www.cnblogs.com/TheRoadToTheGold/p/6290732.html Trie树(字典树) 一.引入 字典是干啥的?查找字的. 字典树自然也是起查找 ...

  7. eMMC基础技术2：eMMC概述

    0.前言 本文主要参考eMMC规范,从总体上对eMMC 进行简要介绍.主要包含如下的内容: (1)eMMC系统的总体架构 (2)eMMC的总线协议 (3)device controller (4)fl ...

  8. Windows PowerShell 入門（9）－エラー編

    対象読者 Windows PowerShellでコマンドレット操作ができる方 何らかのプログラミング経験があればなお良い 必要環境 Windows PowerShell エラーをリダイレクトする リダ ...

  9. vc++基础班[23]---文件夹的基本操作

      ①.文件夹的创建:CreateDirectory ※※※ 注意:此函数只能创建一层目录,比如想在 C 盘下的 Temp 目录下创建新目录为:123 那么前提是 Temp 这个目录存在才可以!   ...

  10. hibernate框架学习之二级缓存

    缓存的意义 l应用程序中使用的数据均保存在永久性存储介质之上,当应用程序需要使用数据时,从永久介质上进行获取.缓存是介于应用程序与永久性存储介质之间的一块数据存储区域.利用缓存,应用程序可以将使用的数 ...