Mock js 的理解以及应用

最新推荐文章于 2024-06-27 22:48:39 发布
最新推荐文章于 2024-06-27 22:48:39 发布
阅读量6.6k 收藏 33
点赞数 3
分类专栏： 总结 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45000381/article/details/98234684
版权
vue 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
总结
8 篇文章 0 订阅
订阅专栏

官网介绍：http://mockjs.com/

在这里插入图片描述在这里插入图片描述

1、安装

1.1、安装：yarn add mockjs -S

输入：yarn add mockjs -S

（在当前项目下安装 Mock） myapp 是项目名称
在这里插入图片描述
1.2、看网站的示例，实例就是语法

在这里插入图片描述

1.3、创建文件夹
在项目下创建 》 mock文件夹 》再创建 index.js
在这里插入图片描述

总结
mock.mock()
参数1：请求地址 选填 url
参数2: 请求类型 选填 type
参数3：数据模板 | 函数

mock.mock()网址： https://github.com/nuysoft/Mock/wiki/Mock.mock()#mockmock-rurl-rtype-templatefunction-options--

a、数据生成

index。js  文件   》》》在终端输入 node  index  就可以运行查看了
const Mock = require("mockjs"); //引入
const url = require("url") 

/*

mock.mock()
参数1：请求地址 选填  url
参数2: 请求类型 选填  type
参数3：数据模板 | 函数    
*/
var data = Mock.mock({
    "data|100":[   //意思是data数组中有100条数据
        {  //这个对象是用来写数据模板的
          "id|+1":0,   //初始值是0每次id都+1
          "goodsName":"@ctitle(3, 5)",   //看官网，这个名字是3-5之间的
          "goodsPrice|+1":100,   //这个类似上面的id一个，只是初始值是从100开始的
          "address":"@county(true)",   //这个是地址，@county(true)  对象的属性值都是mock.mock()提供的方法，直接拿过来用就可以了
          "tel":/^1(3|5|7|8|9)\d{9}$/,   //正则写的电话后面1开头，正则不懂自己去学！！！！！！！！！！！很重要
          "goodsImg":"@image('200x100', '#894FC4', '#FFF', 'alley')", // 图片
          "date":'@date("yyyy-MM-dd M:dd:d")',  //时间
          "email":"@email()"  //邮箱
        }
    ]
})

console.log(data);//打印这Mock.mock() 赋值的内容，直接在终端运行就 可以了

效果：
在这里插入图片描述
在这里插入图片描述

这里是引用
在这里插入图片描述
下图这样就可以拦截砂锅面发送的数据
在这里插入图片描述

根据页数返回对应的数据

目录结构
在这里插入图片描述

App.vue文件

<template>
  <div id="app"></div>
</template>
<script>
import axios from "axios"; //直接引用就行
export default {
  name: "App",
  created() {
    //  axios.post("/goods/goodsList",{  //
    //     limit:5,
    //     page:1
    //  }).then((data)=>{
    //    console.log(data);
    //  })
    axios.get("/goods/goodsList", {
        params: {
          limit: 5,  //一页有5条数据
          page: 1   //第几页
        }
      }).then((data) => {
      console.log(data);
      });
  }
}
</script>
<style lang="scss">
</style>

index.js 文件

const Mock = require("mockjs"); //引入
const url = require("url") 

/*

mock.mock()
参数1：请求地址 选填  url
参数2: 请求类型 选填  type
参数3：数据模板 | 函数    
*/

var data = Mock.mock({
    "data|100":[   //意思是data数组中有100条数据
        {  //这个对象是用来写数据模板的
          "id|+1":0,   //初始值是0每次id都+1
          "goodsName":"@ctitle(3, 5)",   //看官网，这个名字是3-5之间的
          "goodsPrice|+1":100,   //这个类似上面的id一个，只是初始值是从100开始的
          "address":"@county(true)",   //这个是地址，@county(true)  对象的属性值都是mock.mock()提供的方法，直接拿过来用就可以了
          "tel":/^1(3|5|7|8|9)\d{9}$/,   //正则写的电话后面1开头，正则不懂自己去学！！！！！！！！！！！很重要
          "goodsImg":"@image('200x100', '#894FC4', '#FFF', '我爱你...')", // 图片
          "date":'@date("yyyy-MM-dd M:dd:d")',  //时间
          "email":"@email()"  //邮箱
        }
    ]
})


