react 項目 mock數據

前言前端

咱們都知道在實際的開發階段,後端接口開發是和前端開發同步進行,甚至遲於前端的進度,這就直就致使前端須要等待後端接口的時間。node

這種狀況就嚴重致使前端開發緩慢,那這時候前端的開發人員只能寫靜態模擬數據。webpack

  • 使用靜態的json來模擬數據

這種狀況是按照既定的數據格式(接口文檔等),本身提供靜態的JSON數據,用相關工具作接口來獲取這些數據。該方法僅僅使用get請求。侷限性仍是很大的。git

  • 模擬動態接口(Mock)

這種狀況是用一個 web 框架,按照既定的接口和數據結構的要求(接口文檔),本身模擬後端接口的功能,讓前端項目能順利跑起來。這樣就能夠很方便的模擬前端開發的業務邏輯。github


技能介紹

項目主要是使用express+mock整合來實現的動態模擬接口。
目錄結構:
  
 
首先須要安裝express
npm install --save express

在mock文件加下新建server.jsweb

代碼以下:express

var express = require("express")
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());  //body-parser 解析json格式數據
app.use(bodyParser.urlencoded({            //此項必須在 bodyParser.json 下面,爲參數編碼
    extended: true
}));

var router = express.Router();

app.get('/', function(req, res) {
    res.send('hello world');
});

router.use("/test",require('./test'));

app.use("/api",router)

app.listen(3001)

那麼怎麼啓動這個服務了?有兩種方式npm

第一種,在當前項目目錄執行json

node mock/server.js 

第二種,由於咱們使用npm管理包,在package.json的scripts加入後端

"mock": "node ./mock/server.js"

只須要執行 npm run mock 啓動服務就能夠了哦~~

這就實現了一個簡單的express服務,在瀏覽器輸入http://localhost:3001 就能夠看到頁面加載出 hello world

 

接下來就是引入mockJs ,首先安裝mockjs

npm install --save-dev mockjs

咱們在mock的目錄下面新建test.js加入代碼,mock的語法這裏不說了。請看mock文檔的講述,有不少知識點。

var Mock = require("mockjs")
var express = require("express")
var router = express.Router();

router.use("/profile",function (req,res) {
    console.log(req.body);
    //調用mock方法模擬數據
    var data = Mock.mock({
            // 屬性 list 的值是一個數組,其中含有 1 到 10 個元素
            'list|1-10': [{
                // 屬性 id 是一個自增數,起始值爲 1,每次增 1
                'id|+1': 1
            }]
        }
    );
    return res.json(data);
})

module.exports = router;

在瀏覽器的輸入http://localhost:3001/api/test/profile便可看到輸出的JSON數據列表,

若是訪問的地址爲:http://localhost:3001/api/profile  則只須要把server.js中的

router.use("/test",require('./test')); 修改成:router.use("/",require('./test'));

 

在React中使用

在config/webpackDevServer.config.js中添加以下代碼:

 proxy: {
      '/api/': {
        target: 'http://localhost:3001',
        secure: false
      }
    },

運行時首先 npm run mock ,開啓mock服務,而後運行項目npm run start,便可獲取到mock數據

 

參考資料:https://www.jianshu.com/p/ac23664982b2

相關文章
相關標籤/搜索