码迷，mamicode.com
首页 > 其他好文 > 详细

初步认识Express框架渲染视图

时间：2016-01-21 19:39:54      阅读：301      评论：0      收藏：0      [点我收藏+]

标签：

给出一个简单的例子，讲述模板渲染的基础功能

在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>
View Code

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: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    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: 0;
    -webkit-flex: 0 0 33.3333%;
    -moz-box-flex: 0;
    -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: 0;
    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: 0;
    left: 0;
    width: 104px;
    height: 16px;
    text-align: center;
    line-height: 1.2;
    font-style: normal;
    font-size: 9px;
    color: #FF5F08;
    z-index: 3;
    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
}
View Code

在项目下新建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框架渲染视图

标签：

原文地址：http://www.cnblogs.com/alice626/p/5149138.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！