初步认识Express框架渲染视图
给出一个简单的例子，讲述模板渲染的基础功能
在nodejs中使用express框架，默认的是ejs和jade渲染模板，以下是以ejs模板进行解析
1、ejs 模板安装
npm install ejs
目录安装好了之后，如何调用了，如下所示：
app.set("view engine","ejs");
2、默认的ejs模板只支持ejs为扩展名的文件，如果需要用html方式去书写，需要修改模板引擎，也就是express的engine函数
3、engine注册模板引擎的函数，处理指定的后缀名文件。
//修改模板文件的后缀名为html
app.set("view engine","html");
//运行ejs模板
app.engine( '.html', require( 'ejs' ).__express );
现在直接给一个渲染模板的例子：
1、在项目的目录下添加一个放静态文件的目录public以及放视图的文件夹views
2、在public目录下在添加三个存放js、css、img的目录，相应取名为javascripts、stylesheets、images。
3、在views中新建index.html,login.html,home.html三个页面
index.html文件内容如下：
<html>
<header>
<title>首页</title>
<link href="/stylesheets/index.css" rel="stylesheet">
</header>
<body>
<div class="divMsg" style="text-align: center;">
<h2>欢迎来到首页</h2>
<form action="#" role="form">
<div style="">
<input type="button" value="登录">
</div>
</form>
</div>
<nav id="nav" class="nav-entry">
<div class="row">
<div class="col col-33">
<a id="c_hotel" title="酒店">酒店</a>
</div>
<div class="col col-33">
<a id="c_hotel_international" title="海外酒店">海外酒店</a>
<a id="c_hotel_sale" title="特惠酒店">特惠酒店</a>
</div>
<div class="col col-33">
<a id="c_group" title="团购">团购</a>
<a id="c_hotel_inn" title="客栈 公寓">客栈<span class="point">.</span>公寓</a>
</div>
</div>
</nav>
<div class="pic-banner">
<ul>
<li>
<a><img src="//webresource.c-ctrip.com/ResCRMOnline/R5/html5/images/zzz_pic_salead01.png" alt=""></a>
</li>
<li>
<a><img src="http://images3.c-ctrip.com/rk/apph5/C1/201601/app_home_ad24_744_288.png" class="js_bottom" alt=""></a>
</li>
</ul>
</div>
</body>
</html>
4、在stylesheets中新建index.css
index.css内容如下：
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.col {
-webkit-box-flex:;
-webkit-flex:;
-moz-box-flex:;
-moz-flex:;
-ms-flex:;
flex:;
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.col-33,.col-34 {
-webkit-box-flex:;
-webkit-flex: 0 0 33.3333%;
-moz-box-flex:;
-moz-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%
}
.nav-entry {
padding: 5px;
font-size: 15px
}
.nav-entry .row {
margin-bottom: 5px;
height: 6em
}
.nav-entry .row:last-of-type {
margin-bottom: 0
}
.nav-entry .col {
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
height: 100%
}
.nav-entry .col a {
height: 50%
}
.nav-entry .row:nth-child(1) .col a {
background-color: #ff697a
}
.nav-entry .row:nth-child(2) .col a {
background-color: #3d98ff
}
.nav-entry .row:nth-child(3) .col a {
background-color: #44c522
}
.nav-entry .row:nth-child(4) .col a {
background-color: #fc9720
}
.nav-entry .row:nth-child(1) .col:first-of-type a,.nav-entry .row:nth-child(2) .col:first-of-type a,.nav-entry .row:nth-child(3) .col:first-of-type a {
height: 100%
}
.nav-entry .col a+a {
border-top: 1px solid #fff
}
.nav-entry .col:first-of-type a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px
}
.nav-entry .col:last-of-type a:nth-child(1) {
border-top-right-radius: 5px
}
.nav-entry .col:last-of-type a:nth-child(2) {
border-bottom-right-radius: 5px
}
.nav-entry .row:nth-child(4) .col:first-of-type a:nth-child(1) {
border-bottom-left-radius: 0
}
.nav-entry .row:nth-child(4) .col:first-of-type a:nth-child(2) {
border-top-left-radius: 0
}
.nav-entry .col>a {
position: relative;
display: block;
font-size: 1em;
color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,.2);
text-align: center;
line-height: 3em;
box-sizing: border-box;
overflow: hidden
}
.nav-entry .col>a em {
font-style: normal;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
white-space: nowrap
}
.nav-entry .row:nth-child(1) .col:first-of-type a:after,.nav-entry .row:nth-child(2) .col:first-of-type a:after,.nav-entry .row:nth-child(3) .col:first-of-type a:after,.nav-entry .wallet,.nav-entry .ico_shadow {
position: absolute;
bottom: 10px;
left: 50%;
content: "";
background: url(//pic.c-ctrip.com/h5/home/un_ico_home_v66.png) 0 0 no-repeat;
-webkit-background-size: 104px 326px;
background-size: 104px 326px
}
.nav-entry li .ico_shadow {
bottom: -12px;
left:;
width: 104px;
height: 82px;
background-position: 0 -30px
}
.nav-entry .row:nth-child(1) .col:first-of-type a:after {
width: 40px;
height: 33px;
margin-left: -20px;
background-position: 0 -130px
}
.nav-entry .row:nth-child(2) .col:first-of-type a:after {
bottom: 15px;
width: 43px;
height: 28px;
margin-left: -23px;
background-position: -50px -120px
}
.nav-entry .row:nth-child(3) .col:first-of-type a:after {
width: 35px;
height: 43px;
margin-left: -18px;
background-position: 0 -180px
}
.nav-entry .wallet {
bottom:;
left:;
width: 104px;
height: 16px;
text-align: center;
line-height: 1.2;
font-style: normal;
font-size: 9px;
color: #FF5F08;
z-index:;
background: url(//pic.c-ctrip.com/h5/home/tag_summer.png) 0 0 no-repeat;
-webkit-background-size: 104px 17px;
background-size: 104px 17px
}
.pic-banner {
margin: 0 5px 5px 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.pic-banner ul {
display: table;
width: 100%;
border: 1px solid #d8d8d8;
border-radius: 5px
}
.pic-banner li {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 50%
}
.pic-banner li:first-child {
border-right: 1px solid #d8d8d8
}
.pic-banner img {
width: 100%;
min-height: 59px;
vertical-align: middle
}
.pic-banner li:first-of-type a img {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px
}
.pic-banner li:last-of-type a img {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px
}
在项目下新建app.js、内容如下：
var express=require("express");
var path=require("path");
var ejs=require('ejs');
var app=express();
app.set("views",path.join(__dirname,"views"));
app.set("view engine","html");
app.use(express.static(require('path').join(__dirname, 'public')));
app.engine(".html",ejs.__express);
app.get("/",function(req,res){
res.render("index");
});
app.listen(8088);
render函数对模板进行渲染
格式为：res.render(view,[locals],callback);
参数view就是模板的文件名callback用来处理返回的渲染后的字符串，options、callback可省略，在渲染模板时locals可为其模板传入变量值，在模板中就可以调用所传变量了，在后面我们会讲述具体使用方法，也可先自行使用看其效果
备注：
在html文件中引用css的路径需要注意，例如index.html引用index.css样式代码为：
<link href="/stylesheets/index.css" rel="stylesheet">
为什么不从public目录开始了？那是因为代码中设置了启动静态文件的目录
app.use(express.static(require('path').join(__dirname, 'public')));
代表从public目录下去查找静态资源，所以引入css不需要从public开始
目录结构如下图：
运行app.js，在浏览器输入地址http://127.0.0.1:8088/ 便可以看到浏览器加载了index.html网页的内容。
初步认识Express框架渲染视图的更多相关文章
- node.js之express框架
之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? expr ...
- 【Node.js】一、搭建基于Express框架运行环境+更换HTML视图引擎
1)安装express generator生成器 这个express generator生成器类似于vue-cli脚手架工具,用来创建一个后端项目,首先我们要对生成器进行全局安装,在cmd中输入下 ...
- 问题：JFinal框架使用FreeMarker渲染视图报错
本人用的是JFinal-3.4. 问题描述: 在JFinal框架中使用FreeMarker渲染视图时,报 Caused by: java.lang.ClassNotFoundException: fr ...
- express框架初步
express框架初步使用 var exp = require('express'); var ejs = require('ejs'); var app = new exp(); app.set(& ...
- Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...
- nodejs学习笔记二：解析express框架项目文件
上一章介绍了如何去创建一个express框架的工程项目,这章介绍一下express框架下的文件和用法解析,上一张我们创建的工程项目结构图如下: models是不属于原工程项目结构,为了实现数据模型后添 ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- express框架+jade+bootstrap+mysql开发用户注册登录项目
完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...
- express框架开发案例
express是基于Node.js平台的web应用开发框架,用express框架开发web项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来,用起来还是灵活的:最近刚开始学习,写篇博客总结下,涉 ...
随机推荐
- oracle查询当前会话数量
SELECT a.inst_id,sid,username,event,sql_id,a.PROGRAM FROM gv$session a WHERE a.STATUS='ACTIVE' AND u ...
- 转：MSSQL SERVER行转列 列转行
SQL Server中行列转换 Pivot UnPivot PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PI ...
- Java并发专题 带返回结果的批量任务执行
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/27250059 一般情况下,我们使用Runnable作为基本的任务表示形式,但是R ...
- 信号量semaphore解析
1 基础概念 信号量在创建时须要设置一个初始值,表示同一时候能够有几个任务能够訪问该信号量保护的共享资源.初始值为1就变成相互排斥锁(Mutex),即同一时候仅仅能有一个任务能够訪问信号量保护的共享资 ...
- IT人和普洱茶
IT人与普洱茶 作为一个平凡的IT人,在小孩眼中我就像黑客帝国的主角一样了不起:在亲戚眼中我是在写字楼做办公室吹空调的人:在朋友眼中我就是一个会写代码.掌握高科技术的人:在女友眼中我是一个在名企工作的 ...
- 【BZOJ3991】[SDOI2015]寻宝游戏 树链的并+set
[BZOJ3991][SDOI2015]寻宝游戏 Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩 ...
- CAFFE学习笔记（二）Caffe_Example之测试mnist
这一次的博客将接着上一次的内容,简单讲解一下如何使用训练后的网络lenet_iter_5000.caffemodel与lenet_iter_10000.caffemodel. 1.在网络训练完毕后,将 ...
- EventLoop（netty源码死磕4）
精进篇:netty源码 死磕4-EventLoop的鬼斧神工 目录 1. EventLoop的鬼斧神工 2. 初识 EventLoop 3. Reactor模式回顾 3.1. Reactor模式的组 ...
- PAT 1053. 住房空置率 (20)
在不打扰居民的前提下,统计住房空置率的一种方法是根据每户用电量的连续变化规律进行判断.判断方法如下: 在观察期内,若存在超过一半的日子用电量低于某给定的阈值e,则该住房为“可能空置”: 若观察期超过某 ...
- liferay 指定默认首页
1.登录liferay后,点击控制面板-->设置--> portal设置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3hpbmdf ...