mockjs在vue中的使用

安装好vue-cli后

加载模块:

npm install mockjs

创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置规则可看官网规则

例如下面是模拟的一条数据:

import Mock from 'mockjs'
export default Mock.mock('msg', { 
    'name'    : '@name', 
    'age|1-100': 100, 
    'color'    : '@color' 
}); 

多条数据

import Mock from 'mockjs'
const Random = Mock.Random;
export default Mock.mock('msg',getData);
function getData(){
  let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            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() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
    return {
        articles: articles
    }
}

在组件中使用

import axios from 'axios';
import mockdata from "@/router/mockjs";
mounted: function(){
        axios.get('msg').then(res=>{
            // this.data1 = res.data;
            console.log(res);
        })
    }

mockjs在vue中的使用的更多相关文章

  1. vue中如何使用mockjs摸拟接口的各种数据

    mockjs的作用 生成模拟数据 模拟 Ajax 请求,返回模拟数据 基于 HTML 模板生成模拟数据(后续更新) 帮助编写单元测试(后续更新) Vue 中使用 mock 有两种使用方式,一种是仅编写 ...

  2. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

  3. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  4. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  6. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  7. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  8. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  9. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

随机推荐

  1. 【JavaScript】for循环小练习

    1.输出1-100的和 var sum = 0; for(var i=1;i<=100;i++){ sum = sum + i; } document.write(sum); 2.输出1-100 ...

  2. 关于 DotNetCore 的自定义权限管理

    1.自定义权限需要扩展 Microsoft.AspNetCore.Authentication 实现一套接口 IAuthenticationHandler, IAuthenticationSignIn ...

  3. jquery的优良继承方法

    说一下好处:这个封装函数可以可以实现子类继承父类原型对象里面的所有方法和属性,但是也留了第二条路,去继承父类构造函数的里面的东西. 两个参数分别是子类的构造函数,后面是父类构造函数 $.inherit ...

  4. delphi idhttp post 普通提交乱码处理

    var IdHTTP1:TIdHTTP; postStream : TStringStream; Wstr:WideString; res:WideString; begin IdHTTP1 := T ...

  5. 【Alpha】Scrum Meeting 11

    目录 前言 任务分配 燃尽图 会议照片 签入记录 前言 第11次会议于4月16日18:15在一公寓三楼召开. 交流确认了任务进度,讨论项目发布事宜,分配下一阶段任务.时长45min. 任务分配 姓名 ...

  6. 给COCO数据集的json标签换行

    #include <iostream> #include <fstream> #include <string> #include <vector> u ...

  7. topcoder srm 600 div1

    problem1 link 首先,如果一个数字的某一位是1但是$goal$的这一位不是1,那么这个数字是不用管它的.那么对于剩下的数字,只需要统计在$goal$为1的位上,这些数字对应位上也是1的数字 ...

  8. 不能最为IF判断条件的属性

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 关于新写的js在浏览器f12的时候看不到解决办法

    这是由于浏览器缓存导致的,谷歌浏览器ctrl+shift+delete快捷键到清除浏览器数据清除即可.平时经常会遇到的,所以记录下.

  10. [FJOI2018]领导集团问题 mulitset合并

    P4577 [FJOI2018]领导集团问题 链接 luogu bzoj 他是个重题 bzoj4919: [Lydsy1706月赛]大根堆 代码改改就过了 思路 求树上的lis,要好好读题目的!!! ...