Vue项目中使用mockjs实现mock模拟数据

您所在的位置：网站首页 › ajax的mock模拟接口返回数据 › Vue项目中使用mockjs实现mock模拟数据

Vue项目中使用mockjs实现mock模拟数据

2023-11-18 12:10| 来源: 网络整理| 查看: 265

此篇文章针对的是vue cli 2脚手架搭建的项目引入mock.js实现mock数据

Mock.js的主要作用是生成随机数据，拦截 Ajax 请求

安装mock.js npm install mockjs --save-dev 模拟数据接口

在项目的src目录下创建一个mock目录，然后在里面新建一个index.js文件，作为mock的导出点，用于提供给src/main.js使用。

在src/mock下新建modules目录，里面再新建各种xxx.js，用来模拟各个页面的数据。

src目录截图

index.js代码 // 引入mockjs import Mock from 'mockjs' // 引入模板函数类 import ratings from './modules/ratings' // Mock函数 const { mock } = Mock // 设置延时 Mock.setup({ timeout: 400 }) // 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据); mock(/\/api\/ratings\/list/, 'post', ratings.list) ratings.js代码 // 引入随机函数 import { Random } from 'mockjs' // 引入Mock const Mock = require('mockjs') // 定义数据 const listData = Mock.mock({ 'data|20': [{ username: () => Random.cname(), time: () => Random.date('yyyy.M.d'), content: () => Random.csentence(5, 10) }] }) function list (res) { // res是一个请求对象，包含: url, type, body return { code: 200, data: listData.data, message: '请求成功' } } export default { list }

关于mockjs使用Random方法生成随机数据的规则，大家可以查看它的官方文档

main.js中引入模拟数据接口

在src/main.js中需要加入以下代码

// 引入mock文件，正式发布时，注释掉该处即可 import '@/mock' 安装axios npm安装axios npm install axios main.js中引入axios // 引入axios import axios from 'axios' // 配置axios到原型链中 Vue.prototype.$axios = axios main.js完整代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' // 引入路由 import router from './router' // 引入vant import Vant from 'vant' import 'vant/lib/index.css' // 引入axios import axios from 'axios' // 引入样式文件 import '@/common/stylus/index.styl' // 引入mock文件，正式发布时，注释掉该处即可 import '@/mock' // 配置axios到原型链中 Vue.prototype.$axios = axios Vue.config.productionTip = false Vue.use(Vant) /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) // components: { App }, // template: '' }) 页面使用 export default { name: 'Ratings', data () { return { msg: '评价页面', loading: false, finished: false, list: [] } }, methods: { onLoading () { // 使用axios获取mock的模拟数据 this.$axios.post('/api/ratings/list').then(res => { const { code, data } = res.data if (code === 200 && data) { data.forEach(v => { this.list.push(v) }) this.loading = false // 加载状态结束 } if (this.list.length >= 100) { this.finished = true // 数据全部加载完毕 } }).catch(err => { console.log(`调用失败：${err}`) }) } } } .ratings text-align: center

打印数据

实际效果

评价页面

如有错误，请多指教，谢谢！

【本文地址】

Vue项目中使用mockjs实现mock模拟数据

Vue项目中使用mockjs实现mock模拟数据

今日新闻

推荐新闻