vue中 mock使用教程

//mock/index.js
import Mock from 'mockjs' //引入mockjs，npm已安装
import { Random,toJSONSchema } from 'mockjs' // 引入random对象,随机生成数据的对象，（与占位符@一样）
Mock.setup({timeout:1000  //设置请求延时时间
})
const getdata = function(option){ //定义请求数据方法let datalist = [];var template = {'key|1-10': '★'}for (let i = 0; i < 20; i += 1) {const o = {  //mockjs模拟随机生成数据，生成20条
      recipeId: Random.guid(),billId: Random.string(10),orgId: Random.string('number', 8, 10),Date:Random.date('yyyy-MM-dd'),time:Random.time('A HH:mm:ss'),adress:Random.county(),viewName: Random.cword(4, 16), // 随机生成任意名称
      personName:toJSONSchema(template) ,reason: Random.csentence(10, 32),}datalist.push(o)}return{data:datalist}
}const produceData = function (opt) {console.log("opt",opt);let articles = [];for(let i=0;i<30;i++){let newArticleObject = {title:Random.csentence(5,30),thumbnail_pic_s:Random.dataImage('200x100','Mock.js'),author_name:Random.range(10),date:Random.date()+''+Random.time(),email:Random.email(),name:Random.cname()}articles.push(newArticleObject)}return {data:articles}
}
Mock.mock('/name',/post|get/i,produceData)//当post 或者get 请求到news路由时MOCK会拦截请求并返回

Mock.mock('/user', /post|get/i,getdata) //调用模拟数据方法

转载于:https://www.cnblogs.com/caoruichun/p/9506609.html

vue中 mock使用教程相关推荐

html用bmob做留言,bmob js-sdk 在vue中的使用教程
BmobSDK的引入将bmob js-sdk放在static目录,然后在index.html页面中已 script 标签的形式引入,就可以在vue中全局使用bmob js-sdk 在assets目录 ...
Vue中的vxe-table教程9-表格筛选
知识点: 三种筛选方式: 1. Name多选筛选方式 2. Sex单选筛选方式,:filter-multiple="false" 3. Age输入数据判等筛选方式总结:通过设置 ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
在Vue项目中使用LayUI教程且解决laydate无效的问题
在Vue项目中使用LayUI教程且解决laydate无效的问题 1,安装LayUI开发包 2,导入LayUI开发包 3,在挂载函数mounted中加载LayUI组件 4,解决加载LayUI日期组件出现 ...
vue中控制mock在开发环境使用，在生产环境禁用
文章目录 vue中控制mock在开发环境使用,在生产环境禁用解决方案 vue中控制mock在开发环境使用,在生产环境禁用原因:mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端 ...
vue中devTools插件安装教程
vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTo ...
Vue中引入看板娘教程
第一种方法本教程使用的Vue项目一.下载文件要玩看板娘,需要一些写好的资源文件,下载地址我提供我的百度网盘链接:百度网盘请输入提取码提取码:22l5 也可以扫下面这个二维码使用步骤 1. ...
vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...

vue中 mock使用教程

vue中 mock使用教程相关推荐

最新文章

热门文章