Mock.js（模拟数据）全网第二详细教程，包含常用方法与增删改查

最新推荐文章于 2024-06-13 08:34:13 发布
置顶 最新推荐文章于 2024-06-13 08:34:13 发布
阅读量4.3k 收藏 25
点赞数 9
分类专栏： plugins 文章标签： javascript vue.js node.js html es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_l_x_8882/article/details/117333397
版权

Mock.js（模拟数据）

通过拦截XHR返回数据，所以浏览器并没有真正发送请求

install

npm i mockjs

常用语法

		// http://mockjs.com/examples.html#

    "id|1-9999": 0, // 返回 1 到 9999 随机数
    "username": "@cname", // @cname为默认随机中文名  @name为随机英文名
    "age|1-100": 0,
    "email": "@email", // 随机邮箱

    "city":'@province', // 随机 省份
    // "city":"@city", // 随机 城市
    // "city": "@county", // 随机 县
    // "city":"@city(true)", // 随机 "省份 城市"  例如 "江苏 连云港"
    // "city": "@county(true)", // 随机 "省份 城市 县"  例如 "福建省 南平市 光泽县"

    'date': '@datetime()', //随机时间 例如 "1982-12-03 23:27:38"
    'img': '@image()',//随机图片 例如 "http://dummyimage.com/120x60"
    'price': '@integer(1,100)'//随机价格 返回 1 到 100 整数
    "message": '@cword(6)' // 随机汉字（6个） 去掉c为字母

		// --------------------------------------------------------------------

    "persons|100": [ // 该数组中返回 100 个下面定义的对象
      {
        "id|+1": 0, // 从 0 开始每次 +1    012345
        ...
      }
    ]

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './mock' // 导入 mock 所在路径

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

get

正常请求
    get() {
      axios.get('/user/login')
        .then(res => console.log(res))
        .catch(err => console.log(err))
    }

/src/mock/index.js

import Mock from 'mockjs'

// get  默认请求方法为get，第二个参数可不写  Mock.mock( rurl, rtype, template )
Mock.mock('/user/login','get', {
  "status": 200,
  "data": {
    "id|1-9999": 0,
    "username": "@cname",
    "age|1-100": 0,
    "email": "@email",
  }
})
携带params请求
    get() {
      axios.get('/user/login', {
        params: {
          id: 1
        }
      }
      )
        .then(res => console.log(res))
        .catch(err => console.log(err))
    }

/src/mock/index.js

// get + params  例如 /user/login?id=1  用正则过滤掉
Mock.mock(RegExp("/user/login" + ".*"), 'get', {
  "status": 200,
  "data": {
    "id|1-9999": 0,
    "username": "@cname",
    "age|1-100": 0,
    "email": "@email",
  }
})

post

request
    post() {
      axios.post('/products/params', {
        id: 0,
        price: 4399
      })
        .then(res => console.log('res响应成功',res))
        .catch(err => console.log(err))
    }
mock
// post
Mock.mock('/products/params', 'post', function (options) {
  console.log('mock接收到到参数为：', options)
  if (options.body === '{"id":0,"price":4399}') {
    return {
      status: 200,
      products: 'iphone4S'
    }
  }
})

增

request
      axios.post('/params/list', {
        product: 'iphone5',
        id: 4
      })
        .then(res => console.log(res))
        .catch(err => console.log(err))
mock
const paramsList = [
  { product: 'iphone3G', id: 1 },
  { product: 'iphone4', id: 2 },
  { product: 'iphone4S', id: 3 },
]

Mock.mock('/params/list', 'post', options => {
  let body = JSON.parse(options.body) // 获取请求参数
  let id = parseInt(body.id)
  let flag = true

  for (let item of paramsList) {
    if (item.id === id) flag = false // 判断id是否已经存在
  }

  // 如果id不存在
  if (flag) {
    paramsList.push(
      {
        product: body.product,
        id
      }
    )
    return {
      paramsList,
      status: 200,
      msg: '添加成功'
    }
  }
  // 如果id已存在
  return {
    status: 400,
    msg: '添加失败，id已存在'
  }

})

删

request
axios.delete('/params/list', {
        // data等价于post方式
        data: {
          id: 2
        }

        // params等价于get方式，url可见
        // params: {
        //   id: 2
        // }
      })
        .then(res => console.log(res))
        .catch(err => console.log(err))
mock
const paramsList = [
  { product: 'iphone3G', id: 1 },
  { product: 'iphone4', id: 2 },
  { product: 'iphone4S', id: 3 },
]

Mock.mock('/params/list', 'delete', options => {
  let id = parseInt(JSON.parse(options.body).id) // 获取请求id
  let index = null

  for (let i in paramsList) {
    if (paramsList[i].id === id) index = i // 获取id对应的index
  }

  if (index !== null) {
    console.log(`删除的id为：${id}，对应的index为：${index}`)
    paramsList.splice(index, 1) // 从index开始删除一个（本身）
    return {
      paramsList,
      status: 200,
      msg: '删除成功'
    }
  }
  return {
    status: 400,
    msg: '删除失败，id不存在'
  }

})

