首页 > 其他分享 >vue2 - mockjs的使用

vue2 - mockjs的使用

时间:2023-03-24 23:56:05浏览次数:38  
标签:import js BlogMockData mock vue2 使用 mockjs Mock

mockjs官网:http://mockjs.com/

 

1.安装mockjs

npm install mockjs

 

2.创建mock文件夹并且创建index.js

//引入mockjs
import Mock from "mockjs"
//引入数据
import BlogMockData from "../mock/BlogMockData";

//使用自定义插件的方式使mock起作用
export default {
  install(Vue) {
    Mock.mock(/\/api\/getBlogList/,function (options) {
      console.log(options); //{url: 'http://localhost:8080/api/getBlogList', type: 'GET', body: null}
      return BlogMockData.blogList
    });

    Mock.mock(/\/api\/getBlog/,function (options) {
      return BlogMockData.blog
    })
  }
}

 

3.数据模板 BlogMockData.js

import Mock from "mockjs"

let blogMockData = Mock.mock({
  //使用mock语法即可
  "blogList|10": [
    {blogId: "@id",author: "@name"}
  ],
  getBlog: {
    //使用mock语法即可
    blogId: "@id",author: "@name"
  }
})

export default blogMockData

 

4.mian.js 使用mock

//使用mock
import mock from "./mock/index.js"
Vue.use(mock)

 

标签:import,js,BlogMockData,mock,vue2,使用,mockjs,Mock
From: https://www.cnblogs.com/ErenYeager/p/17253736.html

相关文章

  • 使用 class sap.ui.core.UIComponent.createContent 创建 Component 实例
    SAPUI5中,sap.ui.core.UIComponent和sap.ui.core.Component是两个不同的概念,但它们之间有联系。sap.ui.core.Component是SAPUI5框架中的一个基类,用于封装应用程序或控......
  • 使用 SAP Business Application Studio 在浏览器环境里开发 SAP UI5 应用
    本文写作动机笔者的这篇教程文章,有学习者在评论区留言:SAPUI5应用开发教程之八-多语言的支持老师,因为我不懂JS,这个里面我比较想不通的事。getView,getModel这......
  • gralde插件->docker-compose的使用
    在javaweb项目中,本地开发经常会需要在本地使用docker启动数据库等之类的服务。gradle提供了一个插件,允许通过gradletask启动docker的容器。在这里我们介绍的一个gralde插......
  • 镜像使用、容器连接
    Docker镜像使用列出镜像列表、获取一个新的镜像REPOSITORY:表示镜像的仓库源TAG:镜像的标签IMAGEID:镜像IDCREATED:镜像创建时间SIZE:镜像大小-i:交互式操作。-t:终......
  • Git之使用GitHub搭建远程仓库
    在上一节中,我们学习了如何使用Git,构建我们的本地仓库,轻松的实现了版本控制以及代码还原,修改日志查看等;读者肯定不满足与本地是吧,假如是多个人一起来开发一个程序呢?我们需要......
  • 使用Grafana监控Lync/Skype服务器(三)
    在上一篇文章中,我们使用Grafana从SQLServer的表中取数,然后通过Dashboard实现了对Lync/Skype服务器的实时会议以及用户数的监控。那么在本篇文章中,我们将继续使用Grafana来......
  • GnuRadio-控件使用
    1.QTGUIRange id是唯一的id;Lable是变量的id;defaultvalue必须再start和stop之间2.RTL-SDR ......
  • 使用 PC 端浏览器开发者工具对移动端真机环境 Web 页面进行远程调试
    Mac/Windows浏览器开发者工具远程调试iPhone/Android页面在移动端Web开发中,有时候只通过模拟器进行调试是不够的,需要在真机环境下进行调试才能发现并解决一些问题。......
  • AJAX概念以及使用
    一、介绍AJAX1.AJAX全称为AsynchronousjavaScriptAndXML就是异步的JS和xml通过AJAX可以在浏览器中向服务器发送异步请求,最大优化:无刷新获取数据二、介绍XML(拓展XML代......
  • 今日总结之maven的使用
    在maven项目中的pom.xml文件配置依赖的jar包的坐标  例如配置mysql的jar包就可以导入mysql的坐标<dependencies><!--https://mvnrepository.com/artifa......