在vue项目中使用mock.js
程序员文章站
2022-03-18 13:48:40
...
vue-cli项目中使用mockjs模拟数据
vue-cli项目中如何使用
- 在项目中安装mockjs、axios(http请求库)
cnpm install mockjs axios --save
- 在项目中新建一个mock.js文件,用于定义接口返回的数据
- 在main.js引入mock.js
mock.js
const Mock = requery('mockjs') // 获取mock对象
const Random = Mock.Random // 获取random对象,随机生成各种数据
const domain = 'http://mockjs.com/api' // 定义默认域名,可以随便写
const code = 200 // 返回的状态码
// 随机生成的数据
const postData = req => {
console.log(req) // 请求体,用来获取参数
let posts = [] // 用于存放文章数据的数组
for (let i = 0;i < 10; i++) {
let post = {
title: Random.csentence(10,25), // 随机生成10-25字符长的标题
icon: Random.dataImage('250*250','文章icon'), // 随机生成大小为250x250的图片链接
author: Random.cname(), // 随机生成名字
date: random.date() + '' + Random.time() // 随机生成年月日 + 时间
}
posts.push(post)
}
// 返回状态码和生成的数据posts
return {
code,
posts
}
}
// 定义请求链接,类型,还有返回的数据
Mock.mock(`${domain}/posts`,'get',postData)
main.js
import Mock from './mock' // 在main.js中引入刚刚写的mock.js文件
import axios from 'axios'
asios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
Vue.prototype.$http = axios
组件中
this.$http.get('/posts').then(result => {
console.log(result)
})
推荐阅读
-
VS中利用ASP.net做网站,使用Gridview显示数据列表,用IIS发布后,在IE浏览器和360浏览器中看到样式不一样求高手指教!_html/css_WEB-ITnose
-
maven中使用tomcat插件运行maven项目,maven中运行tomcat报错
-
Gradle在Android Studio中的简单使用
-
在AIX Version 5.3中使用Java和PHP技术进行开发,第1部分:设置Java环境
-
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析_PHP
-
Vue.js中多页面项目如何配置
-
在php中使用sockets:从新闻组中获取文章
-
在.NET项目中使用PostSharp
-
AndroidStudio配置settings.gradle在工程中构建多个项目
-
vue2中使用 better-scroll