前言

很久之前學(xué)習(xí)gulp的時候，一直對browser-sync的多端自動刷新念念不忘。如今，gulp逐漸老去，webpack崛起。node也漸漸成熟起來。這時候，我們迫切的需要一套前端視角的全棧開發(fā)腳手架。

技術(shù)選型

node+express+webpack+react+mongodb

目標(biāo)

搭建一套自動工具，包括圖片處理、css預(yù)處理、es6編譯、js壓縮、文件打包。分生產(chǎn)環(huán)境和線上環(huán)境。生產(chǎn)環(huán)境告別人肉刷新。

項目路徑

從結(jié)果倒推。頁面最基本的兩個要素便是頁面內(nèi)容和頁面跳轉(zhuǎn)。從node來說即routes和views。其次，頁面內(nèi)容包括圖片，css樣式表，js，font等等。這就是純粹前端的資源。因此根目錄下設(shè)置server（node部分），client（前端資源和邏輯），public（client的打包）。這樣的結(jié)構(gòu)十分清晰，node通過router調(diào)用view，view請求public資源。

|—— client
|—— public
|—— server
   |—— views
   |—— routes
app.js
package.json
webpack.config.js

引入mongodb

在安裝mongodb的bin目錄下
mongod --dbpath=d:/Mongodb/data/db
啟動后開啟另一終端
mongo
mongodb命令：

查看數(shù)據(jù)庫列表
show dbs

切換數(shù)據(jù)庫
use name【name是數(shù)據(jù)庫名，沒有則新建，有則切換】

查看數(shù)據(jù)庫表單
show collections【顯示所有表單】

查看數(shù)據(jù)庫表單內(nèi)容
db.name.fing().pretty()【name書表單名】

刪除某條數(shù)據(jù)
db.name.remove({a: 'aa'})

刪除整個collection
db.name.remove({})

插入字段
db.name.update({author:'bottle'},{$set:{'delete':false}},false,true);
//將author為bottle的delete值設(shè)置為false，有則更新沒有則插入
//false找不到條件不額外插入數(shù)據(jù)（true則插入）
//true將找到的數(shù)據(jù)都做更新（false只更新一條）

遇到一個問題

mongoconnect_issue.png

最后發(fā)現(xiàn)是connect-mongo更新了版本，配置項不再是舊的“db”，“port”等的形式。而是“url”。其實在這整個過程中，引用了大量的插件。再跑了很多網(wǎng)上的例子中，遇到很多問題都是因為插件新版本變化的問題。這類問題是非常常見的，解決方法當(dāng)然是多翻文檔了。以文檔為標(biāo)準(zhǔn)準(zhǔn)沒錯！

另外：mongodb作為nosql，并不建議對多Collection關(guān)聯(lián)處理。mongodb是面向文檔的數(shù)據(jù)庫，使用JSON風(fēng)格，支持多種結(jié)構(gòu)存儲，這個就厲害了。比如常見的文章存儲，一篇文章往往有過個標(biāo)簽，在mysql中文章與標(biāo)簽往往需要表關(guān)聯(lián)，這樣的查詢很容易帶來性能問題。而在mongodb中，查詢具體標(biāo)簽的文章是很簡單的。處理一對多的數(shù)據(jù)十分方便。舉個栗子:

mongodb_select.png

使用_id來查詢的話需要把_id的字符串形式轉(zhuǎn)為ObjectId形式
objectId=require('mongodb').ObjectID.createFromHexString(strId);

引入session和cookie

插件：
body-parser：將請求數(shù)據(jù)已對象的形式置于req.body中
connect-mongo：將session存入mongodb；
cookie-parser：express的cookie模塊；
express-session：express的session模塊；
mongodb：就是mongodb；
connect-flash：在session.flash中存儲數(shù)據(jù)，結(jié)合redirect做狀態(tài)控制。

這一塊主要是“登入”、“登出”、“注冊”狀態(tài)的切換。瀏覽器cookie和服務(wù)器session的匹配?！白浴备黜梼?nèi)容的檢測。password的加密存儲，加密比對。結(jié)合mongodb，session保存在數(shù)據(jù)庫中。

引入react+es6

babel插件：babel-core，babel-loader，babel-preset-es2015，babel-preset-react
react插件：react，react-dom
遇到一個問題，在production生產(chǎn)環(huán)境時：

reactissue.png

stack overflow的 解決方案
github上的 issue

關(guān)于react的，看這個官方的例子就差不多了。附上中文版。

1. 以單一原則拆分組件
2. state控制狀態(tài)，props控制靜態(tài)數(shù)據(jù)
3. 尋找最近的狀態(tài)點，最為數(shù)據(jù)頂層向下流
4. 頂層傳遞數(shù)據(jù)下來的同時傳遞一個能夠改變狀態(tài)的函數(shù)，子組件獲得該函數(shù)，在完成某動作后觸發(fā)該函數(shù)（回調(diào)）以達到改變狀態(tài)的目的。實現(xiàn)“數(shù)據(jù)逆流”（其實就是子組件告訴父組件改變狀態(tài)更新數(shù)據(jù)，數(shù)據(jù)下流）

關(guān)于開發(fā)環(huán)境與線上環(huán)境

1.線上環(huán)境將js和css拆開：合并會延長css的渲染時間，導(dǎo)致進入頁面后呈現(xiàn)破頁面。