摘要：利用中間件實現(xiàn)異步請求，實現(xiàn)兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯(lián)通的項目。刪除分組會連同組內(nèi)的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續(xù)的完善。

歡迎訪問我的個人網(wǎng)站：http://www.neroht.com/?

剛學(xué)vue和react時，利用業(yè)余時間寫的關(guān)于這兩個框架的訓(xùn)練，都相對簡單，有的結(jié)合了一點簡單的node.js以及mongoDB的使用，拿出來分享，拋磚引玉

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

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

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

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

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

技術(shù)：React16，React-Router4，Redux，Node.js，MongoDB，Antd-Mobile

項目分為用戶列表、消息列表、個人中心、登錄注冊四個模塊；后臺為Node.js，數(shù)據(jù)庫為MongoDB，配合前端的react技術(shù)棧實現(xiàn)前后端聯(lián)調(diào)。用戶分為求職者和雇主兩個角色。用戶注冊可選角色，注冊成功后需要完善信息（求職者：頭像，期望職位，個人簡介；雇主：頭像、招聘職位、公司名、薪資范圍、職位描述）。信息完善后求職者跳轉(zhuǎn)到boss列表頁，boss跳轉(zhuǎn)到求職者列表頁。并且可以點擊對方與其聊天。如果有未讀消息，則在底部導(dǎo)航的消息列表上顯示未讀消息數(shù)量。點擊未讀消息，未讀消息數(shù)量相應(yīng)減少。重點練習(xí)Redux的運用，存儲用戶信息、用戶列表信息、聊天信息、未讀消息數(shù)量。利用thunk中間件實現(xiàn)axios異步請求，Socket.io實現(xiàn)兩個用戶角色實時通信。

項目代碼

功能：

用戶注冊登錄、退出登錄

注冊完成后完善用戶信息

根據(jù)不同角色跳轉(zhuǎn)到相應(yīng)頁面

用戶聊天功能

注冊登錄、退出登錄：

聊天功能：

在某網(wǎng)上看到了這個教程，狠了心買了一套。錢確實沒白花，之前自己寫過一個react上線項目，但是全憑自己摸索出來的，代碼目錄的組織方式以及redux的狀態(tài)如何存儲都是自己定的。寫這個項目時候把用jsx寫代碼的方式重新認識了一遍，而且，view層和redux的狀態(tài)層劃分的很清晰，需要派發(fā)action和獲取store狀態(tài)的組件只需要外層包一個connect，然后要做出動作，觸發(fā)函數(shù)dispatch出去就好。當(dāng)時理解redux很是費勁，大神們?yōu)榱税褑栴}簡單化，設(shè)計了很多架構(gòu)，但是這些架構(gòu)越來越復(fù)雜，需要一定的學(xué)習(xí)曲線，不過用的時候，真的是特別的方便。

技術(shù)：react，react-addons-css-transition-group，Node.js，MongoDB

React級聯(lián)選擇器插件。之前工作中遇到了需要用級聯(lián)選擇器的地方，當(dāng)時時間緊，只好找了一個不太好用的插件，現(xiàn)在有時間自己實現(xiàn)了一個。加載數(shù)據(jù)方式為異步獲取，后端數(shù)據(jù)為扁平化結(jié)構(gòu)，通過pid來關(guān)聯(lián)上下級。用node.js簡單寫了下后臺。react-cascader-font-end為組件前端，react-cascader-server為后臺。

效果：

數(shù)據(jù)結(jié)構(gòu)：

在組件中的使用說明

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

前端頁面使用vue構(gòu)建，不再mock數(shù)據(jù)，后端服務(wù)器由Node.js的Express框架搭建，數(shù)據(jù)庫為MongoDB，網(wǎng)絡(luò)請求為axios,利用vuex實現(xiàn)登錄退出功能，關(guān)于商品、購物車、地址的修改都是與后臺關(guān)聯(lián)的。

項目代碼
功能：

登錄退出

商品列表（分頁請求，并可以加入購物車）

購物車（商品數(shù)量的加減，商品的刪除，多選全選反選價格聯(lián)動）

地址模塊（設(shè)置默認地址，刪除）、訂單生成（生成訂單號，收貨人信息，并插入數(shù)據(jù)庫）

截圖：

這也是某網(wǎng)上的教程，做這個項目的原因很簡單，就是自己想寫一些需要后臺配合的插件時，很不方便，因為自己只會前端的那些東西，所以決定也寫一下后臺，多了解一點。這算是node.js+MongoDB的初體驗吧，node.js不會有語法障礙，MongoDB又是以json格式存儲數(shù)據(jù)的。所以學(xué)的時候很順暢。目前還未深入了解node.js的一些概念。寫的node.js的時候真的體會到了異步的繁瑣，也明白了promise，async,await這些異步解決方案存在的意義。vuex也用了一下，臨時學(xué)了一下，要更多的練習(xí)。往后會寫更多的前后臺聯(lián)通的項目。

技術(shù)：Vue2.5.2, Node.js, Express, MongoDB, WebPack

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

項目代碼

功能：

圖片上傳

上傳進度條

分組上傳，分組查詢

新建分組，刪除分組

刪除圖片

選擇圖片

效果：

這其實是領(lǐng)導(dǎo)下達的一個小任務(wù)，但是任務(wù)中沒有提到要實現(xiàn)這么多的功能。這是在完成任務(wù)的前提下又擴展了一下，加上了分組上傳，分組查詢，新建分組，刪除分組的功能，方便自己以后用。本來還想加上分頁查詢的功能的，分頁的前端和后臺已經(jīng)寫好并且測試成功了，但是突然想到涉及上傳時候傳到那哪一頁的問題。。。但是現(xiàn)在，時隔一年后再次回想這塊的業(yè)務(wù)，感覺是自己鉆牛角尖了。寫代碼之前自己一點定要有全面的思考，不然會留下很多坑。后臺上傳功能基本上是查資料學(xué)來的，全部的功能自己一個人寫了好幾天。算是對自己上次用node.js+MongoDB寫vue后臺的一個強化，項目文章在這里。

技術(shù)：vue2，vue-resource，vue-router，better-scroll，stylus

純前端練習(xí)，三個業(yè)務(wù)模塊：商品，評論，商家。通過vue-resource請求mock數(shù)據(jù)，引入better-scroll實現(xiàn)頁面內(nèi)所有滾動效果，動畫效果通過transition組件實現(xiàn)。flex進行頁面布局。

項目代碼
功能：

點擊分類目錄滾動到相應(yīng)商品模塊

購物車數(shù)量及商品變化實時計算價格

評論篩選（全部、推薦、吐槽、有無內(nèi)容）

localStorage實現(xiàn)收藏商家功能

評價星級根據(jù)數(shù)據(jù)動態(tài)變化

效果：

這是入職之前就在寫的一個小的練習(xí)項目，網(wǎng)上找的教程，當(dāng)時只實現(xiàn)了商品業(yè)務(wù)模塊，就去上班了。后來一直沒動，前些日子才把后續(xù)的完善。這項目雖然簡單，也只是個純前端的練習(xí)項目，但是只寫了商品業(yè)務(wù)模塊后還是對我入職后開發(fā)公司的react項目提供了巨大幫助，webpack配置、項目目錄的組織方式，寫代碼的規(guī)范，前期的數(shù)據(jù)mock。寫完了，也算有一點小的成就感。