改

request
      // 语意化可以使用put和dispatch,或者全部post都可以
      axios.post('/params/list', {
        function: {
          type: 'modify',
          data: {
            id: 1, // 要修改的id
            product: 'iphone' // 修改的内容
          }
        }
      })
        .then(res => console.log(res))
        .catch(err => console.log(err))
mock
const paramsList = [
  { product: 'iphone3G', id: 1 },
  { product: 'iphone4', id: 2 },
  { product: 'iphone4S', id: 3 },
]

Mock.mock('/params/list', 'post', options => {
  const parseBody = JSON.parse(options.body) // 解析请求参数（只能解析到这）
  const body = parseBody.function.data // 获取请求参数中的data
  const id = parseInt(body.id) // 获取请求id
  let flag = true
  let index = null

  if (parseBody.function.type === 'modify') {

    for (let i in paramsList) {
      if (paramsList[i].id === id) { // 判断id是否已经存在
        flag = false, index = i // 拿到id对应的index
      }
    }

    // 如果id不存在
    if (flag) {
      return {
        status: 400,
        msg: 'id不存在'
      }
    }
    // 如果id存在
    paramsList[index].product = body.product
    return {
      paramsList,
      status: 200,
      msg: '修改成功'
    }

  } else {
    return {
      status: 400,
      msg: '请求类型错误'
    }
  }

})

查

request
      axios.post('/params/list', {
        function: {
          type: 'lookup',
          data: {
            id: 2, // 根据id查找对应的信息
          }
        }
      })
        .then(res => console.log(res))
        .catch(err => console.log(err))
mock
const paramsList = [
  { product: 'iphone3G', id: 1 },
  { product: 'iphone4', id: 2 },
  { product: 'iphone4S', id: 3 },
]

// 查 （此处为查询某一条，批量查询：遍历id拿到对应的index并push进数组里，
//     返回时循环paramsList[index] push进一个数组里，返回数组）
Mock.mock('/params/list', 'post', options => {
  const parseBody = JSON.parse(options.body) // 解析请求参数（只能解析到这）
  const body = parseBody.function.data // 获取请求参数中的data
  const id = parseInt(body.id) // 获取请求id
  let flag = true
  let index = null

  if (parseBody.function.type === 'lookup') {

    for (let i in paramsList) {
      if (paramsList[i].id === id) { // 判断id是否已经存在
        flag = false, index = i // 拿到id对应的index
      }
    }

    // 如果id不存在
    if (flag) {
      return {
        status: 400,
        msg: 'id不存在'
      }
    }
    // 如果id存在
    let searchParams = paramsList[index]
    return {
      searchParams,
      status: 200,
      msg: '查询成功'
    }

  } else {
    return {
      status: 400,
      msg: '请求类型错误'
    }
  }
})

标题气盛，多有得罪，指点勿喷，蟹蟹～

