nodejs框架express準備登陸

目錄：

1. 安裝模板
2. 靜態資源
3. 添加視圖
4. 渲染視圖
5. url重定向

模板引擎

從本節課程開始咱們要使用express框架實現一個簡單的用戶登錄功能，讓咱們先準備一下相關資源。

在nodejs中使用express框架，它默認的是ejs和jade渲染模板，今天咱們就以ejs模板爲例，講述模板渲染網頁模板的基礎功能。

1. ejs模板安裝方法

npm install ejs

2. 目錄下安裝好了以後，如何調用呢，以下所示：

//指定渲染模板文件的後綴名爲ejs
app.set('view engine', 'ejs');

3. 默認ejs模板只支持渲染以ejs爲擴展名的文件，可能在使用的時候會以爲它的代碼書寫方式很不爽仍是想用html的形式去書寫，該怎麼辦呢，這時就得去修改模板引擎了，也就會用到express的engine函數。

4. engine註冊模板引擎的函數，處理指定的後綴名文件。

// 修改模板文件的後綴名爲html
app.set( 'view engine', 'html' );
// 運行ejs模塊
app.engine( '.html', require( 'ejs' ).__express );//兩個下劃線

"__express"，ejs模塊的一個公共屬性，表示要渲染的文件擴展名。

靜態資源

因爲環境的限制，這裏咱們就不使用靜態資源了，可是實際開發中咱們確定會用到，具體使用規則已在下面列出，可參考。

若是要在網頁中加載靜態文件（css、js、img），就須要另外指定一個存放靜態文件的目錄，當瀏覽器發出非HTML文件請求時，服務器端就會到這個目錄下去尋找相關文件。

1. 項目目錄下添加一個存放靜態文件的目錄爲public。

2. 在public目錄下在添加三個存放js、css、img的目錄，相應取名爲javascripts、stylesheets、images。

3. 而後就能夠把相關文件放到相應的目錄下了。

4. 好比，瀏覽器發出以下的樣式表請求：

<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">

服務器端就到public/stylesheets/目錄中尋找bootstrap.min.css文件。

有了靜態目錄文件，咱們還得在啓動文件裏告訴它這個靜態文件路徑，須要指定一下，以下所示：

app.use(express.static(require('path').join(__dirname, 'public')));

PS：express.static —— 指定靜態文件的查找目錄。

使用use函數調用中間件指定express靜態訪問目錄，'public'就是咱們咱們新建的用來存放靜態文件的總目錄。

添加視圖

好，下面咱們就來添加網頁模板了，項目中咱們會新建一個目錄用來單獨存放模板文件，這裏咱們就統一放到根路徑上了。

下面開始新建index.html、login.html、home.html三個頁面。

1. index.html頁面參考內容以下：

<div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
    <div style="margin-left: 35px;">
        <h1>首頁</h1>
        <form action="#"  role="form" style="margin-top: 90px;margin-left: 60px;">
            <h1>歡迎進入首頁！</h1>
            <div style="margin-top: 145px;">
                <input type="button" value="登 陸">
            </div>
        </form>
    </div>
</div>

 

2. login.html頁面參考內容以下：

...
<title>用戶登陸</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
...
 
<div style="height:300px;width:350px;margin:100px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
　　<div style="width:200px;margin:auto;margin-top:50px;">
　　　　<h1>用戶登陸</h1>
　　　　<form action="#" role="form" method="post">
　　　　　　<input id="username" type="text" name="username" style="margin: 20px 0px;">
　　　　　　<input id="password" type="password" name="password">
　　　　　　<div style="margin-top:30px;margin-left:125px;">
　　　　　　　　<input type="button" value="登 陸">
　　　　　　</div>
　　　　</form>
　　</div>
</div>

 

3. home.html頁面參考內容以下：

<div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
　　<div style="margin-left: 45px;">
　　　　<h1>主頁</h1>
　　　　<form action="#" role="form" style="margin-top: 90px;">
　　　　　　<h1>登錄成功！</h1>
　　　　　　<div style="margin-top: 145px;">
　　　　　　　　<input type="button" value="退 出">
　　　　　　</div>
　　　　</form>
　　</div>
</div>

訪問視圖

咱們要如何對網頁模板進行訪問呢，這就要用到res對象的render函數了。

1. render函數，對網頁模板進行渲染。

2. 格式：res.render(view, [locals], callback);

3. 參數view就是模板的文件名callback用來處理返回的渲染後的字符串，options、callback可省略，在渲染模板時[locals](JSON格式)可爲其模板傳入變量值，在模板中就能夠調用所傳變量了，在後面咱們會講述具體使用方法，也可先自行使用看其效果。

4. 好比渲染咱們剛剛添加的index.html頁面，咱們就能夠在app.js中寫入以下內容：

var express = require('express');
var app = express();
var path = require('path');
 
app.set('views', __dirname);
 
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.get('/', function(req, res) {
　　res.render('index');
});
 
app.listen(80);

運行以後在測試地址咱們就能夠看到所渲染的index頁面了，試一試其餘頁面是否也可渲染成功？

4. 和靜態文件同樣，咱們也要設置views存放的目錄，以下：

// 設定views變量，意爲視圖存放的目錄
app.set('views', __dirname);

有了網頁模板和指定目錄，下面就能夠訪問它們了。

redirect基本用法

redirect方法容許網址的重定向，跳轉到指定的url而且能夠指定status，默認爲302方式。

格式：res.redirect([status], url);

例1：使用一個完整的url跳轉到一個徹底不一樣的域名。

res.redirect("http://www.hub wiz.com");

例2：跳轉指定頁面，好比登錄頁，以下：

res.redirect("login");

後面咱們開始實現登錄功能，先試一下redirect重定向，跳轉到咱們網站如何？

參考資料： http://www.dwz.cn/3e6UbG

本文連接： http://www.cnblogs.com/jasonnode/p/4487510.html