Vue 模拟数据之mockjs没有点

一、前言

mock这个词的初衷是虚拟和模拟。一般来说，它是模拟服务端接口数据。前端和后端分离后，前端人员不能依赖它API在本地建立开发和建设JSON服务，自己生成测试数据。

二、步骤

① 下载

下载 npm install --save mockjs

cnpm install --save mockjs axios 顺带下axios

② 在src文件夹下创建一个mock文件夹(文件夹用于放置我们的模拟数据)

③ 编写模拟数据json 与 mock配置

（3-1）创建json编写模拟数据文件

(3-2)配置模拟数据

④在index.js里写

// 1.引用mockjs let Mock=require("mockjs") // 2.配置 // Mock.mock("模拟数据地址","方式get/post",require("你的json数据")) Mock.mock("/data/list/tian","get",require("./data.json"))

⑤别忘了建立关联 在main.js

import Vue from 'vue' import App from './App.vue'  // 建立mock与项目的关系 // 因为如果我们只写文件夹的地址，然后他会自动找到文件夹。index.js //require("./mock/index.js") require("./mock")  Vue.config.productionTip = false  new Vue({   render: h => h(App), }).$mount('#app')

⑥data.json模拟数据

{"data":[     {"title":"恋爱的犀牛",       "content": "购买须知：1.2米以上的儿童需要入场",       "category_name": "戏剧",       "image": "https://img2.woyaogexing.com/2022/06/26/e0cd9682d9775418!400x400.jpg"     },     {"title":"禅宗文化活动。",       "content": "年轻人周末来五台山",       "category_name": "公益",       "subcategory_name": "公益",       "image": "https://img2.woyaogexing.com/2022/06/26/16ced2be7f6bb989!400x400.jpg"     },     {"title":"提高上班族活动",       "content": "希望提高英语学习兴趣",       "category_name": "聚会",       "subcategory_name": "派对",       "image": "https://img2.woyaogexing.com/2022/06/26/fe72031201f491f0!400x400.jpg"     }     ] }

⑦使用axios请求即可

<script> import axios from 'axios' export default{     data(){         return{}     },     mounted(){         axios.get('/data/list/tian')             .then( res=> {             console.log(res);         })     },     methods:{} }  </script>

⑧请求结果