NODEJS項目實踐0.5 - 完結[inspector,git]

1、前言

上節咱們主要應用了部分nodejs模塊功能，本節咱們再演示下nodejs經常使用的debug功能，git使用，併發布到阿里雲，就完成了 0.*系統的教程。

GIT：https://github.com/xiaolulu/mynodejs.git

參考：http://www.upopen.cn

2、調試模塊

debug，即開發過程當中的運行跟蹤，是開發過程當中的不可缺乏的。如同頁面端開發過程當中，若是沒有chrome的inspect element，開發過程當中的問題排查，將是很是困難的。

⋅⋅⋅nodejs目前經常使用的有兩種類型的調試方案

⋅⋅⋅一、以 webstorm爲表明的開發編輯器類調試。webstrom自己支持很好的nodejs的開發體驗，其也集成了測試功能，但這個不是我推薦的，自行百度 「 webstorm nodejs 調試 」。

⋅⋅⋅二、第二種是npm 下的 node-inspector，我使用的編輯器就是ubuntu下的gedit，即便在win7下使用的也是較古老的 edit plus，由於開發過程當中，不須要什麼提示功能，webstorm自己很大，啓動起來也佔用很大的資源。相比之下，gedit + node-inspector，則更加輕量。

⋅⋅⋅全局安裝：

npm install -g node-inspector

⋅⋅⋅啓動

⋅⋅⋅ssh執行

node-inspector

⋅⋅⋅會提示

Visit http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858 to start debugging.

⋅⋅⋅再開一個終端，cd到項目目錄，執行

node-dev –debug app.js

⋅⋅⋅上一節咱們講node-dev，使用了其自動 restarting，若是不須要高度，執行 node-dev app.js便可。

⋅⋅⋅瀏覽器A打開

http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858

⋅⋅⋅瀏覽器A即會顯示成debug模式，

⋅⋅⋅再用瀏覽器B打開咱們項目，瀏覽器A就會顯示nodejs端的代碼，調用起來和頁面端同樣同樣的。因此用 node-inspector能夠安裝後便可快速上手，不須要任何配置，使用起來不需額外成本，這也是我推薦的緣由。

⋅⋅⋅以下圖：

3、git

⋅⋅⋅git的經常使用命令可參見

http://www.upopen.cn/article/list?kind=git

⋅⋅⋅參照上面的教程，在 github上申請帳號、新建項目、添加本地生成的key以後，就能夠開始使用了。

⋅⋅⋅cd到咱們的項目 root，執行

git init

⋅⋅⋅將本地文件夾初即化爲 git目錄，經過 ls -la，能夠看到其下多了.ssh的隱藏文件夾，用於存放git信息

⋅⋅⋅執行

git remote add origin git@github.com:<your-github>/<your-project>.git

⋅⋅⋅將本地目錄和遠程目錄關聯起來

git config -- global user.name <your name>

git config – global user.email <your email>

⋅⋅⋅配置本身的git信息，用於提交的記錄author。

git add *

⋅⋅⋅添加全部的文件到暫存區

git commit -m '個人第一個項目'

⋅⋅⋅將暫存區的文件提交到 git 目錄

git push -u origin master

⋅⋅⋅按提示輸入你的git賬號及密碼，將git 目錄的文件提交到遠程github上

⋅⋅⋅咱們即完成了本地代碼的提交，具體命令解釋及更多命令應用仍是參照

⋅⋅⋅http://www.upopen.cn/article/list?kind=git

4、服務器

⋅⋅⋅此處我使用的阿里雲服務器，管理上簡單些，選了個最低配置，1000/年，www.upopen.cn就是在阿里雲上，七牛，百度也提供了這樣的服務器。購買好服務器後，選擇安裝ubuntu系統。

⋅⋅⋅鏈接服務器

ssh <you server ip> -l root

⋅⋅⋅用戶名先默認用 root便可。按提示輸入密碼便可登陸