w_15926
关注
  • 9
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
mockjs学习(+axios+element ui实现增删改查)
weixin_58896221的博客
07-20 995
代码】mockjs学习。
前端mock数据——使用mockjs进行mock数据
m0_50298323的博客
04-09 633
前端mock数据——使用mockjs进行mock数据
vue2中使用Mock.js生成随机数据，拦截 Ajax 请求
丿灬安之若死
12-28 1005
官网：http://mockjs.com/ 安装 yarn add mockjs 新建home.js用于数据处理 // mock数据模拟 import Mock from 'mockjs' // 图表数据 let List = [] export default { getStatisticalData: () => { //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位 for (let.
掌握Mock.js基本使用：快速模拟API实现增删改查
最新发布
weixin_63490373的博客
06-13 674
通过上述步骤，我们在Vue 2项目中使用Mock.js成功模拟了一个简单的增删改查操作。
Mock.js 数据模拟、Rap2 接口可视化管理平台
Lyrelion的博客
10-19 752
目录 1.新建仓库 2.新建模块 3.新建接口 4.设置请求参数 ​5.设置响应结果 6.接口访问地址 7.生成规则 / 初始值 基于 Mock.js，根据约定接口，自动生成 模拟数据 1.新建仓库 一个项目建立一个仓库，仓库中存放这个项目的所有接口 操作说明： 新建仓库：发起仓库新建操作 仓库名称（必填）：建议与项目名称保持一致 简介（非必填）：对仓库名称补充描述 成员（非必填）：一般为项目的前后端开发人员，拥有这个仓库内接口的操作权限 团队（非必填）：被添加的团队，...
mockjs 模拟实现增删改查
weixin_51747462的博客
08-05 337
mockjs模拟接口实现增删改查
mockJs文档（二）
Start2019
12-21 1万+
mockJs官方文档 1. Mock.mock()：根据数据模板生成模拟数据。 2. Mock.setup()：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。 3. Mock.Random：是一个工具类，用于生成各种随机数据。 4. Mock.valid(template, data)：校验真实数据 data 是否与数据模板 template 匹配。 5. Mock.toJSONSchema()：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
运用ajax和伪后台mock对学生信息进行增删改查的操作
zy的博客
03-26 1270
运用ajax和伪后台mock对学生信息进行增删改查的操作 实现的功能 使用mock随机生成数据 实现了学生信息的增删改查 实现功能具体步骤 ajax.js代码 用Promise封装ajax function ajax(config){ return new Promise(function(resolve){ let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){
vue实战-mockjs模拟数据
bying666的博客
09-25 1241
在创建axios实例时的默认api改成’/mock’利用计算mapState。
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 719
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
Mockjs请求及Url取参
分享、进步、收获！！！
05-27 5661
Mockjs的get请求和post请求及定义url取参方法
mockjs使用总结(随机数据、对象数组随机、后端逻辑模拟等)
java_wzh123的博客
08-24 6272
mockjs使用总结（随机数据、对象数组随机、后端逻辑模拟等） 1、安装mockjs npm install mockjs -D //mockjs默认是无法拦截到fetch请求，如果项目使用的是fetch还需要安装mockjs-fetch //注：如果封装了fetch 要保证fetch的调用不受到阻碍 npm install mockjs-fetch -D 2、mockjs使用，新建一个mock.js文件，在项目入口文件中导入mock.js文件即可 /*mock.js*/ import Mock fro
mock详细教程入门这一篇就够了
热门推荐
weixin_39327556的博客
06-17 2万+
目录​编辑1、什么是mock测试2、为什么要进行Mock测试3、Mock适用场景4、代码实例 5、参数方法说明6、简单测试 7、测试方法说明8、Mock静态方法9、提升测试覆盖率 Mock 测试就是在测试活动中，对于某些不容易构造或者不容易获取的比较复杂的数据/场景，用一个虚拟的对象(Mock对象)来创建用于测试的测试方法。 Mock是为了解决不同的单元之间由于耦合而难于开发、测试的问题。所以，Mock既能出现在单元测试中，也会出现在集成测试、系统测试过程中。 Mo
mockjs（接口服务代理）
黑白两客
09-10 1875
mock官网：http://mockjs.com/ 一、搭建一个练习项目 1.利用vue的项目脚手架进行搭建 命令： vue create mock-demo 截图： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IYzbCoaI-1599721543413)(C:\Users\wangyu123\AppData\Roaming\Typora\typora-user-images\image-20200910111234168.png)] 2.安装相关的依赖 命令： #
mock.js的使用
qq_60587956的博客
08-13 1359
mock.js的使用
mock模拟的数据能增删改查吗_mock数据
weixin_39627408的博客
12-22 588
var arr=['momo','yanzi','ziwei']var obj={'host':'www.baidu','port':'12345','node':'selector'}Mock.mock('http://www.bai.com',{'firstName|3':'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。'lastName|2-5':'jian...
Vue项目中使用mockjs
web8_zhy的博客
05-19 525
前端页面写完后 接口可能出不来。所以就要用mock来造一些假数据。 我们先在src下创建一个mock文件夹 在example.js里写 import Mock from 'mockjs' const Random = Mock.Random // mock例子1 var listData = function() { let data = [] for (let i = 0; i < 20; i++) { let newList = { // 详细 规则 参照mockjs官网
Mock.js入门
weixin_49092012的博客
05-11 269
什么是mock.js? Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立 于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 1,根据数据模板生成模拟数据 2,模拟 Ajax 请求，生成并返回模拟数据 3,基于 HTML 模板生成模拟数据 Mock.js具有以下特点： 前后端分离,让前端攻城师独立于后端进行开发。 增加单元测试的真实性 通过随机数据，模拟各种场景。 开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请.
Vue 使用 mockjs (返回数据、get、post 请求)
卡尔特斯
11-04 2671
Vue 使用 mockjs (返回数据、get、post 请求)
mock.js进行模拟数据的生成
06-08
Mock.js是一个模拟数据生成器，可以帮助开发者快速生成各种类型的随机数据，方便前端开发和测试。以下是使用Mock.js生成模拟数据的步骤： 1. 安装Mock.js 可以通过npm安装Mock.js，命令如下： ``` npm install mockjs --save-dev ``` 2. 编写Mock规则 Mock.js使用JSON Schema规则来定义生成模拟数据的规则，可以根据需要定义各种类型的数据，如字符串、数字、布尔值、数组等。以下是一个简单的Mock规则示例： ```json { "name": "Mock.js", "url": "https://github.com/nuysoft/Mock", "version": "1.0.0" } ``` 3. 生成模拟数据 可以使用Mock.js的`mock()`方法来根据规则生成模拟数据，如下所示： ```javascript const Mock = require('mockjs'); const data = Mock.mock({ "name": "Mock.js", "url": "https://github.com/nuysoft/Mock", "version": "1.0.0" }); console.log(data); ``` 以上代码将输出如下结果： ```json { "name": "Mock.js", "url": "https://github.com/nuysoft/Mock", "version": "1.0.0" } ``` 以上就是使用Mock.js生成模拟数据的基本步骤，希望可以帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值