用express搭建網站

時間 2019-12-05

原文原文鏈接

先建個簡單的服務器

固然你先得安裝express npm install expresscss

//使用express，若是這裏的代碼複製後運行不了請移步個人github下載源碼,順手star給我個小星星鼓勵哈
//http://github.com/sally2015/express-project
// npm install  運行node main 後訪問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){})默認匹配的路由是‘/’，多個use要使用next()方法，可是使用了，res.end()或者res.send()就不能使用next到達下一個use了html
app.get()是添加路由的方法，忽略大小寫，反斜槓，進行匹配時不考慮查詢字符串node

//不使用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');
*/

對定製的404頁面和500頁面的處理與對普通頁面的處理有所區別，用的不是app.get,而是app.use。app.use是express添加中間件的一種方法jquery
express中路由和中間件的添加順序相當重要，若是把404處理器放在全部的路由上面，普通頁面的路由就不能用了git
express能根據回調函數中的參數區分404和500處理器github

使用handlebars

(defaultLayout:'main')意味着除非你特別指明不然全部的視圖都是這個佈局ajax

var handlebars = require('express3-handlebars') //如今已經重命名爲express-handlebar了，因爲牽一髮可能要動全身，我這裏就不改了
.create({ 
    defaultLayout: 'main', // 設置默認佈局爲
});

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

建立一個views/layouts/main.handlebars文件express

<html lang="en">
<head>npm

<meta charset="UTF-8">
<title>Document</title>

</head>
<body>json

{{{body}}}

</body>
<html>

- {{{body}}}注意這裏是三個大括號，這個表達式會被每一個視圖本身的html取代
- 分別建立首頁、關於、40四、500頁面，後綴名都是handlebars
  - ```html
views/home.handlebars
=> <h1>welcome to home</h1>
views/about.handlebars
 =><h1>welcome to about</h1>
views/404.handlebars
 =><h1>not found - 404</h1>
views/500.handlebars
 =><h1>500 server error</h1>

視圖和靜態文件

express靠中間件處理靜態文件和視圖，中間件是一種模塊化手段，使請求處理更加容易
static中間件能夠將一個或多個目錄指派爲包含靜態資源的目錄，其中的資源不通過特殊處理直接發送到客戶端

app.use(express.static(__dirname+'/public'));
//如今全部文件均可以相對public直接進行訪問，例如public下面有一個img文
//件夾，那麼在handlebars中(不須要理會在handlebars的目錄結構)直接訪問
//路徑/img/logo.png

視圖和靜態資源的區別是它不必定是靜態的，html能夠動態構建
在項目下建一個public的子目錄，應該把static中間件加載全部路由以前

向handlebars裏傳遞參數

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

修改about文件

此時訪問就會獲得下面的結果

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

ch2講講怎麼快速、可維護的開發

使用自定義模塊

ch1爲了傳遞參數在main.js裏面定義了一個虛擬數據，爲了將數據分離出來，在根目錄下定義一個lib目錄，放置一個數據模塊m_data.js

var args = 'its a arguments';//虛擬一個參數

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()});
});

使用nodemon自動重啓服務器

每次修改main文件都要ctrl+c中止再運行很累，使用nodeman每次修改都會幫咱們重啓服務器
使用也很是簡單，npm install nodemon -g，運行nodemon main

頁面測試

須要一個測試框架Mocha ---- npm install mocha --save-dev 這裏dev的意思是隻在開發時依賴
mocha是要運行在客戶端的因此把mocha資源放在public目錄下
- public/vendor
- => node_modules/mocha/mocha.js
- => node_modules/mocha/mocha.css
測試一般須要一個assert函數
- npm install chai --save-dev
- node_modules/chai/chai.js => public/vendor
不讓測試一直運行
- 由於拖慢網站的速度，用戶也不須要看到測試結果
- 指望的狀況是在url後面加上?test=1才加載測試頁面
定義中間件來檢測查詢字符串中的test=1,放在全部路由以前
若是test=1出如今任何頁面的字符串查詢中，屬性res.locals.showTests就會被設爲true
res.locals對象是要傳給視圖上下文的一部分

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

引入測試框架

修改main.handlebars（之後簡寫main），修改head

<head>
    <title>Meadowlark Travel</title>
    {{#if showTests}}
        <link rel="stylesheet" href="/vendor/mocha.css">
    {{/if}}
    <script src='//code.jquery.com/jquery-2.0.2.min.js'></script>
</head>

這裏在head引入jquery是爲了方便測試
在</body>以前引入mocha和chai，還需引入一個qa/global-test.js腳本

{{#if showTests}}
        <div id="mocha"></div>
        <script src='/vendor/mocha.js'></script>
        <script src='/vendor/chai.js'></script>
        <script>
            mocha.ui('tdd');
            var assert = chai.assert;
        </script>
        <script src='/qa/tests-global.js'></script>
        {{#if pageTestScript}}
            <script src='{{pageTestScript}}'></script>
        {{/if}}
          <script>mocha.run()</script>
    {{/if}}

建立public/qa/tests-global.js全局測試腳本

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

訪問localhost：3000沒有任何變化，可是訪問localhost:3000?test=1,你會發現加載了測試的文件幫你作的這些東西

針對about頁面進行測試
- 這裏假設測試確保有總有一個指向聯繫咱們頁面的連接，建立一個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的參數

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

如今刷新頁面about會有一個錯誤的斷言

只要about模板中有一個連接，這個錯誤測試斷言就會消失
例如contact us

使用局部組件

場景定義一個天氣組件，在任何頁面均可以調用，這樣的須要重複調用的能夠用局部文件實現
- 新建一個views/partials/weather.handlebard

<div class="weatherWeight">
    {{#each weather.locations}}
        <div class="location">
            <h3>{{name}}</h3>
            <a href="{{forecastUrl}}">
                {{weather}},{{temp}}
            </a>
        </div>
    {{/each}}
</div>

在weatherData.js中放入虛擬數據

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

建立一箇中間件給res.locals.weather添加數據

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

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

將組件放在主頁home上

<h1>welcome to home</h1>
{{>weather}}

語法{> partialname}可讓你在視圖中包含一個局部文件，express-handlebars會在views/partials尋找
你能夠將這個語法放在任何你須要的頁面上

客戶端使用模板和動態獲取數據

客戶端使用handlebars須要加載handlebars文件，你能夠從node_moudles裏面找，像正常文件同樣引入便可
定義一個view/partials/ajaxtest.handlebars文件

<script id='ajaxtest' type='text/x-handlebars-template'>
    Marry hadd a little <b>\{{animal}}</b>
    its<b>\{{bodyPart}}</b>
    was <b>\{{adjective}}</b>as <b>\{{noun}}</b>
</script>
<button id='btn'>動態獲取數據<tton>
<div id="content">
    
</div>
<script>
    $(document).ready(function(){
        var template = Handlebars.compile($('#ajaxtest').html());
        
        $('#btn').click(function(){
            $.ajax('/data/ajaxtest',{
                success:function(data){
                    $('#content').html(template(data));
                }
            });
        });
    });
    
</script>

在main.js中設定接口

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