前言

我們都知道在實際的開發(fā)階段，后端接口開發(fā)是和前端開發(fā)同步進行，甚至遲于前端的進度，這就直就導致前端需要等待后端接口的時間。

這種情況就嚴重導致前端開發(fā)緩慢,那這時候前端的開發(fā)人員只能寫靜態(tài)模擬數(shù)據(jù)。

使用靜態(tài)的json來模擬數(shù)據(jù)

這種情況是按照既定的數(shù)據(jù)格式（接口文檔等），自己提供靜態(tài)的JSON數(shù)據(jù)，用相關工具做接口來獲取這些數(shù)據(jù)。該方法僅僅使用get請求。局限性還是很大的。

模擬動態(tài)接口（Mock）

這種情況是用一個 web 框架，按照既定的接口和數(shù)據(jù)結構的要求（接口文檔），自己模擬后端接口的功能，讓前端項目能順利跑起來。這樣就可以很方便的模擬前端開發(fā)的業(yè)務邏輯。

技能介紹

項目主要是使用express+mock整合來實現(xiàn)的動態(tài)模擬接口。
目錄結構：
　　

首先需要安裝express

npm install --save express

在mock文件加下新建server.js

代碼如下：

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

app.use(bodyParser.json());  //body-parser 解析json格式數(shù)據(jù)
app.use(bodyParser.urlencoded({            //此項必須在 bodyParser.json 下面,為參數(shù)編碼
    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)

那么怎么啟動這個服務了？有兩種方式

第一種，在當前項目目錄執(zhí)行

node mock/server.js 

第二種，因為我們使用npm管理包，在package.json的scripts加入

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

只需要執(zhí)行npm run mock啟動服務就可以了哦~~

這就實現(xiàn)了一個簡單的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方法模擬數(shù)據(jù)
    var data = Mock.mock({
            // 屬性 list 的值是一個數(shù)組，其中含有 1 到 10 個元素
            'list|1-10': [{
                // 屬性 id 是一個自增數(shù)，起始值為 1，每次增 1
                'id|+1': 1
            }]
        }
    );
    return res.json(data);
})

module.exports = router;

在瀏覽器的輸入http://localhost:3001/api/test/profile即可看到輸出的JSON數(shù)據(jù)列表，

如果訪問的地址為：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數(shù)據(jù)

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

總結

以上是生活随笔為你收集整理的react 项目 mock数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。