// console.log(data);//打印这Mock.mock() 赋值的内容，直接在终端运行就 可以了
//上面就实现了数据的生成了

//去拦截AJAX
// Mock.mock(/\goods\/goodsList/,"get",function(options){
//   console.log(options);  //
//   console.log(url.parse(options.url,true));
//   console.log(url.parse(options.url,true).query)  //下面会用到
// })


Mock.mock(/\goods\/goodsList/,"get",function(options){
    let {limit,page} = url.parse(options.url,true).query;// 解构赋值，结合上面看就懂了
    // return data.data.slice(0,4);//获取0-4条的数据，在app.vue 中可以打印查看
    return data.data.slice((page-1)*limit,(limit*page)-1)  //data.data是上面的数据，这里获取的是
})

//参数1：是一个rul ，是正则来写的，意思是：/goods/goodsList
// Mock.mock(/\goods\/goodsList/,"post",function(options){
//     console.log(options);
//     let {limit,page} = JSON.parse(options.body);
 
//     // let {limit,page} = url.parse(options.url,true).query;
//     return data.data.slice((page-1)*limit,(limit*page)-1)
// }).

main.js文件

import Vue from 'vue'
import App from './App.vue'
import "./mock/index"  //把编写好的mock  引入到这里，如果不引用mock文件就相当于空文件
Vue.config.productionTip = false

new Vue({

  render: h => h(App)
}).$mount('#app')
/*
  
*/

运行结果：
在这里插入图片描述

根据页数返回对应的数据 …案例结束

下面是通过post发送的

App.vue文件

<template>
  <div id="app"></div>
</template>
<script>
import axios from "axios"; //直接引用就行
export default {
  name: "App",
  created() {
     axios.post("/goods/goodsList",{  //这个是通过post发送的
        limit:5,   //一页有5条数据
        page:1    //第几页
    //     }
     }).then((data)=>{
       console.log(data);
     })
    // axios.get("/goods/goodsList", {   //这个是通过get发送的
    //     params: {
    //       limit: 5,  //一页有5条数据
    //       page: 1   //第几页
    //     }
    //   }).then((data) => {
    //   console.log(data);
    //   });
  }
}
</script>
<style lang="scss">
</style>

index.js文件

const Mock = require("mockjs"); //引入
const url = require("url") 

/*

mock.mock()
参数1：请求地址 选填  url
参数2: 请求类型 选填  type
参数3：数据模板 | 函数    
*/

var data = Mock.mock({
    "data|100":[   //意思是data数组中有100条数据
        {  //这个对象是用来写数据模板的
          "id|+1":0,   //初始值是0每次id都+1
          "goodsName":"@ctitle(3, 5)",   //看官网，这个名字是3-5之间的
          "goodsPrice|+1":100,   //这个类似上面的id一个，只是初始值是从100开始的
          "address":"@county(true)",   //这个是地址，@county(true)  对象的属性值都是mock.mock()提供的方法，直接拿过来用就可以了
          "tel":/^1(3|5|7|8|9)\d{9}$/,   //正则写的电话后面1开头，正则不懂自己去学！！！！！！！！！！！很重要
          "goodsImg":"@image('200x100', '#894FC4', '#FFF', '我爱你...')", // 图片
          "date":'@date("yyyy-MM-dd M:dd:d")',  //时间
          "email":"@email()"  //邮箱
        }
    ]
})


// console.log(data);//打印这Mock.mock() 赋值的内容，直接在终端运行就 可以了
//上面就实现了数据的生成了

//去拦截AJAX
// Mock.mock(/\goods\/goodsList/,"get",function(options){
//   console.log(options);  //
//   console.log(url.parse(options.url,true));
//   console.log(url.parse(options.url,true).query)  //下面会用到
// })

