使用express， create-react-app， mongodb搭建react模擬數據開發環境

提要

最近剛剛完成了一個vue的項目，其中涉及的用戶數有6000多個以及其餘數據也比較多，爲了在前端可以真實的進行數據模擬，全部把全量數據拷貝下來放到了api.json中。這樣致使整個api.json文件過大，每次進行修改的時候編輯器都會卡頓。

項目作完後就在想能不能把大量的模擬數據放在數據庫中進行管理，用nodejs來操做數據庫。順便再熟練一下nodejs。

代碼github地址：https://github.com/boychina/yarn-react-express.git

使用的技術棧

express

是nodejs當前最流行的後臺框架。官網對express的描述，它是一個機遇Node.js平臺，快 速、開放、極簡的web開發框架。優勢是易上手、高性能、擴展性強：

1. 易上手：nodejs最初是爲了開發高興能web服務器而被設計出來的，然而相對底層的API會讓很多新手望而卻步。express對web開發相關的模塊進行了適度的封裝，屏蔽了大量複雜繁瑣的技術細節，讓開發這個只須要專一於業務邏輯的開發，極大的下降了入門和學習的成本。
2. 高性能：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過分封裝致使的性能損耗。
3. 擴展性強：基於中間件的開發模式，使得express應用的擴展、模塊拆分很是簡單，既靈活，擴展性又強。

create-react-app

react+redux和vue+vuex是如今最流行的兩個構建webapp的前端構建框架，其中react背靠Facebook這個大樹，在技術上最先實現了虛擬DOM和高效的Diff算法，使得其擁有較高的性能。同時，代碼邏輯也很是簡單。

create-react-app是Facebook官方提供的一套不須要配置的React開發方案，也是當前最流行的react應用構建方法。這個腳手架已經作好了基礎webpack配置，帶有自動更新，錯誤提示等功能，僅僅須要建立，啓動就能夠快速進行開發。

使用前咱們須要在全局安裝：

npm install creat-react-app -g

mongodb

MongoDB和Node.js特別般配，由於Mongodb是基於文檔的非關係型數據庫，文檔是按BSON（JSON的輕量化二進制格式）存儲的，增刪改查等管理數據庫的命令和JavaScript語法很像，比較適合前端同窗使用。

yarn

因爲是從頭開始搭建一個開發環境，全部就考慮嚐鮮使用Facebook今年推出的yarn。

Yarn和npm同樣，是一款Nodejs包管理工具。

Yarn會緩存它下載的每一個包，全部不須要重複下載。它還能並行化操做以最大化資源利用率，因此安裝速度之快史無前例。

Yarn在每一個安裝包的代碼執行前使用校驗碼驗證包的完整性。

Yarn使用一個格式詳盡簡潔的lockfile和一個精確的算法來安裝，可以確保可以在一個系統上的運行和安裝過程也會以一樣的方式運行在其餘系統上。

開始建立

假設咱們須要建立一個test-app項目：

1. 建立項目目錄

create-react-app test-app

稍等片刻，yarn會爲咱們建立一個目錄，拉去須要的依賴，webpack的配置經過yarn來調用，能夠看到目錄結構:

安裝完成後控制檯會有清晰的提示信息：

2. 開始開發

cd test-app && yarn start

這是會啓動默認端口爲3000的頁面，若是端口衝突，會提示你是否選用另外一個端口

進入src目錄進行開發便可

3. 開發完成須要發佈時

運行 yarn build 進行編譯，發佈build目錄

建立完成會自動生成build文件夾，將js，css文件放在static目錄中

基本的建立和發佈react應用過程完成，中間省略了大量的配置問題，給須要快速構建項目帶來了極大的便利。固然，默認配置也許不可以知足全部需求，create-react-app也提供了拋出全部配置項的yarn eject供給開發者使用，若是須要調整webpack的內容，就須要使用到這個命令。不過這樣也會致使不能回滾。官方的更新比較快，若是不是須要的狀況建議直接使用內置的行爲。

配合express構建服務端應用

因爲在項目開發過程當中須要express構建server端應用，開發模式須要作一些小調整。

1. 建立一個叫server的文件夾和初始化package.json文件

mkdir server && cd server && yarn init

2. 增長依賴包

yarn add express body-parser nodemon babel-cli babel-preset-es2015

主要用到express, body-parser, nodemon（監測node.js改動兵自動重啓， 適用於開發階段），babel-cli和babel-preset-es2015（以便使用es6開發）

執行express

express

就會在server文件夾中生成express構建nodejs服務器模塊。

3. 修改package.json

這裏我在操做的時候nodemon模塊並無下載成功，須要單獨執行：

yarn add nodemon

下載下來nodemon 模塊。

express默認生成的scripts是：

"scripts": {
    "start": "node ./bin/www"
  }

將其改成：

"scripts": {
    "start": "nodemon --exec node ./bin/www"
  }

4. create-react-app 會啓動一個靜態資源服務器，那麼同時須要進行server端的時候須要怎麼作呢？

咱們會鬼頭來修改test-app目錄下的package.json。

create-react-app會默認天機好4段scripts：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

咱們須要對start 和 build作調整，以即可以同時啓動前端開發頁面以及後端服務。在這裏引入concurrently這個包來執行兩條命令：

yarn add concurrently

package.json:

"scripts": {
    "react-start": "node scripts/start.js",
    "start": "concurrently \"yarn react-start\" \"cd server && yarn start\"",
    "react-build": "node scripts/build.js",
    "build": "concurrently \"yarn react-build\" \"cd server && yarn build\"",
    "test": "node scripts/test.js --env=jsdom"
}

這樣，咱們只要執行yarn start 會同步啓動 webpack 以及 server文件下的nodemon.

 

參考網址：

http://www.javashuo.com/article/p-uhremiql-dz.html

http://www.cnblogs.com/xiaohuochai/p/7189074.html