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模拟假数据的更多相关文章

  1. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

  2. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  3. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  4. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  5. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  6. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  7. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  8. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  9. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

随机推荐

  1. 两句话掌握python最难知识点——元类

    千万不要被所谓“元类是99%的python程序员不会用到的特性”这类的说辞吓住.因为每个中国人,都是天生的元类使用者 学懂元类,你只需要知道两句话: 道生一,一生二,二生三,三生万物 我是谁?我从哪来 ...

  2. 超详细的FreeRTOS移植全教程——基于srm32

    ### 准备 在移植之前,我们首先要获取到FreeRTOS的官方的源码包.这里我们提供两个下载链接: > 一个是官网:http://www.freertos.org/ > 另外一个是代码托 ...

  3. CSS ellipsis 与 padding 结合时的问题

    CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; dis ...

  4. B-线性代数-矩阵转置

    [TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...

  5. python编程基础之十七

    字符串:str1 = '123' str2 ="123" str3 = """123""" str4 = '''123' ...

  6. C# 动态(不定)类型和不定参数数量,使用param写入CSV文档的最简单方法,提供excel(或记事本)阅读支持格式

    在开发一个项目,使用C#写入CSV文件时,虽并未遇到太多阻碍,但是很多小伙伴估计和我有过同样的想法.简单的写入CSV,固定参数数量就好了很简单写完.但是如果遇到你得到的数据参数数量和参数类型未知或者动 ...

  7. 《锋利的jQuery》学习总结

    通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...

  8. [CF722C] Destroying Array

    C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. python中函数定义与调用顺序问题

    def main(): try: mtd(3) except Exception as e: print("程序出现异常:", e) mtd(3) def mtd(a): if a ...

  10. linux系统状态网络、权限、用户大杂烩

    来来来,我们聊一下liunx系统相关的知识!! 首先从查询网络配置开始 ifconfig 查询.设置网卡和ip等参数 ifup,ifdown 脚本命令,更简单的方式启动关闭网络 ip命令是结合了ifc ...