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 ...
随机推荐
- 《一头扎进SpringMvc视频教程》Rest风格的资源URL
5.@PathVariable和@RequestParam的区别 请求路径上有个id的变量值,可以通过@PathVariable来获取 @RequestMapping(value = "/ ...
- ubuntu16.04配置anaconda环境
0 - 下载安装包 推荐到清华镜像下载.我选择的是Anaconda3-5.1.0-Linux-x86_64.sh. 1 - 安装Anaconda 然后切换到安装包目录,执行下面命令,期间一直按回车或者 ...
- shell编程 之 流程控制（条件语句和循环语句）
1 if ...else... 基本格式: if condition then commend else commend fi 当然也可以写到一行,用[ ]表明边界,用:表示分行.比如: if [ $ ...
- ubuntu server命令行搭建虚拟专用网
问题: 在做一个国外的开源项目,需要用到很多 ubuntu 上特定版本的应用,由于国内墙的问题,导致Ubuntu 14.04在需要添加一些国外的库的时候(add-apt-repository ppa: ...
- GAN_李弘毅讲解
GAN_李弘毅讲解: 上式中,xi从data中sample的一部分,现在的目的就是最大化这个似然函数,使得Generator最可能产生data中的这些sample: 上式中之所以如此设计V函数,是为了 ...
- 数据库的OLE字段写入长二进制文件
//'*************************************************************************************** //'函数:将数据 ...
- linux系统设置静态IP，DHCP网络服务，DNS
一.设置静态IP及DHCP网络服务 kk@yuanqiangfei:~$ cat /etc/network/interfaces # This file describes the network i ...
- svn服务器镜像备份
server master 192.168.0.100-->源版本库 server slave 192.168.0.101-->镜像版本库 1.初始化svnsync init s ...
- Git如何克隆远程仓库
1.首先选择一个合适的地方创建一个空目录 mkdir learngit 2.通过git Init命令把这个目录变成git可以管理的仓库,瞬间git就把仓库建好了 3.将编写的文件放到 lear ...
- page_cleaner: 1000ms intended loop took 4724ms. The settings might not be optimal. (flushed=1037, during the time.)
2018-07-09T14:28:56.853600Z 0 [Note] InnoDB: page_cleaner: 1000ms intended loop took 4724ms. The set ...