全棧開發技術棧---項目實踐二 概述 項目已初步完成

1、簡介

通過一個月+的開發，upopen.cn我的站點重構基本完成，本文先總結總體架構及主要技術點，後續再單獨詳解各技術點及開發過程。

首先重構的目的在於系統化架構、理清分離開發及服務端開發思惟、嘗試使用多的技術點，爲提高公司項目的全棧應用作準備。

本次共計三個服務[小部分技術點還在提交中]，總體採用先後端分離（web服務端，數據服務端），以restful API通訊

站點: !<www.upopen.cn>

git: https://github.com/xiaolulu/upopen

QQ羣: 435485569

---

系統功能

web: web服務端

站點前臺服務，屬先後端分離中的前臺，負責頁面渲染、與客戶端及server端的數據交互，使用http協議

server: 數據服務端

站點後臺服務，屬先後端分離中的後臺，與web服務端及數據庫的數據交互，不直接與客戶端通訊，實際項目中常會用java實現

check:

屬工具類服務，用於記錄、驗證接口功能，在先後端分離過程當中，以方便並行開發

=============================================================================

2、系統架構

3、系統目錄

docs:系統文檔

log: 系統日誌，獨立成單獨的服務

web/

check/

server/

check: 接口記錄、驗證系統，總體採用MVSC結構，server、web系統也採用相同結構

app.js

package.json

webpack.config.js

assets/        靜態資源包

build/        react打包後文件

model/        數據層

views/        展現層

controls/    控制層

server/        業務層

lib/        工具包

config/        配置，運行前須要修改各config裏的配置項

test/        測試

server: 大體同check

web: 大體同check，多了gulp

static: 靜態資源文件

upload: 上傳資源文件

=============================================================================

4、技術點：

羅列本系統用到的一些有表明性的技術點，後續再分別詳解。

一、nginx: 做爲分發服務器，域名服務分發、緩存、GZIP壓縮、負載等

二、nodejs: web、server、check系統，其中server在公司項目中經常使用更成熟的語言開發，如java

三、express: web、server系統使用，是目前最常使用的nodejs框架，我也一直在使用

四、koa: check系統使用，與express的主要區別在於異步回調的同步寫法的實現，以解決回調金字塔的問題，回調金字塔很早就被問到過，不過當時認爲這個不是問題，自身項目一般三層回調就能夠解決了，而且函數分配合理，對易讀性也不會有太大影響，不過本次開發過程當中嘗試使用了KOA，其對代碼的易讀、精簡、組織上仍是有很大的提高的，建議使用，須要必定的學習成本，另外其對一些已經開發第三方插件未全面支持，如redis、request等，須要再次包裝同步調用機制，固然例舉的這兩個已經有了co-redis、koa-request。

五、ejs: web系統使用，作頁面渲染引擎，html在程序的語法上支持有限，jade成本會更高些，ejs在語法上和html一致，額外又支持數據語法。昨天和朋友討論過這個問題，這也是不少初次接觸分離的人疑問，爲何不直接使用html，數據所有用ajax，首先以我遇到的項目，所有走ajax是可行的，但有些頁面變量據服務端配置動態獲取會更好，而且在考慮SEO的時候數據更要直接渲染

六、redis: server、web系統使用，緩存服務器，用於暫存一些狀態數據，以便快速讀寫，如登陸成功後由server將該用戶數據寫入到redis，並將對應的key經過web寫入頁面cookie，獲取用戶數據時，web都會先到redis裏獲取該用戶是否登陸。在對數據讀取效率要求很高的狀況下，也能夠將數據庫數據所有同步到redis，從redis讀取，增刪改操做數據庫後，同步到redis.

七、mongodb: check系統數據庫，用於記錄接口列表，簡單易用，效率較高

八、mysql: server系統數據庫，區別於mongo，其在實際項目應用更普遍。

九、reactJs: check系統頁面，該系統是單頁面，接口記錄、驗證抽象成組件，使用reactjs在開發及model維護上效率較高。

十、webpack: check系統頁面模塊化、打包工具，配合reactJs

十一、requireJs: web系統頁面模塊化。

十二、log4js: web、server、check系統日誌管理，服務端開發日誌記錄是必須的，常規的數據收發、異常錯誤跟蹤、性能優化（如當某請求返回超過3秒就須要記錄了）

1三、shouldJs、supertest、jasmine、coverage、karma: 共同組成單元測試方案

1四、gulp: web集成jshint、unglify等的自動打包工具

1五、nodemailer: server系統使用，用戶註冊成功後發送郵件到對方郵箱。

寫了一篇文章：http://www.upopen.cn/blog/info?id=10020

1六、pm2: Nodejs進程管理器

寫了一篇文章：http://www.upopen.cn/blog/info?id=10021

1七、socket.io: web系統使用，在線用戶所屬數據改變時推送。

1八、其它，如http協議、加密、靜態化等。

---

5、其它

系統在開發過程當中，本着實用、多用的原則，推遲了開發週期，也儘可能詳細瞭解、記錄了各軟件、插件的使用。如mongodb的鏈接簡單來說就是

mongoose.connect( 'mongodb://' + config.host + '/' + config.db );

這也是常見demo的寫法，即沒有負載備份也沒有驗證，但實際使用時其至比項目程序的負載更重要，因此是應該寫成

var options = {
  db: { native_parser: false },
  server: { poolSize: 15 },
  replset: { rs_name: 'rename' },
  user: 'username',
  pass: 'password'
}

mongoose.connect( 'mongodb://10.10.10.1:27017,10.10.10.2:27017,10.10.10.3:27017/updb', options );

對其它一些的插件也從實際使用過程當中多了一些本身的理解，後續更新，但願會你們有所幫助