前言：

  作為一個前端開發，最主要的就是運用於各種框架，在學習框架的路上因為沒有json資料導致很麻煩

  mock:  https://github.com/nuysoft/Mock/wiki/Getting-Started  是一個可以模擬資料的js外掛

  node:  通過 express+mongodb 實現資料增刪改查

 node安裝地址： https://nodejs.org/zh-cn/  推薦大家下載穩定版本

因為我使用的是react 

所以分享一下我的一些配置：

    全域性安裝react:    npm i -g  create-react-app

    建立一個專案:      create-react-app  專案名（myapp）

           進入專案:      cd  myapp

    react專案目錄結構：
   myapp/

1. README.md
2. node_modules/
3. package.json
4. .gitignore
5. public/
6. favicon.ico
7. index.html
8. src/
9. App.css
10. App.js
11. App.test.js
12. index.css
13. index.js
14. logo.svg

       到這裡執行 npm start    在瀏覽器就能開啟react專案 localhost:3000

   * 想在react中配置sass怎麼辦 有很多朋友會有疑問  在這裡預設隱藏了webpack配置檔案

1.開啟webpack 隱藏的配置檔案   npm run eject
2.配置sass sass-loader node-sass -S-D
  找到config檔案
    webpack.config.dev.js  在module 新增scss依賴
    1>  {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },

    2> 找到這句話新增 .scss配置       
       exclude: [/\.(js|jsx|mjs)$/
 
,/\.html$/, /\.json$/, /\.scss$/],
3.webpack.config.prod.js 配置與2一樣配置 配置完 頁面就可以使用scss 

react的ui框架：  https://mobile.ant.design/index-cn

react-router:  現在我的版本是4.x  之前直接開啟react-router文件結果是3.x的版本 讓我踩了一寫坑   4.x版本：http://reacttraining.cn/web/guides/quick-start

redux: 暫時還沒使用後續加在該文件

正題：

這裡我們先安裝mongodb:    https://www.mongodb.com/download-center?jmp=nav#community 

 mongodb安裝教程：https://docs.mongodb.com/manual/installation/?_ga=2.267416328.701406409.1530968946-1771906249.1530099727

我們使用一個視覺化工具來檢視資料studio3T:   https://studio3t.com/download

圖示： 

1. 啟動MongoDB伺服器

2.連線MongoDB伺服器（圖片借鑑）

3.使用資料庫

經過以上配置： mongodb已經連線上視覺化工具了（mongodb安裝不懂請看上面連結地址）

下面才是重點：

            node 專案搭建： 

                   1. express 框架執行環境

                    全域性安裝cnpm i -g express-generator

                    本地安裝 cnpm i express

                            express --version  檢視版本

      2. 生成express 專案  命令：express  -e   專案名我用的server（server）

                                檔案目錄：

                        在（server目錄下）安裝一下第三方依賴

                        執行專案： 在瀏覽器開啟localhost:3000 證明已經可以使用了

                    這裡我把ejs改成了html  

                        不喜歡ejs語法的可以在app.js 中修改 

到這裡： 說明你react專案都搭建好了 node也以及好了 

 我的程式碼 把node專案和react公用的一個package.json

 我的程式碼連結：（會一直更新）https://gitee.com/ai1314/react_node_mongodb.git

 這了為了展示方便： 我把react專案埠改為 3001了

 node專案是3000   這裡我寫了一個上傳圖片的簡單頁面

上傳後資料展示在react專案中 （頁面效果不重要 大家看互動）

### 功能： 1. 實現上傳圖片 頁面展示

                2. 根據單個id查詢詳細資訊

                3. 實現分頁功能

下面我給大家展示我的資料庫表 你們可以建我標為紅色的

我的專案結構:  大家指出我的不足點 （qq:   1789410124）

public-comment

    config       webpack配置檔案

    node_modules  第三方包

    public  react專案主頁

    scripts  一些配置檔案

    server node 專案

    src react中專案檔案

         api  存放所有的url請求

         assets  靜態資原始檔

         axios 對資料請求的封裝 全域性處理錯誤資訊

         components 通用元件

         config  判讀當前環境使用域名

         module 存放路由頁面

         router  路由配置

react打包專案還會遇到一個問題  那就是路徑不對package.json  新增紅色標記就能解決   謝謝