如何在vue-cli项目中结合mockjs模拟假数据
1.前言
在如今前后端分离的开发方式已被广泛采用的今天,前端同学和后端同学各自独立开发,后端提供数据接口,前端调用接口获取数据渲染页面。但是在实际开发中,后端开发由于逻辑相对复杂接口迟迟提供不到位,而前端正着急着调用接口来测试页面是否能够正常渲染,这就造成开发进度阻塞。幸好,我们有mockjs这个插件可以完美的解决这个问题,该插件可以非常方便的模拟后端提供接口以供调用,并且在后续后端真实接口提供以后,我们只需将创建的模拟数据文件删掉即可,丝毫不会对我们的项目造成污染。下面我们将介绍一下如何在vue-cli项目中结合mockjs模拟后端接口和数据。
2.安装
使用之前,我们需要先安装一下mockjs
npm install mockjs --save-dev
3.使用mockjs模拟数据
安装完成之后,我们在项目的src目录下新建mock.js文件,并引入mockjs:
import Mock from 'mockjs'
引入之后,我们就可以开始模拟我们想要的数据啦,示例如下:
import Mock from 'mockjs' const Random = Mock.Random; function getData(){
let datalist= [];
for (let i = 0; i < 100; i++) {
let newData = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
datalist.push(newData)
}
return {
data: datalist
}
}
const data = Mock.mock('/msg1',getData)
export default {data};
上面代码中的getData()函数是用来批量生成数据的,Mock.mock()函数的第一个参数是被请求的url,第二个参数是后端要返回给前端的数据,写好之后我们将该接口导出。
4.导入模拟好的数据接口
模拟好假数据接口之后,我们还要在main.js中将接口导入,这样在项目中任意组件内都可以请求这些接口了:
import mockdata from './mock'
5.测试模拟好的接口
到此,我们就已经完成数据接口的模拟,我们可以来测试一下,看看接口效果。我们在任意组件内,对写好的接口url发起请求,看看返回的数据,代码如下:
<button @click="fasong">fasong</button>
methods:{
fasong(){
this.$http.get('/msg1').then(function (res) {
console.log(res)
})
}
}
控制台打印的请求返回数据如图:
OK,完美!
6.总结
当后端写好真实接口以后,我们只需删掉创建的mock.js文件和在main.js中导入假数据的那行代码即可,其余都不用动,简直不能更方便哈!
(完)
如何在vue-cli项目中结合mockjs模拟假数据的更多相关文章
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
- vue项目中使用mockjs模拟接口返回数据
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- 如何在vue && webpack 项目中的单文件组件中引入css
引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
随机推荐
- 两句话掌握python最难知识点——元类
千万不要被所谓“元类是99%的python程序员不会用到的特性”这类的说辞吓住.因为每个中国人,都是天生的元类使用者 学懂元类,你只需要知道两句话: 道生一,一生二,二生三,三生万物 我是谁?我从哪来 ...
- 超详细的FreeRTOS移植全教程——基于srm32
### 准备 在移植之前,我们首先要获取到FreeRTOS的官方的源码包.这里我们提供两个下载链接: > 一个是官网:http://www.freertos.org/ > 另外一个是代码托 ...
- CSS ellipsis 与 padding 结合时的问题
CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; dis ...
- B-线性代数-矩阵转置
[TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...
- python编程基础之十七
字符串:str1 = '123' str2 ="123" str3 = """123""" str4 = '''123' ...
- C# 动态(不定)类型和不定参数数量,使用param写入CSV文档的最简单方法,提供excel(或记事本)阅读支持格式
在开发一个项目,使用C#写入CSV文件时,虽并未遇到太多阻碍,但是很多小伙伴估计和我有过同样的想法.简单的写入CSV,固定参数数量就好了很简单写完.但是如果遇到你得到的数据参数数量和参数类型未知或者动 ...
- 《锋利的jQuery》学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
- [CF722C] Destroying Array
C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...
- python中函数定义与调用顺序问题
def main(): try: mtd(3) except Exception as e: print("程序出现异常:", e) mtd(3) def mtd(a): if a ...
- linux系统状态网络、权限、用户大杂烩
来来来,我们聊一下liunx系统相关的知识!! 首先从查询网络配置开始 ifconfig 查询.设置网卡和ip等参数 ifup,ifdown 脚本命令,更简单的方式启动关闭网络 ip命令是结合了ifc ...