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

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

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

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

React移動(dòng)端省市縣級(jí)聯(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

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

項(xiàng)目代碼

功能：

用戶注冊(cè)登錄、退出登錄

注冊(cè)完成后完善用戶信息

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

用戶聊天功能

注冊(cè)登錄、退出登錄：

聊天功能：

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

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

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

效果：

數(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ò)請(qǐng)求為axios,利用vuex實(shí)現(xiàn)登錄退出功能，關(guān)于商品、購物車、地址的修改都是與后臺(tái)關(guān)聯(lián)的。

項(xiàng)目代碼
功能：

登錄退出

商品列表（分頁請(qǐng)求，并可以加入購物車）

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

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

截圖：

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

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

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

項(xiàng)目代碼

功能：

圖片上傳

上傳進(jìn)度條

分組上傳，分組查詢

新建分組，刪除分組

刪除圖片

選擇圖片

效果：

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

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

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

項(xiàng)目代碼
功能：

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

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

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

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

評(píng)價(jià)星級(jí)根據(jù)數(shù)據(jù)動(dòng)態(tài)變化

效果：

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