初步认识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直接路径加载--append的深度解析
㈠ 直接路径加载和buffer cache 直接路径插入的数据不经过buffer cache,从PGA直接把数据格式化成Oracle块 然后由普通的Oracle ...
- [译]GLUT教程 - 移动镜头2
Lighthouse3d.com >> GLUT Tutorial >> Input >> Move the Camera II 本节的最后一个示例是回顾.现在我们 ...
- An internal error occurred during: "J2EE Component Mapping Update".
1.错误描写叙述 An internal error occurred during: "J2EE Component Mapping Update". java.lang.Nul ...
- XML5632 : Only one root element is allowed. Line: 1, Column 1
奇葩啊, 最后查出来是因为有一个svg文件名对不上...
- PHPstorm如何导入字体主题
概要: 今天在安装phpstorm的时候发现导入字体主题时,出了问题,这个问题总是困惑我,并且曾经遇到过,没记录下来,所以想着这次记录下来吧.网上搜的稀里糊涂的,还是自己做个summary! 前提: ...
- CentOS Linux解决网卡报错Bringing up interface eth0.....
问题描述:在VMware里克隆出来的CentOS Linux,开机执行命令:ifconfig...没有看到eth0网卡.然后重启网卡又报以下错误:Bringing up interface eth0: ...
- 【v2.x OGE教程 11】 动画编辑器帮助文档
] 动画编辑器帮助文档 版本号 日期 作者 说明 1.0 2014-9-3 橙子游戏 文档创建 一.简单介绍 动画编辑器用于游戏动画的可视化编辑,支持序列帧动画和关键帧动画.通过解析生成的 ...
- poj 2524 Ubiquitous Religions（并查集）
Ubiquitous Religions Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 23168 Accepted: ...
- 记CBS一次动人心魄的数据保卫战
接触分布式存储已经有一年多的时间了,首次遇到存储侧三份数据都有异常的情况,三份数据异常意味着客户数据的丢失,这个对云存储来讲是致命的打击.为了保证数据的安全,CBS运维和开发的同学进行了持续两天一夜的 ...
- 【CodeM初赛B轮】F 期望DP
[CodeM初赛B轮]F 题目大意:有n个景点,m条无向边,经过每条边的时间需要的时间是li,在第i个景点游览花费的时间是ti,游览完第i个景点可以获得的满意度是hi.你的总时间为k,起初你等概率的选 ...