⋅⋅⋅按項目約定安裝，nginx / nodejs / mongo / git 等，並建立根目錄

⋅⋅⋅克隆遠程庫到本地

git clone root git@github.com:xiaolulu/mynodejs.git

⋅⋅⋅拉取遠程庫的數據到本地

git pull origin master

⋅⋅⋅在此咱們使用了與上面git不一樣的命令，其實也能夠按init/ remote來，爲了多使用幾個命令，另外，第三
部分是新建庫，此部主要是拉取。對後面的使用是同樣的。

⋅⋅⋅一樣的配置成功後，訪問該你的服務器IP，站點即發佈成功。

⋅⋅⋅若是有域名了更好，不過域名如今都須要備案了，須要些時間。

5、validate.js

⋅⋅⋅最後稍講下頁面端的js，本來不是咱們本系列的重點，和你們探討下，如何寫一個可複用、解耦的組件，小微框架的思想也不過如此。

⋅⋅⋅驗證組件有不少種寫法，但每每越高級的，限制性越大，咱們寫一個輕量級的，拋磚引玉。

⋅⋅⋅首先咱們分析下驗證功能，得出如下一些原則

⋅⋅⋅一、每一個輸入項均可以配置驗證規則

⋅⋅⋅二、可指定觸發事件，如keyup或 change時觸發驗證

⋅⋅⋅三、可配置一些通用的規則如非空、最小值、最大值、只能輸入數字、字母、電話、身份證等

⋅⋅⋅四、可配置自定義規則，如註冊時，再次輸入密碼項的規則和密碼項需一致。

⋅⋅⋅五、提供錯誤提示的回調，每每錯誤提示形式是一致的，不須要提供回調，咱們提供更自由的顯示方式。

⋅⋅⋅以註冊頁面表單爲例，定義輸入框的規則。在root/static/module/issue/register.js下新增

javascriptvar username = $( '#username' ),
        password = $( '#password' ),
        email = $( '#email' );
    //定義驗證規則
    var usernameRule = [{
            'noBlank': '請輸入用戶名',    //非空
            'min': [ 3, '用戶名不能少於3位'],   //最小
            'max': [ 16, '用戶名長度不能多於16位'],   //最大
            'typeEN': '用戶名只能爲字母及數字'     //準輸入類型
        }, function( prompt ){  //錯誤提示回調
            $( '#usernameTip' ).html( prompt );
        }],
        passwordRule = [{
            'noBlank': '請輸入密碼',
            'self': function( cb ){ //自定義規則
                cb( '密碼不能全爲數字' );
                return isNaN( this.value - 0 );
            }
        }],
        email = [{
            'noBlank': '請輸入註冊郵箱',
            'typeEmail': '郵箱格式不正確'  //指定某定義規則
        }, function( prompt ){
            $( '#emailTip' ).html( prompt );
        }];

    //爲指定指定表單添加指定觸發事件的指定規則
    validate( username, [ 'keyup' ], usernameRule );
    validate( password, [ 'change' ], passwordRule );
    validate( email, [ 'foucsOut' ], emailRule );

⋅⋅⋅在root/static下新建 widget/，用於存放組件。其下新建 validate/validate.js

