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 ...
随机推荐
- B - Tree Rotations HYSBZ - 2212 （线段树合并）
题目链接:https://cn.vjudge.net/contest/287725#problem/B 题目大意:现在有一棵二叉树,所有非叶子节点都有两个孩子.在每个叶子节点上有一个权值(有n个叶子节 ...
- Ajax 及里面的XStream《黑马程序员_超全面的JavaWeb视频教程vedio》
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- Tip：JSP标签也称之为Jsp Action(JSP动作)元素
JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. ================ &l ...
- Applet、Scriptlet与Servlet
Applet.Scriptlet与Servlet - 青春念邵的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/mo_fan_qing_wa/article/deta ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- C/C++ assert()函数用法总结
1. 简介 assert宏的原型定义在<assert.h>中,其作用是如果它的条件返回错误,则终止程序执行. 原型定义: #include <assert.h>void ass ...
- wchar_t*转换string
场景 wchar[]转换string 实现代码 #include "stdafx.h" #include <iostream> #include <windows ...
- mlock实现原理及应用【转】
转自:https://blog.csdn.net/yiyeguzhou100/article/details/78085857 https://wenku.baidu.com/view/e25b4af ...
- python之async-timeout模块
async-timeout 兼容async的超时的上下文管理器 async-timeout的timeout和asyncio的wiat_for比较 首先从使用上来说asyncio.wait_for(aw ...
- python3+selenium入门12-警告框处理
在WebDriver中要处理JS生成的alert.confirm以及prompt,需要使用到switch_to_alert()定位到alert/confirm/prompt,然后再使用text.acc ...