//  .........这个是通过get  拦截的AJAX
// Mock.mock(/\goods\/goodsList/,"get",function(options){
//     let {limit,page} = url.parse(options.url,true).query;// 解构赋值，结合上面看就懂了
//     // return data.data.slice(0,4);//获取0-4条的数据，在app.vue 中可以打印查看
//     return data.data.slice((page-1)*limit,(limit*page)-1)  //data.data是上面的数据，这里获取的是
// })

//参数1：是一个rul ，是正则来写的，意思是：/goods/goodsList


//............这个是拦截  post 提交的数据
Mock.mock(/\goods\/goodsList/,"post",function(options){
    console.log(options);//数据在body中
    let {limit,page} = JSON.parse(options.body);  //从body中获取数据，然后解构赋值
 
    return data.data.slice((page-1)*limit,(limit*page)-1)
})

/*
注意：post提交的数据不在URL里面，所以
*/

main.js

import Vue from 'vue'
import App from './App.vue'
import "./mock/index"  //把编写好的mock  引入到这里，如果不引用mock文件就相当于空文件
Vue.config.productionTip = false

new Vue({

  render: h => h(App)
}).$mount('#app')
/*
  
*/

运行结果
在这里插入图片描述

mustang(野马）
关注
  • 3
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Mockjs使用方法整理
m0_46220643的博客
01-18 406
Mockjs使用方法整理欢迎使用Markdown编辑器一、安装二、引入获得数据 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 一、安装 安装 mockjs 和 axios $ npm install mockjs $ npm install axios 二、引入 建立目录结构，src/mock/mock.js mock.js const M
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
10-22
关于拦截的原理，可以简单理解为Mock.js通过覆盖原生的XMLHttpRequest对象的方法，当AJAX请求被触发时，Mock.js会接管这个请求，根据预设的规则返回模拟数据。这类似于面向对象编程中的方法重写，通过改变`this`的...
mock.js 劫持 ajax，模拟数据
weixin_30725467的博客
03-29 304
http://mockjs.com/ Mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参见Mock文档Mock Wiki 安装 使用npm安装:npm install mockjs;或直接<script src="http://m...
【软件测试】mock详细介绍
最新发布
weixin_46453070的博客
06-27 511
1. 什么是Mock？2. Mock的主要目的3. Mock的使用场景4. Mock的实现方式5. Mock的优缺点总结在软件开发和测试中，“mock”（模拟）是一种常见的技术和概念。它通常指的是创建虚拟对象的过程，以模拟真实系统中的对象和行为。Mock是在软件开发中使用的一种技术，用于模拟真实系统中的对象、行为或服务。通常，这些模拟对象或行为用于替代实际的对象或服务，以便在开发和测试过程中进行独立、控制和可重复的操作。Mock是一种在软件开发和测试中常用的技术，用于模拟真实系统中的对象、行为或服务。
mockjs的使用
weixin_45944877的博客
03-25 2066
1.创建项目 2.安装依赖 安装axios（发送ajax请求） npm insatll axios --save 安装mockjs（用来产生随机数据） npm isnatll mockjs -save-dev 安装json5 （解决json无法添加注释的问题） npm install json5 --save-dev 生成随机字符串 引入mock.js const Mock = require ('mock.js') 生成字符串 let id = Mock.mock（'@id(
mockjs 的使用
m0_63907100的博客
03-08 513
mockjs 的使用
mock.js的使用
weixin_39893889的博客
04-19 1643
mockjs的使用
mock.js模拟前后台交互
12-10
在本文中，我们将深入理解如何使用 Mock.js 模拟后台交互，特别是针对 Vue 项目和 axios 库。 ### 安装 Mock.js 在开始之前，确保已经安装了 Mock.js。在项目根目录下，通过 npm 安装： ```bash npm install ...
Vue+mock.js+axios
11-08
Vue.js 是一个流行的前端...综上所述，"Vue+mock.js+axios"项目展示了前端开发中的常见技术栈，涵盖了前端数据获取、组件化开发、数据模拟和状态管理等多个方面，对于学习和理解现代前端开发流程具有很高的参考价值。
jQuery和mock模拟登录.zip
10-14
接下来，我们将深入探讨jQuery库、mock.js以及它们在模拟登录中的应用。 **jQuery库** jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。在登录功能中，jQuery可以帮助我们：...
JS 的应用开发初探(mootools)
10-29
JavaScript，简称为JS，是一种广泛应用于网页和网络应用开发的脚本语言，尤其在客户端的交互式用户体验中扮演着重要角色。本文将探讨在JS应用开发中的一些关键点，特别是结合MooTools库进行的实践。 首先，我们讨论...
mock.js使用
Admans的专栏
04-15 5853
一、Mock.js入门 1． 什么是mock.js? Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城狮独立 于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 1,根据数据模板生成模拟数据 2,模拟 Ajax 请求，生成并返回模拟数据 3,基于 HTML 模板生成模拟数据 Mock.js 具有以下特点： 1.前后端分离,让前端攻城师独立于后端进行开发。 2.增加单元测试的真实性 3.通过随..
Mock.js的使用
qq_60602244的博客
05-08 509
目录Mock.js的使用1.安装2.配置3.引入4.使用5.常用语法 Mock.js的使用 Mock.js用于随机生成一些数据。原理是对请求进行了拦截，并未发送真是的向服务端的请求。这里只讲在Vue中的使用。 1.安装 npm install mock.js 2.配置 在src下创建mockjs文件夹，再创建index.js文件。在index.js中对mock进行配置及模拟数据。 import Mock from 'mockjs' // 模拟get请求，实际是对真是请求的拦截 // (注意这里的ur
Mock.js 使用
Do Re Mi 的博客
11-22 4774
模拟数据 设置迟延时间 我们可以使用 Mock.setup 来设置模拟数据时的延迟时间，单位：毫秒。可以设置一个固定的时间，也可以使用-设置一个时间段： // 延迟4秒 Mock.setup({ timeout: 4000 }) // 延迟3~9秒 Mock.setup({ timeout: '3000-9000' }) 模拟数据 可以使用 Mock.mock 生成模拟数据。 ...
Mock.js使用
灰色头像@的博客
03-17 1048
Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的urlmockjs可以拦截ajax请求，返回设定好的数据。
mockjs的基本使用
m0_60507322的博客
01-08 661
mockjs基本使用
mock.js的基本使用
xu_xin96的博客
02-29 658
Mock.js 是一个用于生成随机数据和拦截 AJAX 请求的 JavaScript 库。它可以用于前端开发中的数据模拟和接口测试。你可以启动前端项目，并访问相应的接口地址，查看模拟数据和拦截效果是否符合预期。在开发过程中，你可以根据需要对模拟数据进行调整和扩展，以满足具体的测试需求。
学习使用 mockjs
青蛙king的博客
11-21 1904
mock.js 官网生成随机数据，拦截 Ajax 请求。属性名（必选）、属性值（必选）和生成规则（可选）。属性名 和 生成规则 之间必须用竖线|分隔。
mockjs使用入门
weixin_45377314的博客
04-22 405
本文是经过参考其他大佬博客整理，因代码提前拷贝出来了，未能记下原文链接，无法给出原文链接。 为什么要用mockjs 前后端分离项目在开发时，在后端接口未完成时，前端开发手动模拟接口，完成数据请求页面渲染，待后端接口完成后可提高联调效率。 mockjs安装 npm install mockjs npm install axios --save （已安装？请忽略） 目录结构 个人用法，供参考...
Vue.js与Element框架的Mango权限系统前端安装详解
本资源是一份详细的前端安装指南，针对的是Mango权限管理系统，该系统采用Vue.js和Element UI框架进行...整个指南注重实践操作，旨在帮助读者逐步理解和应用这些技术，确保前端开发环境的顺利搭建和项目的正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值