Nodejs初階之express

時間 2020-09-20

標籤 nodejs express 简体版

原文原文鏈接

　　PS: 2014/09/24 更新《Express 4.X 啓航指南》，歡迎閱讀和評論:)

　　老規矩，開頭部分都是些自娛自樂的隨想，想到哪寫到哪...

　　到今天俺已經在俺廠工做倆年零幾天了，工做以來頭一回在一家企業工做超倆年，對於這倆年確實只有滿滿的成就感，不論是工做仍是生活...寫到這句忽然又想寫篇這倆年的總結，等這篇文章發了以後就着手整理吧，吼吼。

　　那篇《node.js 初體驗》好像才發生在前幾月，沒想到時間已過兩年有多。且看到文章末尾處那句：「這篇文章只會是一個開始」令俺臉紅掩面

，尼瑪真沒想到這一開始就開始了兩年多，這讓老夫情何以堪

...

　　好吧，反正臉皮厚已不是倆三天，讓俺裝傻混過去吧，咱往前看纔是硬道理不是。俺必定痛改前非、洗心革面、好好改造，今年中心的當心思是把【前端攻略系列】折騰點名堂出來，厚積薄發的時刻來鳥。

　　Node不得不寫寫，沒轍呀，太火！看看最近的前端圈子吧，沒弄過幾行Node代碼都很差意思和別人打招呼；不折騰點Node的小平臺、小工具，去食堂都很差意思多搞幾碗飯，因此俺也就順大潮把本身的工做筆記整理整理，試試可否寫好這篇Nodejs系列。

　　好吧，不開玩笑噠~~~介紹這篇和接下來幾篇Node文章的內容，基本都屬於Node的初階，略偏實戰，進階和高階內容正在YY中，最終的目錄與里程碑下一篇應該差很少能定下來。

　　本篇以介紹Express爲話題，延伸出用Node開發小頁面，而後其中穿插概述express主要的API、路由的原理、Node模塊概念，順便也會介紹本身使用Node工具等等。默認看官們都具有JavaScript基礎，因此過於基礎的內容俺就不浪費篇幅咯，GOGO。

　　最後自我爆料一個吧。老婆已回家養胎，因此俺窮的只有時間了。有時間好好加班拼工做，有時間好好寫博(客)拼積累...諸如心靈雞湯什麼的就不灌各位啦，喝多了反胃:)

　　一不當心隨想就寫了那麼多，尼瑪炫酷狂拽屌炸天有木有！

-------------------------------------------- 華麗麗的分割線 --------------------------------------------

　　Node和NPM的安裝夠便捷了，不細說...有幾點基礎順手提一下：

安裝命令中的「-g」表示全局(global)
express的版本不是一般的「-v」來查看，而是「-V」
安裝express項目的命令以下
express -e nodejs-product

-e, --ejs add ejs engine support

-J, --jshtml add jshtml engine support (defaults to jade)
PS：模板引擎之類暫時沒必要care，不過俺當初學習搭建Node+express時用的是ejs，因此也就順手一直用着了

　　Node的小基友supervisor　　

　　每次修改代碼後會自動重啓。懶程序員就期望這種省事省力的工具活着了:)

　　安裝：npm install -g supervisor

　　執行：supervisor app.js

　　另外一個小基友forever

　　虛擬機一關node服務就關了，不過forever可讓node服務不中止，介紹以下，安裝和執行不細說啦，我懶：

　　forever是一個簡單的命令式nodejs的守護進程，可以啓動，中止，重啓App應用。forever徹底基於命令行操做，在forever進程之下，建立node的子進程，經過monitor監控node子進程的運行狀況，一旦文件更新，或者進程掛掉，forever會自動重啓node服務器，確保應用正常運行。

　　express項目目錄　　

　　如上圖就是一個express項目結構，簡單過一下：

app.js：項目入口，反正express愛叫app.js沒轍，你能夠改爲index.js或者main.js都成。至關於php項目中的 index.php、index.html
node_modules：存放項目的依賴庫
package.json：項目依賴配置及開發者信息(這個要說就說多了，仍是看文檔好，俺就不誤人子弟了。下期看看抽個小段單說Node模塊)
public：靜態文件如 css,js,img (PS:俺其實習慣叫static)
routes：路由文件(學習的重要攻克對象。尼瑪業務好很差，路由是關鍵)
Views：頁面文件(Ejs或者jade的模板，默認是jade，俺這用Ejs，在初階練手最重要，因此均可以試試)

打開View 文件發現index.ejs比較不習慣，因此對app.js進行小改動：

「app.set('view engine', 'ejs');」變成「app.engine('.html', ejs.__express);app.set('view engine', 'html');」
上一行出現的ejs變量須要require ejs模塊，增長代碼「var ejs = require('ejs');」

最終的app.js以下：

　　代碼小解：　　

由於針對的是初階入門，俺們仍是繼續過一下express的使用與Node的方法哈：

require() 用於在當前模塊中加載和使用其餘模塊；此方法是模塊的基礎，使用中大概有路徑的概念就行。PS：JS文件能夠去掉".js"後綴

　　 exports 表示模塊的導出對象，用於導出模塊的屬性和公共方法。在項目routes文件夾下有index.js和users.js（路由有細說），都使用到exports對象導出對象，如33行的routes.index和34行的user.list;

　　 PS：一個模塊的代碼只會在模塊第一次被使用時執行，不會因require屢次而被初始化屢次。

