初步认识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项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来,用起来还是灵活的:最近刚开始学习,写篇博客总结下,涉 ...
随机推荐
- 【数据挖掘】分类之Naïve Bayes（转载）
[数据挖掘]分类之Naïve Bayes 1.算法简介 朴素贝叶斯(Naive Bayes)是监督学习的一种常用算法,易于实现,没有迭代,并有坚实的数学理论(即贝叶斯定理)作为支撑. 本文以拼写检查作 ...
- Linux的各个文件夹名称解释(FHS)
对于接触和已经接触过一段时间Linux的使用者来说,系统的各个文件夹名字还是挺让人费解的,什么etc,usr,var等等,大部分也是耳濡目染才有一个大概的概念,例如usr是存放自己编译安装的软件,et ...
- Mysql：1235 - This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery'错误解决
select distinct b.sale_count from product_sale b where b.pro_id in (select a.pro_id from product a L ...
- ubuntu防火墙 ufw配置
https://www.cnblogs.com/ylan2009/articles/2321136.html
- window 怎么样让nginx开机自启动
安装Nginx 下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),之后解压到需要放置的位置(D:\xampp\nginx) 将N ...
- Cocos2d-x中使用第三方so库
项目中假设使用到第三方的SDK,大多数是以.so动态共享库的文件打包给我们使用.怎样使用他们,见以下分析. 1.获得库文件 假如我们得到的库文件是libxxx.so(注:关于.so文件的命名方式,可百 ...
- 【BZOJ1061/3265】[Noi2008]志愿者招募/志愿者招募加强版 单纯形法
[BZOJ1061][Noi2008]志愿者招募 Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难题:为即将启动的奥运新项目招募 ...
- 【BZOJ3698】XWW的难题 有上下界的最大流
[BZOJ3698]XWW的难题 Description XWW是个影响力很大的人,他有很多的追随者.这些追随者都想要加入XWW教成为XWW的教徒.但是这并不容易,需要通过XWW的考核.XWW给你出了 ...
- WCF基础之承载服务和生成客户端
wcf的承载有三种iis.was和自承载,它们如何承载园子里有很多,就不多赘述. 自iis7以后iis支持http和非http的协议,使用iis承载服务与其他两种承载相比,我觉的最明显的是was和自承 ...
- 九度OJ 1349：数字在排序数组中出现的次数 （排序、查找）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2489 解决:742 题目描述: 统计一个数字在排序数组中出现的次数. 输入: 每个测试案例包括两行: 第一行有1个整数n,表示数组的大小. ...