Vue之使用mockjs生成模拟数据案例详解

目录
  • 在项目中安装mockjs
  • 在Vue项目中使用mockjs的基本流程
  • Mock语法规范
    • 数据模板定义规范(Data Template Definition,DTD)
    • 数据占位符定义规范(Data Placeholder Definition,DPD)
  • Mock.mock()
  • Mock.Random()

在项目中安装mockjs

在项目目录下执行以下安装命令

npm install mockjs --save

在Vue项目中使用mockjs的基本流程

安装完成后,在项目src/utils目录下新建mock.js(可自行定义所在目录及文件名),用于生成模拟数据。

// 引入mockjs
const Mock = require('mockjs')

// 生成模拟数据
const test = function() {
    return Mock.mock({
        // 属性list的值是一个数组,其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性id是一个自增数,起始值为 1,每次增 1
            'id|+1': 1,
            // 通过占位符生成随机数据
            'name': '@name',
            'age': '@natural(18, 100)',
            'email': '@email'
        }]
    });
}

// 映射访问的url
// 此处表示当Ajax请求/mock/test路径时,会映射执行test函数
Mock.mock('/mock/test', test)

在项目src/api目录下,新建MockSrv.js,用于响应Ajax请求。

import axios from 'axios'
import mock from '@/utils/mock'

export default {
    testMock() {
        return axios.get('/mock/test')
    }
}

在组件中请求Mock生成的模拟数据。

<script>
import MockSrv from '@/api/MockSrv'

export default {
    name: 'App',
    mounted() {
        MockSrv.testMock().then(function(resp) {
            console.log("Mock:", resp.data);
        });
    }
}
</script>

执行结果

Mock语法规范

数据模板定义规范(Data Template Definition,DTD)

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

数据占位符定义规范(Data Placeholder Definition,DPD)

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

Mock.mock()

根据数据模板生成模拟数据
Mock.mock(rurl?, rtype?, template | function(options))

  • rurl 可选,表示需要拦截的 URL,可以是 URL 字符串或 URL 正则
  • rtype 可选,表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
  • template 可选,表示数据模板,可以是对象或字符串
  • function(options) 可选,表示用于生成响应数据的函数
    • options 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性

Mock.Random()

Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

Mock.Random 中的方法与数据模板的 @占位符 一一对应,在需要时还可以为 Mock.Random 扩展方法,然后在数据模板中通过 @扩展方法 引用。

到此这篇关于Vue之使用mockjs生成模拟数据案例详解的文章就介绍到这了,更多相关Vue之使用mockjs生成模拟数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD

  • 详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • 详解在vue-cli项目下简单使用mockjs模拟数据

    为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数据来进行后端接口模拟. 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用. 首先搭建一个vue项目 不介绍了 安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件 在s

  • vue-cli项目中使用Mockjs详解

    背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好

  • 在Vue中使用mockjs代码实例

    前言 前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs. 安装 npm install mockjs --save-dev 目录结构 配置 1.api下的config.js:配置axios的拦截处理 import axios from 'axios' // 创建一个axios实例 const service = axios.creat

  • Vue之使用mockjs生成模拟数据案例详解

    目录 在项目中安装mockjs 在Vue项目中使用mockjs的基本流程 Mock语法规范 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD) Mock.mock() Mock.Random() 在项目中安装mockjs 在项目目录下执行以下安装命令 npm install mockjs --save 在Vue项目中使用mockjs的基本流程 安装完成后,在项目src/utils目录下

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • Vue 过渡(动画)transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • postgresql 删除重复数据案例详解

    1.建表 /* Navicat Premium Data Transfer Source Server : localhost Source Server Type : PostgreSQL Source Server Version : 110012 Source Host : localhost:5432 Source Catalog : postgres Source Schema : public Target Server Type : PostgreSQL Target Server

  • Ajax responseText解析json数据案例详解

    解决ajax处理服务器端返回结果responseText中是JSON的数据. 第一,json格式的文件内容如下: { "city":"ShangHai", "telephone":"123456789" } 第二,服务器端返回的json数据就是上述的内容在responseText中,现在要取出来,方法有两种: 方法1: var json=JSON.parse(request.responseText); alert(json.

  • SQL Server批量插入数据案例详解

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量数据插入方法:Bulk和表值参数(Table-Valued Parameters),高效插入数据. 新建数据库: --Create DataBase create database BulkTestDB; go use BulkTestDB; go --Create Table Create tab

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue中点击url下载文件的案例详解

    目录 代码实现 使用 注意 封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录 downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from

  • vue使用axios跨域请求数据问题详解

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader("Access-Control-Allow-Origin", www.allow-domain.com) 但是很多时候,后台出于一些原因不想修改或者已经写好jsonp的接口需要适应不同平台,此时,前端就可以单独引入依赖解决该问题了. 引入依赖 cnpm install jsonp 导入到vu

  • ajax请求json数据案例详解

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求. 如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲<

随机推荐