express() 表示建立express應用程序。簡單幾行代碼其實就能夠建立一個應用，以下：

     var express = require('express'); 
     var app = express(); 
     app.get('/', function(req, res){ 
          res.send('hello world'); 
          console.log('hello world');
     }); 
     app.listen('8808');

app.listen() 就是在給定的主機和端口上監聽請求，這個和node中http模塊的http.createServer(function(){...}).listen()效果一致；

app.set(name, value)和app.get(name)就是你想的那樣，set()爲設置 name 的值設爲 value，get()爲獲取設置項 name 的值。如俺app.js的圖片16行中的一句「app.set('port', process.env.PORT || 3000)」就是設置項目的port，在下面使用http.createServer時就可使用app.get('port')來獲取，只是俺偷懶沒用來着

；

瞭解app.engine()方法以前先看看express應用的安裝命令:「express -e nodejs-product」，其中的 -e 和 -J 咱們一開始已經提到，表示ejs和jade模板。

若是想把模板後綴改爲「.html」時就會用到app.engine方法，來從新設置模板文件的擴展名，好比想用ejs模板引擎來處理「.html」後綴的文件：app.engine('.html', require('ejs').__express);

app.engine(ext, callback) 註冊模板引擎的 callback 用來處理ext擴展名的文件。

　　 PS：__express不用去care，其實就是ejs模塊的一個公共屬性，表示要渲染的文件擴展名。

app.use([path], function) 使用中間件 function,可選參數path默認爲"/"。使用 app.use() 「定義的」中間件的順序很是重要，它們將會順序執行，use的前後順序決定了中間件的優先級(常常有搞錯順序的時候);

最後介紹個頗有用的express API：

app.render(view, [options], callback) 渲染 view, callback 用來處理返回的渲染後的字符串。

　　路由實戰：　　

路徑代碼應該是項目中最本機的一部分了。express中建立一個或者一套新的handle很是簡單，先看看express現有的，一下子咱們建立倆個實際的規則。

變量 routes 和 user 都是剛纔require的模塊，他們各自exports了index方法和list方法；其中Response.render()表示渲染view，同時傳進對應的數據，Response.send()爲發送一個響應；在設置路由時index和list方法做爲回調函數最終執行。

　　流程大概瞭解啦，俺們也就實際搞一把，最easy的一種方式，簡單倆步：

第一種方式就是在當前的routes/index.js或者routes/test.js中加幾行代碼以下
```
exports.test = function(req, res){
  res.send('test welcome.');
};
```
在app.js文件設置路由那塊加上app.get('/test', routes.test);

　　第二種方式就是多了兩步，先新建一個模塊如test.js文件，輸出而後exports對應的方法；在app.js中require這個模塊，再加一行設置路由即完成了。

　　快速炫起來，集成Bootstrap：　　

JS工程師使用Nodejs上手仍是以快速搭建網站爲主，因此纔會介紹Express，那麼爲了讓網站更快的體面起來，集成使用Bootstrap就是上佳選擇，很是喜歡其響應式佈局和總體系的腳手架。

PS：由於Bootstrap的JS插件都依賴jQeury，因此jQuery也一併引入了。

　　前文已經說到了，靜態文件都放在public文件夾中，切文件夾內已經幫咱們把類目都分好了，images、 javascripts、 stylesheets。

　　分別引入bootstrap.min.css文件至stylesheets目錄下；jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夾下。

　　而後俺們修改view/index.html把文件引入使用便可，下面放出俺在bootstrap demo的基礎改的index.html，你們隨意拿去使用和修改。

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
    <!--<link href="/stylesheets/base.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/common.css" rel="stylesheet">-->
    <!--<link href="/stylesheets/page.css" rel="stylesheet">-->
    <!-- 建議在項目中把CSS分好level，好維護和管理 -->
    <style>
        html, body { overflow-x: hidden;}
        body { padding-top: 70px;background:#f1f1f1; }
        footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
        .header-navbar-style {
            filter:alpha(opacity=90);
            -moz-opacity:0.9;
            -khtml-opacity: 0.9;
            opacity: 0.9;
            background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
            border:1px solid #aaa;
            font-size:16px;
        }
        .beige {background:beige;}
        .bisque {background:bisque;}
        .darkseagreen{ background:darkseagreen;}
    </style>
  </head>
  <body>
    <div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Product</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Home</a></li>
            <li class=""><a href="/contactus">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu beige">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
            <li class=""><a href="/faq">FAQ</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->
    
    <!-- 以上位置建議建立個header.html維護起來 -->
    
    <style>
      @media screen and (max-width: 767px) {
        .row-offcanvas { position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
      .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
      .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
      .row-offcanvas-right.active { right: 50%; /* 6 columns */ } 
      .row-offcanvas-left.active { left: 50%; /* 6 columns */ } 
      .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
    </style>

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-right">
        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron bisque">
            <h1>Welcome <%= title %>!</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
          </div>
          <div class="row">
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
            <div class="col-6 col-sm-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">
            <a target="_blank" href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/.container-->
    
    <!-- 從header.html以後到此可分爲page層 -->
    
    <footer class="darkseagreen">
        <p>Copyright &copy; 2014. Designed by nieweidong.</p>
    </footer>
    <script src="/javascripts/jquery-1.11.0.min.js"></script>
    <script src="/javascripts/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        $('[data-toggle=offcanvas]').click(function() {
          $('.row-offcanvas').toggleClass('active');
        });
      });
    </script>
  </body>
</html>