摘要：先建個(gè)簡(jiǎn)單的服務(wù)器當(dāng)然你先得安裝使用，如果這里的代碼復(fù)制后運(yùn)行不了請(qǐng)移步我的下載源碼順手給我個(gè)小星星鼓勵(lì)哈運(yùn)行后訪問(wèn)默認(rèn)匹配的路由是，多個(gè)要使用方法，但是使用了，或者就不能使用到達(dá)下一個(gè)了是添加路由的方法，忽略大小寫，反斜杠，進(jìn)行匹配時(shí)不

當(dāng)然你先得安裝express npm install express

//使用express，如果這里的代碼復(fù)制后運(yùn)行不了請(qǐng)移步我的github下載源碼,順手star給我個(gè)小星星鼓勵(lì)哈
//http://github.com/sally2015/express-project
// npm install  運(yùn)行node main 后訪問(wèn)loaclhost:3000
var express = require("express");
var app = express();
app.set("port", process.env.PORT || 3000);

app.get("/",function(req, res){
    res.send("home");
    
});
app.use("/about",function(req, res){
    res.send("about");
    
});
app.use(function(req, res){


    res.send("404");
    
});

app.use(function(req, res, next){

    res.send("500");
});

app.listen(app.get("port"), function () {
    console.log("Express started on http:localhost"+app.get("port"));
});

app.use(function(req,res,next){})默認(rèn)匹配的路由是‘/’，多個(gè)use要使用next()方法，但是使用了，res.end()或者res.send()就不能使用next到達(dá)下一個(gè)use了

app.get()是添加路由的方法，忽略大小寫，反斜杠，進(jìn)行匹配時(shí)不考慮查詢字符串

//不使用express你可能要這么寫
/*
* var http = require("http");
* var server =  http.createServer(function(req, res){
*    if(req.url === "/"){
        res.setHeader("Content-type","text-plain");
        res.write("……");&&res.end();
*   }
*}).listen(3000,"localhost");
*/

對(duì)定制的404頁(yè)面和500頁(yè)面的處理與對(duì)普通頁(yè)面的處理有所區(qū)別，用的不是app.get,而是app.use。app.use是express添加中間件的一種方法

express中路由和中間件的添加順序至關(guān)重要，如果把404處理器放在所有的路由上面，普通頁(yè)面的路由就不能用了

express能根據(jù)回調(diào)函數(shù)中的參數(shù)區(qū)分404和500處理器

(defaultLayout:"main")意味著除非你特別指明否則所有的視圖都是這個(gè)布局

var handlebars = require("express3-handlebars") //現(xiàn)在已經(jīng)重命名為express-handlebar了，由于牽一發(fā)可能要?jiǎng)尤恚疫@里就不改了
.create({ 
    defaultLayout: "main", // 設(shè)置默認(rèn)布局為
});

app.engine("handlebars", handlebars.engine); // 將express模板引擎配置成handlebars 
app.set("view engine", "handlebars");

創(chuàng)建一個(gè)views/layouts/main.handlebars文件

{{{body}}}

