1.安装Moke

可在vue图形化界面里安装

2.导入Mock

在vue项目src目录中新建mock>index.js,然后在main.js中导入

  1. // mock>index.js
  2. //导入模拟数据mock包
  3. import Mock from 'mockjs'
  5. //通过Mock.mock() 来模拟API接口
  6. Mock.mock('/api/goodslist', 'get', {
  7.     status: 200,
  8.     message: '获取商品成功',
  9.     data: [1, 2, 3, 4]
  10. })
  1. import './mock/index'   //main.js中导入mock
  1. // App.vue
  2. <template>
  3.   <div id="app">
  4.     学习mock
  5.     <button @click="getGoodsList">获取商品列表</button>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   methods: {
  12.     async getGoodsList() {
  13.       const { data: res } = await this.$http.get("/api/goodslist");
  14.       console.log(res);
  15.     }
  16.   }
  17. };
  18. </script>
  20. <style>
  21. </style>
  1. Mock.mock('/api/goodslist', 'get', {
  2.     status: 200,
  3.     message: '获取商品成功',
  4.     // 5-10表示随即生成5-10个data   
  5.     'data|5-10': [{
  6.         // @increment生成一个全局的自增整数
  7.         id: '@increment',
  8.         // @cword 随机生成一个汉字，@cword(2,8) 随机生成2~8个汉字
  9.         name: "@cword(2,8)",
  10.         //@natural(a,b)随即生成一个a~b之间自然数
  11.         price: '@natural(2,10)',
  12.         count: '@natural(100,999)',
  13.         // @dataImage 随即生成一个图片
  14.         img: '@dataImage(78x78)'
  15.     }]
  16. })