一些基於React、Vue、Node.js、MongoDB技術棧的實踐項目

剛學vue和react時，利用業餘時間寫的關於這兩個框架的訓練，都相對簡單，有的結合了一點簡單的node.js以及mongoDB的使用，拿出來分享，拋磚引玉

• React + Node.js + MongoDB實時聊天WebApp (react_recruiment_webapp)
• React移動端省市縣級聯選擇器 (react_cascader)
• vue.js + node.js + MongoDB 商城(vue_shop)
• vue.js + node.js + MongoDB 上傳圖片組件(vue_uploader)
• Vue.js餓了麼商家模塊(ele)

React + Node.js + MongoDB實時聊天WebApp (react_recruiment_webapp)

技術：React16，React-Router4，Redux，Node.js，MongoDB，Antd-Mobile

項目分爲用戶列表、消息列表、我的中心、登陸註冊四個模塊；後臺爲Node.js，數據庫爲MongoDB，配合前端的react技術棧實現先後端聯調。用戶分爲求職者和僱主兩個角色。用戶註冊可選角色，註冊成功後須要完善信息（求職者：頭像，指望職位，我的簡介；僱主：頭像、招聘職位、公司名、薪資範圍、職位描述）。信息完善後求職者跳轉到boss列表頁，boss跳轉到求職者列表頁。而且能夠點擊對方與其聊天。若是有未讀消息，則在底部導航的消息列表上顯示未讀消息數量。點擊未讀消息，未讀消息數量相應減小。重點練習Redux的運用，存儲用戶信息、用戶列表信息、聊天信息、未讀消息數量。利用thunk中間件實現axios異步請求，Socket.io實現兩個用戶角色實時通訊。

項目代碼

功能：

• 用戶註冊登陸、退出登陸
• 註冊完成後完善用戶信息
• 根據不一樣角色跳轉到相應頁面
• 用戶聊天功能

註冊登陸、退出登陸：

聊天功能：

總結

在某網上看到了這個教程，狠了心買了一套。錢確實沒白花，以前本身寫過一個react上線項目，可是全憑本身摸索出來的，代碼目錄的組織方式以及redux的狀態如何存儲都是本身定的。寫這個項目時候把用jsx寫代碼的方式從新認識了一遍，並且，view層和redux的狀態層劃分的很清晰，須要派發action和獲取store狀態的組件只須要外層包一個connect，而後要作出動做，觸發函數dispatch出去就好。當時理解redux非常費勁，大神們爲了把問題簡單化，設計了不少架構，可是這些架構愈來愈複雜，須要必定的學習曲線，不過用的時候，真的是特別的方便。

---

React移動端省市縣級聯選擇器 (react_cascader)

技術：react，react-addons-css-transition-group，Node.js，MongoDB

React級聯選擇器插件。以前工做中遇到了須要用級聯選擇器的地方，當時時間緊，只好找了一個不太好用的插件，如今有時間本身實現了一個。加載數據方式爲異步獲取，後端數據爲扁平化結構，經過pid來關聯上下級。用node.js簡單寫了下後臺。react-cascader-font-end爲組件前端，react-cascader-server爲後臺。

效果：

數據結構：

API	說明	類型
cascaderShow	是否顯示級聯選擇器	Boolean
data	接收的省市縣數據	Array
getData	動態獲取數據的函數	Function
onCancel	點擊模態層取消的函數	Function
onOk	選擇完畢的回調函數	Function

在組件中的使用說明

---

vue.js + node.js + MongoDB 商城(vue_shop)

技術：Vue2.5.2, Vue-Router, Vuex, Node.js, Express, MongoDB, WebPack

前端頁面使用vue構建，再也不mock數據，後端服務器由Node.js的Express框架搭建，數據庫爲MongoDB，網絡請求爲axios,利用vuex實現登陸退出功能，關於商品、購物車、地址的修改都是與後臺關聯的。

項目代碼
功能：

• 登陸退出
• 商品列表（分頁請求，並能夠加入購物車）
• 購物車（商品數量的加減，商品的刪除，多選全選反選價格聯動）
• 地址模塊（設置默認地址，刪除）、訂單生成（生成訂單號，收貨人信息，並插入數據庫）

截圖：

總結

這也是某網上的教程，作這個項目的緣由很簡單，就是本身想寫一些須要後臺配合的插件時，很不方便，由於本身只會前端的那些東西，因此決定也寫一下後臺，多瞭解一點。這算是node.js+MongoDB的初體驗吧，node.js不會有語法障礙，MongoDB又是以json格式存儲數據的。因此學的時候很順暢。目前還未深刻了解node.js的一些概念。寫的node.js的時候真的體會到了異步的繁瑣，也明白了promise，async,await這些異步解決方案存在的意義。vuex也用了一下，臨時學了一下，要更多的練習。日後會寫更多的先後臺聯通的項目。

---

vue.js + node.js + MongoDB 上傳圖片組件(vue_uploader)

技術：Vue2.5.2, Node.js, Express, MongoDB, WebPack

Vue搭建頁面，form綁定一個不可見的iframe實現無刷新提交表單，圖片選擇完畢後，遞歸調用axios將所選圖片依次post到後臺，實現單圖和多圖的上傳功能，並實現圖片預覽、進度條、檢測圖片大小是否超出限制（前端檢測）。
後臺利用formidable解析表單數據，重命名後將圖片名稱，id，大小,路徑存到MongoDB數據庫。每次接收並存儲完成，給前臺返回最新上傳的圖片。刪除分組會連同組內的全部圖片一塊兒刪除。

項目代碼

功能：

• 圖片上傳
• 上傳進度條
• 分組上傳，分組查詢
• 新建分組，刪除分組
• 刪除圖片
• 選擇圖片

效果：

總結

這實際上是領導下達的一個小任務，可是任務中沒有提到要實現這麼多的功能。這是在完成任務的前提下又擴展了一下，加上了分組上傳，分組查詢，新建分組，刪除分組的功能，方便本身之後用。原本還想加上分頁查詢的功能的，分頁的前端和後臺已經寫好而且測試成功了，可是忽然想到涉及上傳時候傳到那哪一頁的問題。。。可是如今，時隔一年後再次回想這塊的業務，感受是本身鑽牛角尖了。寫代碼以前本身一點定要有全面的思考，否則會留下不少坑。後臺上傳功能基本上是查資料學來的，所有的功能本身一我的寫了好幾天。算是對本身上次用node.js+MongoDB寫vue後臺的一個強化，項目文章在這裏。

---

Vue.js餓了麼商家模塊(ele)

技術：vue2，vue-resource，vue-router，better-scroll，stylus

純前端練習，三個業務模塊：商品，評論，商家。經過vue-resource請求mock數據，引入better-scroll實現頁面內全部滾動效果，動畫效果經過transition組件實現。flex進行頁面佈局。

項目代碼
功能：

• 點擊分類目錄滾動到相應商品模塊
• 購物車數量及商品變化實時計算價格
• 評論篩選（所有、推薦、吐槽、有無內容）
• localStorage實現收藏商家功能
• 評價星級根據數據動態變化

效果：

總結

這是入職以前就在寫的一個小的練習項目，網上找的教程，當時只實現了商品業務模塊，就去上班了。後來一直沒動，前些日子才把後續的完善。這項目雖然簡單，也只是個純前端的練習項目，可是隻寫了商品業務模塊後仍是對我入職後開發公司的react項目提供了巨大幫助，webpack配置、項目目錄的組織方式，寫代碼的規範，前期的數據mock。寫完了，也算有一點小的成就感。