在vue-cli环境下模拟数据接口及如何应用mockjs

Posted 2020-09-21 junwu

第一种办法

　　1、需要先准备json文件 在根目录下新建个oapi文件夹下新建个iorder.json文件将需要遍历的json数据沾里面。

　　2、在build文件夹下新建dev-server.js 文件

　　

//  build/dev-server.js
var apiRoutes = express.Router();
var appData = require("../oapi/iorder.json");
apiRoutes.get(‘/oapi‘,function(req,res){
   res.send({
    appData
  }) 
})
app.use(‘/api‘, apiRoutes);

//在list.vue 下 具体看你需要遍历数据的模板vue
methods:{
  axios.get("./api/oapi")
      .then(response=>{let reason=response.data.appData.reason;for(var v of reason){this.tasks.push(v)};Indicator.close();});   
}

第二种办法应用mockjs 无需另建json数据 前提需要安装cnpm install mockjs --save

在dev-server.js下

//mock数据
var Mock = require(‘mockjs‘);
var apiRoutes = express.Router();

apiRoutes.get(‘/oapi‘,function(req,res){
  res.send(Mock.mock({
    "reason|1-10":[{
      "ORDERID|1-10":/[a-zA-Z1-9]/,
      "PKG_NUM|1-8":/[1-9]/,
      "HAS_REPORT":false,
      "ODSTATUS":"样本接收",
      "SEND_TIME":"@date",
      "HZNAME":"@name",
      "EXAMNAME":"原溯450"
    }]
  }))
});
app.use(‘/api‘, apiRoutes);