- {{{body}}}注意這里是三個(gè)大括號(hào)，這個(gè)表達(dá)式會(huì)被每個(gè)視圖自己的html取代
- 分別創(chuàng)建首頁(yè)、關(guān)于、404、500頁(yè)面，后綴名都是handlebars
  - ```html
views/home.handlebars
=> 
welcome to home
views/about.handlebars
 =>
welcome to about
views/404.handlebars
 =>
not found - 404
views/500.handlebars
 =>
500 server error

express靠中間件處理靜態(tài)文件和視圖，中間件是一種模塊化手段，使請(qǐng)求處理更加容易

static中間件可以將一個(gè)或多個(gè)目錄指派為包含靜態(tài)資源的目錄，其中的資源不經(jīng)過(guò)特殊處理直接發(fā)送到客戶端

app.use(express.static(__dirname+"/public"));
//現(xiàn)在所有文件都可以相對(duì)public直接進(jìn)行訪問(wèn)，例如public下面有一個(gè)img文
//件夾，那么在handlebars中(不需要理會(huì)在handlebars的目錄結(jié)構(gòu))直接訪問(wèn)
//路徑/img/logo.png

視圖和靜態(tài)資源的區(qū)別是它不一定是靜態(tài)的，html可以動(dòng)態(tài)構(gòu)建

在項(xiàng)目下建一個(gè)public的子目錄，應(yīng)該把static中間件加載所有路由之前

var args = "its a arguments";//虛擬一個(gè)參數(shù)
//修改此時(shí)的about路由
app.get("/about", function(req,res){
    
    res.render("about", {args:args});
});

修改about文件

此時(shí)訪問(wèn)就會(huì)得到下面的結(jié)果

以上代碼在https://github.com/sally2015/... ch1
---------------------------------------------分割線----------------------------------------------

ch2講講怎么快速、可維護(hù)的開(kāi)發(fā)

ch1為了傳遞參數(shù)在main.js里面定義了一個(gè)虛擬數(shù)據(jù)，為了將數(shù)據(jù)分離出來(lái)，在根目錄下定義一個(gè)lib目錄，放置一個(gè)數(shù)據(jù)模塊m_data.js

var args = "its a arguments";//虛擬一個(gè)參數(shù)

exports.getData = function(){
    return args;
}

main.js

var m_data = require("./lib/m_data.js");
app.get("/about", function(req,res){
    
    res.render("about", {args:m_data.getData()});
});

每次修改main文件都要ctrl+c停止再運(yùn)行很累，使用nodeman每次修改都會(huì)幫我們重啟服務(wù)器

使用也非常簡(jiǎn)單，npm install nodemon -g，運(yùn)行nodemon main

需要一個(gè)測(cè)試框架Mocha ---- npm install mocha --save-dev 這里dev的意思是只在開(kāi)發(fā)時(shí)依賴

mocha是要運(yùn)行在客戶端的所以把mocha資源放在public目錄下

public/vendor

=> node_modules/mocha/mocha.js

=> node_modules/mocha/mocha.css

測(cè)試通常需要一個(gè)assert函數(shù)

npm install chai --save-dev

node_modules/chai/chai.js => public/vendor

不讓測(cè)試一直運(yùn)行

因?yàn)橥下W(wǎng)站的速度，用戶也不需要看到測(cè)試結(jié)果

期望的情況是在url后面加上?test=1才加載測(cè)試頁(yè)面

定義中間件來(lái)檢測(cè)查詢字符串中的test=1,放在所有路由之前

如果test=1出現(xiàn)在任何頁(yè)面的字符串查詢中，屬性res.locals.showTests就會(huì)被設(shè)為true

res.locals對(duì)象是要傳給視圖上下文的一部分

app.use(function(req, res, next){
    res.locals.showTests = app.get("env") !== "production" 
          && req.query.test === "1";
    next();
});

修改main.handlebars（以后簡(jiǎn)寫main），修改head

    
    {{#if showTests}}
        
    {{/if}}
    

這里在head引入jquery是為了方便測(cè)試

在之前引入mocha和chai，還需引入一個(gè)qa/global-test.js腳本

{{#if showTests}}
        

        
        
        
        
        {{#if pageTestScript}}
            
        {{/if}}
          
    {{/if}}

創(chuàng)建public/qa/tests-global.js全局測(cè)試腳本

suite("Global Tests", function(){
    test("page has a valid title", function(){
        assert(document.title && document.title.match(/S/) && 
          document.title.toUpperCase() !== "TODO");
    });
});

訪問(wèn)localhost：3000沒(méi)有任何變化，但是訪問(wèn)localhost:3000?test=1,你會(huì)發(fā)現(xiàn)加載了測(cè)試的文件幫你做的這些東西

針對(duì)about頁(yè)面進(jìn)行測(cè)試

這里假設(shè)測(cè)試確保有總有一個(gè)指向聯(lián)系我們頁(yè)面的鏈接，創(chuàng)建一個(gè)public/qa/tests-about.js

suite(""About" Page Tests", function(){
  test("page should contain link to contact page", function(){
      assert($("a[href="/contact"]").length);
  });
});

在main.js上改變路由/about的參數(shù)

app.get("/about", function(req,res){
  
  res.render("about", {
      args:m_data.getData(),
      pageTestScript:"/qa/tests-about.js"
  });
});

現(xiàn)在刷新頁(yè)面about會(huì)有一個(gè)錯(cuò)誤的斷言

只要about模板中有一個(gè)鏈接，這個(gè)錯(cuò)誤測(cè)試斷言就會(huì)消失

例如contact us

場(chǎng)景定義一個(gè)天氣組件，在任何頁(yè)面都可以調(diào)用，這樣的需要重復(fù)調(diào)用的可以用局部文件實(shí)現(xiàn)

新建一個(gè)views/partials/weather.handlebard

    {{#each weather.locations}}
        

            
{{name}}
            
                {{weather}},{{temp}}
            
        
    {{/each}}

在weatherData.js中放入虛擬數(shù)據(jù)

function getWeatherData(){

    return {
        locations:[
            {
                name:"廣州",
                forecastUrl:"https://github.com/sally2015",
                weather:"廣州的溫度情況",
                temp:"溫度"
            },
            {
                name:"深圳",
                forecastUrl:"https://github.com/sally2015",
                weather:"深圳的溫度情況",
                temp:"溫度"
            },
            {
                name:"珠海",
                forecastUrl:"https://github.com/sally2015",
                weather:"珠海的溫度情況",
                temp:"溫度"
            }
        ]
    }
}
exports.getWeatherData = getWeatherData

創(chuàng)建一個(gè)中間件給res.locals.weather添加數(shù)據(jù)

//給res.locals.weather添加數(shù)據(jù)
app.use(function(req, res, next){
    if(!res.locals.weather){
        res.locals.weather = {};

    }
    res.locals.weather = m_weatherData.getWeatherData();
    next();
});

將組件放在主頁(yè)home上

welcome to home
{{>weather}}

語(yǔ)法{> partialname}可以讓你在視圖中包含一個(gè)局部文件，express-handlebars會(huì)在views/partials尋找

你可以將這個(gè)語(yǔ)法放在任何你需要的頁(yè)面上

客戶端使用handlebars需要加載handlebars文件，你可以從node_moudles里面找，像正常文件一樣引入即可

定義一個(gè)view/partials/ajaxtest.handlebars文件

動(dòng)態(tài)獲取數(shù)據(jù)

    

在main.js中設(shè)定接口

app.get("/data/ajaxtest", function(req, res) {
    res.json({
            animal:"dog",
            bodyPart:"tail",
            adjective : "sharp",
            noun : "run"
        });
});

在你想要的視圖里面加入{{>ajaxtest}}

這時(shí)候當(dāng)你點(diǎn)擊按鈕就會(huì)請(qǐng)求到數(shù)據(jù)，注意接口使用的方法是json

--------------------分割線------------------------------------ch2 https://github.com/sally2015/...