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

tangr206 發布于2019-06-26 17:34 / 1652人閱讀

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

歡迎訪問我的個人網站：http://www.neroht.com/?

剛學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。寫完了，也算有一點小的成就感。

云服務器 GPU云服務器 vue20開發實踐 MongoDB最佳實踐怎么部署react項目 php項目實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/19189.html

react + node + express + ant + mongodb 的簡潔兼時尚的博客網站

摘要：前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示管理后臺和后端。體驗地址網站主頁網站首頁管理后臺計劃這次是一個完整的全棧式開發，只要部署了這三個項目的代碼，是完全可以搭建好博客網站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言此項目是用于構建博客網站的，由三部分組成，包含前臺展示、管理...

fish 2019-06-26 17:54 評論0 收藏0
node技術棧 - 收藏集 - 掘金

摘要：異步最佳實踐避免回調地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術和異步函數。 Nodejs 連接各種數據庫集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫 Node.js Rest API 的 10 個最佳實踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...

王偉廷 2019-06-26 17:15 評論0 收藏0
全棧最后一公里 - Node.js 項目的線上服務器部署與發布

摘要：沒有耐心閱讀的同學，可以直接前往學習全棧最后一公里。我下面會羅列一些，我自己錄制過的一些項目，或者其他的我覺得可以按照這個路線繼續深入學習的項目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術軟文，閱讀需謹慎，長約 7000 字，通讀需 5 分鐘大家好，我是 Scott，本文通過提供給大家學習的方法，...

Nosee 2019-06-26 17:14 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0