nodejs項目總結

前幾天花了3天時間，搭建、開發了一個包含客戶端、cms、server端的項目，也因着之前有php的開發經驗，以及sql的設計和應用能力，倒也沒遇到什麼阻礙。至於項目結構搭建（架構），也是共通的，以模塊化、便於協做、擴展爲前提。而構建工具的搭建，也只是nodejs的server端稍陌生，掌握了思路，也就簡單了。

1、技術棧

vue全家桶 ＋ element-ui ＋ axios ＋ sass ＋ webpack ＋ ES6/ES7 + nodejs(express) + mongodb(mongoose) ＋ sentry

element-ui：用來搭建CMS UI。

axios：服務端數據請求使用axios，而非vue-resource(已中止維護)。根據restful api的定義，使用其get/post/put/delete/(patch未使用)方法。在進行post和update（put、patch即update）時，須要將 content-type 由 ‘application/json’ 轉換成 ‘application/x-www-form-urlencoded’；轉換方法有多種：

• a、window.URLSearchParams：存在兼容性問題；
• b、Qs.stringify()：將對象轉換成url的形式。

tips：服務端如何獲取數據呢？若是服務端爲nodejs，可以使用body-parse中間件。可經過其extened屬性來設置，將post/update的數據轉換成對象；在取req數據時，需使用req.body.paramsName而非get方法中的req.query.paramsName。

ES6/7： 因babel的存在，能夠更好的使用ES6/7的特性；如結構解析、rest、promise、模塊管理、async／await、symbol、set等。同時因爲nodejs爲事件循環機制，經過使用async／await，來獲取返回結果，其雖爲同步語法，但並不是真正的同步，不會影響併發（nodejs的優點）。可經過try{}catch{}來捕獲await失敗的error（async／await的實質爲promise的封裝，遇到reject的狀況，可以使用catch來捕獲），代碼以下：

try {
    let admin = await adminModel.findOne({username})
    // 依次驗證是否存在管理員和密碼，而後將admin_id存入session中（登陸機制）
    if (!admin) {
        rst.error = error.adminNotExist
    } else if (encryption(password).toString() != admin.password.toString()) {
        rst.error = error.passwordError
    } else {
        req.session.admin_id = admin['_id'];
        rst.success = true
    }
} catch(err) {
    rst.error = error.default
    Raven.captureException(err);
}

Express：是由路由和中間件構成一個的 web 開發框架，從本質上來講，一個 Express 應用就是在調用各類中間件。其中間件爲函數：function (req, res, next) {... // next(); 執行下一個中間件}，如：

// 當訪問cms的api，獲取列表信息時，須要先驗證是否已登錄，如此才能獲取信息，不然訪問失敗
router.get('/api/cms/album', adminCtrl.checkLoginState, albumCtrl.findAlbum)
checkLoginState: async (req, res, next) => {
    ...
    // 若是驗證成功則跳入下一個中間件，不然返回
    if (rst.success) {
        next()
    } else {
        resCallback(res, rst)
    }
}

mongodb：一種文檔型數據庫，相對穩定的關係型數據庫來講，在一致性等可能保證不足，不適合金融業務。mongoose的兩個關鍵方法：Schema：定義屬性的類型和默認值等；model：至關於schema的實例，我將其視爲爲一個文檔，對應關係型數據庫中的表。

2、目錄結構

結構圖

2.一、build、cms-build

分別爲client、cms在dev、production環境下的webpack配置。其中dev環境下的幾個重要的中間件介紹以下：

• webpack-hot-middleware：模塊熱加載；
• webpack-dev-middleware：將編譯後的內容存入內存中；
• http-proxy-middleware：實現接口代理，可在本地環境下，跨域訪問其餘接口：如Rap api之類；
• connect-history-api-fallback：可控制刷新時，若是路由不存在，則訪問前端路由。

2.二、 client、cms

分別爲客戶端、CMS 的源碼，其子目錄如圖所示，相應的文件夾內容爲：

• api：保存接口api和axios的封裝，在這裏將處理統一的請求超時等錯誤，對接口名稱進行統一管理；
• assets：保存樣式，reset.scss、common.scss、style.scss，其中的style.scss中保存着統一變量（如$mainBgColor、$mainFontColor、$mainBorderColor、$designWidth等）、minxin、function等；
• components：公共組件庫；
• libs：utils.js、preload.js等工具函數、插件等；
• router：路由；（路由的按需加載等之前整理過，不贅述）；
• store：vuex；（vuex的模塊化也整理過了，不贅述）；
• views：vue業務組件。

2.三、config

各生產環境下的webpack區別化配置信息及本地開發路由代理配置信息。

2.四、public

cms：爲CMS 在production環境下的編譯生成，當nodejs server端捕獲到/cms/*的路徑時（cms頁面刷新時產生），導向該文件夾；

main：爲client 在production環境下的編譯生成，當nodejs server端捕獲到/pages/*的路徑時（client頁面刷新時產生），導向該文件夾；

2.五、server

經過nodejs的express框架搭建的服務端，對client\cms 的api及頁面訪問提供數據和文件等資源服務。

• controller: 處理業務，包括res的數據校驗、格式化處理等；
• models：數據庫操做集合；包含scheme、model等的聲明、定義等；
• libs：utils、msg（errorMsg、code等）等公共插件、工具函數的統一管理；
• router：express的路由，分爲api、cms 的頁面響應、client的頁面響應等
• db.js：數據庫的管理（鏈接等）
• app.js：服務器的靜態服務、cookie、session等配置和監聽；
• index.js：註冊babel及babel解析的相應配置，包括忽略.babelrc文件、commonjs編譯、異步支持等；加載執行app；經過node ./server/index.js運行服務端。該方法爲一種較爲簡單的編譯方法，使得支持ES6/7，固然也能夠經過webpack解析獲得nodejs的執行腳本，但需注意在webpack中設置target: 'node'屬性，這樣編譯生成的腳本node才能運行。在實施ssr的時候，可以使用webpack編譯解析的方式，視項目須要而定。以下：

// index.js
require('babel-core/register')({
    babelrc: 'false',
    presets: ['stage-3', 'env'],
    plugins: [
        'transform-runtime',
        "transform-async-to-generator",
        "transform-es2015-modules-commonjs"
    ]
});
require('./app.js');

2.六、upload

爲文件、圖片上傳後的存放位置，使用express的靜態服務器方法進行處理，可經過http進行訪問。