使用devServer请求数据

  1. 写在vue.config.js文件中，而该文件和src文件夹是同级目录
  3. // 引入数据
  4. let data = require("./src/mock/mock");
  5. let zhilist = require("./src/mock/zhibo");
  7. module.exports = {
  8.     devServer:{
  9.         before(app){
  10.             // 向/data接口返回数据
  11.             app.get("/data",(req,res)=>{
  12.                 res.send(data.data);
  13.             })
  14.             app.get("/zhibolist",(req,res)=>{
  15.                 res.send(zhilist.data);
  16.             })
  17.         }
  18.     }
  19. }

使用mock自带的功能模拟数据接口

  1. const mock = require('mockjs');
  3. let list = mock.mock({
  4.     'data|10': [{
  5.         'img': '@img(100x100,@color)',
  6.         'title': '@ctitle(2,4)'
  7.     }]
  8. }).data
  11. let data = mock.mock({
  12.     'data|7': [
  13.         {
  14.             'img': "@image(100x100,@color)",
  15.             'title': '@ctitle',
  16.             'price': "@integer(10,100)",
  17.             'count': '@integer(1000,2000)'
  18.         }
  19.     ]
  20. }).data
  21. mock.mock('/list',list);
  22. mock.mock('/data',data);
  23. console.log(list);