node.js 的页面渲染方法ejs
、安装依赖的组件
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的更多相关文章
- Node.js静态页面展示例子2
例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑 ...
- Node.js 手册查询-4-Express 方法
express 标签(空格分隔): node.js express [TOC] 安装: 新版本中命令行工具分家了 npm install -g express //安装 express 然后 npm ...
- Node.js 手册查询-5-Ejs 方法
express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine' ...
- Node.js原生及Express方法实现注册登录原理
由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...
- vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...
- Node.js 手册查询-3-Mongoose 方法
Mongoose 参考手册 标签(空格分隔): MongoDB Mongoose 是什么? 一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据 ...
- 在CentOS 7上安装Node.js的4种方法（yum安装和源码安装）
CentOS 7上的安装方法,其中涵盖了源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和通过NVM(Node version mana ...
- 在CentOS 7上安装Node.js的4种方法（包含npm）
Node.js和Javascript有着千丝万缕的联系,可以说Node.js让Javascript显得从未如此强大.好吧…微魔其实是个门外汉…但是这并不能阻碍微魔学习探索未知的信心~今天在国外闲逛,看 ...
- JS实现页面刷新方法
下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...
随机推荐
- python selenium+phantomJS自动化测试环境
0x00配置phantomJS 1. 在windows平台下 此种方法是弹浏览器进行自动化测试的. 1.下载谷歌的驱动 https://chromedriver.storage.googleapis. ...
- python - list 和 tuple
- ubuntu14.04升级mysql5.5至mysql5.7
原文链接:https://www.cnblogs.com/os-python/p/6842485.html 1.下载mysql-apt的配置包,并安装 wget https://dev.mysql.c ...
- 数据库无法启动ORA-01034: ORACLE not available
错误场景: 1.数据库未启动,查询v$instance报错 SQL> select status from v$instance; select status from v$instance * ...
- Java基础2-基本语法
复习 jvm : 虚拟机 --> sandbox jre : jvm + 核心类库 jdk : jre + 工具,javac java path: 操作系统搜索路径 classpath: jav ...
- codevs 1080 线段树练习（线段树）
题目: 题目描述 Description 一行N个方格,开始每个格子里都有一个整数.现在动态地提出一些问题和修改:提问的形式是求某一个特定的子区间[a,b]中所有元素的和:修改的规则是指定某一个格子x ...
- 10分钟轻松学会 Python turtle 绘图
python2.6版本中后引入的一个简单的绘图工具,叫做海龟绘图(Turtle Graphics),turtle库是python的内部库,使用导入即可 import turtle 先说明一下turtl ...
- 关于dubbo服务超时的讨论
呵呵,偷点懒,直接把QQ上的讨论发下来. huxin 10:35:19你们现在超时了是咋办的,首先超时了,回复用户肯定是要的 huxin 10:36:14超时了用户实际是不知道这业务是成功还失败了 ...
- STL中vector、list、deque和map的区别
1 vector 向量 相当于一个数组 在内存中分配一块连续的内存空间进行存储.支持不指定vector大小的存储.STL内部实现时,首先分配一个非常大的内存空间预备进行存储,即capac ...
- MySQL--详细查询操作(单表记录查询、多表记录查询(连表查询)、子查询)
一.单表查询 1.完整的语法顺序(可以不写完整,其次顺序要对) (不分组,且当前表使用聚合函数: 当前表为一组,显示统计结果 ) select distinct [*,查询字段1,查询字段2,表达式, ...