初步认识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>

View Code