javascriptdefine(function(  ){

    var isArray = function( value ){
        return Object.prototype.toString.call( value ) == '[object ]'
    }

    /*定義經常使用規則，經過判斷值是否符合規則返回true / false */
    var Regular = {

        //非空
        noBlank: function( value ){
            return !!value;
        },
        //最小
        min: function( value, rule ){
            return value.length >= rule;
        },
        //最大
        max: function( value, rule ){
            return value.length <= rule;
        },
        //中文、英文
        typeZE: function( value ){
            return /^[\u4E00-\u9FA5\uf900-\ufa2d\uFE30-\uFFA0a-zA-Z]+$/.test( value );
        },
        //英文、數字
        typeEN: function( value ){
            return /^[0-9|a-z|A-Z]+$/.test( value );
        },
        //數字
        typeNum: function( value ){
            return !isNaN( value );
        },
        //電話
        typePhone: function( value ){
            return /^1[0-9]{10}$/.test( value );
        },
        //email
        typeEmail: function( value ){
            return /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(value)
        }

    }
    //循環對規則進行驗證，主要分類兩種。一種是self，一種是已定義的經常使用規則。
    function check( rules, cb ){

        var rule,
            prompt,
            codex,
            value = this.value;
        for ( rule in rules ){

            prompt = rules[ rule ];
            isArray( prompt ) && ( codex = prompt[0] ) && ( prompt = prompt[1] );
            //這裏是針對 即帶值，又帶提示的規則 [ 3, '用戶名不能少於3位']
            //不然只帶提示的規則，如非空，電話號碼等值可定的規則
            if( rule == 'self' ){   //驗證自定義的定義
                if( rules[ rule ].call( this, cb ) !== true ){
                    return false;
                };
            } else if( !Regular[ rule ]( value, codex ) ){  //驗證上面定義過的規則
                cb( prompt )
                return false;
            }
            cb( '' );
        }
        return true;

    }
    //開始的驗證函數，對某元素el添加指定事件events的驗證規則rules，驗證結果在cb中執行
    function validate( el, events, rules, cb ){

        if( rules ){

            cb = rules[1];
            rules = rules[0];
            $.each( events, function( k, event ){
                el.on( event, function(){
                    check.call( this, rules, cb );
                });

            });

        } else {
            //這裏是對不用傳觸發條件，直接進行驗證的規則。主要是針對form.submit時需一次驗證全部輸入框時
            cb = events[1];
            rules = events[0];
            return check.call( el.get( 0 ), rules, cb );

        }

    }

    return validate

})

⋅⋅⋅上面是寫了一種較初級的驗證函數，不過也能夠解決大部分的驗證場景，經常使用規則可自行添加。

6、結語

⋅⋅⋅至此，除了將數據存取部分和前臺分離 及redis外，咱們基本完成了0.1中所設定的功能，並應用到所列舉的知識點，各知識點都是針對本項目使用了初級的功能。

⋅⋅⋅簡單總結下，前面5節所講過的知識點：

⋅⋅⋅一、安裝、使用ubuntu，在Linux平臺下開發項目，提升開發效率，擴展知識面。

⋅⋅⋅二、使用nodejs，基於express、ejs框架，實現的基礎的靜態頁面訪問

⋅⋅⋅三、使用nginx，搭建靜態服務器，並作了代理轉發及負載

⋅⋅⋅四、據項目優化目錄結構，作到分類明晰，靜態、項目資源分離，各文件作意義劃分，便於後面擴展

⋅⋅⋅五、使用mongodb，實現了數據的存取，完成註冊、登陸等操做的客戶端 - 服務端的數據交互

⋅⋅⋅六、頁面端使用requireJs來作模塊管理並簡單實現了驗證模塊。

⋅⋅⋅七、使用了npm 的 node-dev[自啓動]、md5[加密]、domain[異步異常]、pm2[進程守護]、log4js[服務日誌]、node-inspector[開發調試]等模塊。

⋅⋅⋅八、實現了cookie和session的操做，保持用戶登陸狀態

⋅⋅⋅九、實現據登陸狀態的頁面訪問准入控制權限。

⋅⋅⋅十、git操做，提交到服務器上。

⋅⋅⋅上面的知識在項目上應用的較初級，後面對每一個技術點都會作單獨的文章補充，但願對咱們都有所幫助，拋磚引玉，你們多作深刻研究。

⋅⋅⋅下一個系列的教程中，咱們會對上面這些知識有個逐步高級的應用，並增長markdown，頁面靜態化，nodejs的單元測試等，這塊在upopen.cn的文章系統上已經應用。

⋅⋅⋅本部分的教程結束。謝謝！

技術新Q羣：43548556