Mock.js 基本语法与应用笔记

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白：个人主页

  • 🔥 个人专栏：✅前端技术 ✅后端技术

  • 🏠 个人博客：洛可可白博客

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

  • Mock.js 基本语法与应用笔记
    • 1. Mock 基本语法
      • 生成指定字符
      • 生成随机字符
      • 生成标题和句子
      • 生成段落
      • 生成数字
      • 生成增量 ID
      • 身份证号、姓名、地址
      • 生成图片
      • 生成时间
      • 指定数组返回的长度和范围
    • 2. Mock 拦截请求
    • 3. Vue 中测试
    • 4. 另一种使用方式
    • 5. vite 项目
    • 🎉 往期精彩回顾

Mock.js 基本语法与应用笔记

Mock.js 是一个基于 JavaScript 的模拟数据生成库，它可以帮助开发者在前端开发过程中模拟后端API，提供测试数据。Mock.js 的主要功能是生成各种类型的模拟数据，包括文本、数字、日期、数组等，同时也支持拦截请求和响应，使得前端可以在不依赖后端API的情况下进行开发和测试。

1. Mock 基本语法

生成指定字符

import Mock from 'mockjs';const data = Mock.mock({str: '🤣'
});console.log(data);

指定字符和具体个数

const data = Mock.mock({'str|3': '🤣'
});

指定字符和区间

const data = Mock.mock({'str|3-5': '🤣'
});

生成随机字符

const data = Mock.mock({// 一串字母str: '@word'// 一个汉字// str: '@cword'
});

指定个数

const data = Mock.mock({// 3 个中文汉字'str|3': '@cword'// str: '@cword(3)'
});

指定区间

const data = Mock.mock({// 3 到 5 个中文字符'str|3-5': '@cword'// str: '@cword(3, 5)'
});

生成标题和句子

const data = Mock.mock({title: '@ctitle',sentence: '@csentence'
});

可以指定标题和句子的汉字长度和范围

// 长度
const data = Mock.mock({title: '@ctitle(3)',sentence: '@csentence(10)'
});

// 范围
const data = Mock.mock({title: '@ctitle(3, 5)',sentence: '@csentence(10, 15)'
});

生成段落

const data = Mock.mock({content: '@cparagraph'
});

指定段落的个数和范围

// 注意这里 3 代表的是 3 个段落，而不是 3 个中文字符
// 1 个句号是 1 段
const data = Mock.mock({content: '@cparagraph(3)'
});

生成数字

生成指定数字

const data = Mock.mock({// number: 20,// 如果是数值型的 value 将失去意义，最终都表示竖线右边的 20，一般写个 1'number|20': 1
});

生成数字区间

const data = Mock.mock({'number|1-10': 1
});

生成增量 ID

for (let i = 0; i < 10; i++) {const data = Mock.mock({// 默认 1，每次增加 1// id: '@increment'// 每次增加 10id: '@increment(10)'});console.log(data);
}

身份证号、姓名、地址

const data = Mock.mock({id: '@id',name: '@cname',address: '@city(true)'
});

生成图片

const data = Mock.mock({// 大小、背景色、前景色、格式、文字// 注意：颜色要是十六进制，不支持关键字，例如 redimage: "@image('200x200', '#f00', '#fff', 'jpg', 'H')"
});

生成时间

const data = Mock.mock({time1: '@date', // 年-月-日time2: '@date("yyyy-MM-dd HH:mm:ss")'
});

指定数组返回的长度和范围

const data = Mock.mock({'list|1-3': [{name: '@cname',address: '@city(true)',id: '@increment(1)'}]
});

2. Mock 拦截请求

增

POST => /api/users

Mock.mock(/^\/api\/users/, 'post', (options) => {const user = JSON.parse(options.body);user.id = data.list.length ? data.list[data.list.length - 1].id + 1 : 1;data.list.push(user);return {status: 200};
});

删

DELETE => /api/users/:id

Mock.mock(/^\/api\/user\/.+/, 'delete', (options) => {const id = options.url.split('/').pop();// !注意 id 变成了字符串const idx = data.list.findIndex((item) => item.id === +id);data.list.splice(idx, 1);return {status: 200};
});

改

PUT => /api/users/:id

Mock.mock(/^\/api\/users\/.+/, 'put', (options) => {const user = JSON.parse(options.body);const idx = data.list.findIndex((item) => item.id === +user.id);data.list[idx] = user;return {status: 200};
});

查

GET => /api/users

Mock.mock(/^\/api\/user/, 'get', (options) => {const {pagenum,pagesize,query,id} = qs.parse(options.url.split('?')[1]);if (id) {const user = data.list.find((item) => item.id === +id);return {status: 200,user};}// 1 10   0 ~ 10// 2 10   10 ~ 20const start = (pagenum - 1) * pagesize;const end = pagenum * pagesize;const total = data.list.length;const totalPage = Math.ceil(data.list.length / pagesize);let list = [];if (pagenum > totalPage) {list = [];} else {list = data.list.slice(start, end);}return {status: 200,list,total};
});

GET => /api/users/:id

Mock.mock(/^\/api\/users\/.+/, 'get', (options) => {const id = options.url.split('/').pop();const user = data.list.find((item) => item.id === +id);return {status: 200,user};
});

3. Vue 中测试

User.vue

<template><div class="users"><el-card class="box-card"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="130" /><el-table-column prop="address" label="地址" width="180" /><el-table-columnfixed="right"label="操作"width="80"align="right"><template slot-scope="scope"><el-button@click="deleteRow(scope.row)"type="text"size="small">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="q.pagenum":page-sizes="[5, 10, 15, 20]":page-size="q.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card></div>
</template><script>
import axios from 'axios';
export default {data() {return {tableData: [],q: {pagenum: 1,pagesize: 5,query: ''},total: 0};},created() {this.getUsers();},methods: {async getUsers() {const {data: { list, total }} = await axios.get('/api/users', {params: this.q});this.tableData = list;this.total = total;},handleSizeChange(pagesize) {this.q.pagesize = pagesize;this.getUsers();},handleCurrentChange(pagenum) {this.q.pagenum = pagenum;this.getUsers();},async deleteRow({ id }) {const { data } = await axios.delete(`/api/user/${id}`)if (data.status === 200) {this.getUsers();this.$message.success('删除成功');}}}
};
</script>
<style>
.box-card {margin: 40px auto 0;width: 630px;
}
.clearfix:before,
.clearfix:after {display: table;content: '';
}
.clearfix:after {clear: both;
}
.el-pagination {margin-top: 15px;
}
</style>

4. 另一种使用方式

vue.config.js

const qs = require('querystring');
const Mock = require('mockjs');
const data = Mock.mock({'list|27': [{id: '@increment(1)',date: '@date(yyyy-MM-dd hh:mm:ss)',name: '@cname',address: '@city(true)'}]
});
module.exports = {devServer: {before(app) {app.get('/api/users', (req, res) => {const { pagenum, pagesize, query } = qs.parse(req.url.split('?')[1]);const start = (pagenum - 1) * pagesize;const end = pagenum * pagesize;const total = data.list.length;const totalPage = Math.ceil(data.list.length / pagesize);let list = [];if (pagenum > totalPage) {list = [];} else {list = data.list.slice(start, end);}res.send({status: 200,list,total});});app.delete('/api/users/:id', (req, res) => {const idx = data.list.findIndex((item) => item.id === +req.params.id);data.list.splice(idx, 1);res.send({status: 200});});}}
};

5. vite 项目

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),viteMockServe({mockPath: "mock",localEnabled: true,}),],
});

mock/index.js

import Mock from 'mockjs'
// 内存模拟数据
const arr = []
for (let i = 0; i < 10; i++) {arr.push({id: Mock.mock('@guid'),name: Mock.mock('@cname'),place: Mock.mock('@county(true)'),})
}
export default [{url: '/list',method: 'get',response: () => {return arr}},{url: '/del',method: 'delete',response: ({query}) => {const index = arr.findIndex((item) => item.id === query.id)arr.splice(index, 1)return { success: true }}}
]

如果对你有帮助，点赞、收藏、关注是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

  1. VS Code上搭建Vue开发环境
  • 文章浏览阅读10.1k次，点赞64次，收藏13次。
  1. Color-UI 简介及使用教程
  • 文章浏览阅读5.9k次，点赞13次，收藏2次。
  1. Vue.2&Vue.3项目引入Element-UI教程&踩坑
  • 文章浏览阅读9.2k次，点赞82次，收藏22次。
  1. VS code搭建C/C++运行环境简单易上手
  • 文章浏览阅读2.7k次，点赞8次，收藏5次。
  1. 入门指南：使用uni-app构建跨平台应用
  • 文章浏览阅读1.2k次，点赞29次，收藏9次。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/736594.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python 导入excel空间三维坐标 生成三维曲面地形图 5-3、线条平滑曲面且可通过面观察柱体变化(三)

python 导入excel空间三维坐标 生成三维曲面地形图 5-3、线条平滑曲面且可通过面观察柱体变化(三)

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata from matplotlib.c…
阅读更多...
【SSM】整合原理和配置实战

【SSM】整合原理和配置实战

文章目录 SSM整合是什么&#xff1f;SSM整合核心问题第一问&#xff1a;SSM整合需要几个IoC容器&#xff1f;第二问&#xff1a;每个IoC容器对应哪些类型组件&#xff1f;第三问&#xff1a;IoC容器之间关系和调用方向&#xff1f;第四问&#xff1a;具体多少配置类以及对应容器…
阅读更多...
力扣hot100：22.括号生成（回溯）

力扣hot100：22.括号生成（回溯）

复习一下&#xff1a; 回溯法解决的问题都可以抽象为树形结构。回溯法解决的都是在集合中递归查找子集&#xff0c;集合的大小就构成了树的宽度&#xff0c;递归的深度&#xff0c;都构成的树的深度。 对于同一层而言&#xff0c;其儿子都是等价的不同情况&#xff0c;因此当儿…
阅读更多...
【Poe】保姆级注册教程

【Poe】保姆级注册教程

AI聊天机器人已成为技术界的热点。Quora推出了其全新的AI聊天机器人应用——poe&#xff0c;为用户提供了一种新的与人工智能进行互动的方式。与其他常见的AI聊天机器人不同&#xff0c;poe支持多家公司的AI系统&#xff0c;例如OpenAI的ChatGPT和Anthropic的聊天机器人。本教程…
阅读更多...
【零基础学习01】嵌入式linux驱动中pinctrl和gpio子系统实现

【零基础学习01】嵌入式linux驱动中pinctrl和gpio子系统实现

大家好，为了进一步提升大家对实验的认识程度，每个控制实验将加入详细控制思路与流程，欢迎交流学习。 今天给大家分享一下，linux系统里面pinctrl和gpio子系统控制实验，操作硬件为I.MX6ULL开发板。 第一：pinctrl和gpio子系统简介 Linux系统是一个庞大又完善的系统，如果采用…
阅读更多...
Window部署Oracle并实现公网环境远程访问本地数据库

Window部署Oracle并实现公网环境远程访问本地数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…
阅读更多...
基于单片机的机动车智能远光灯系统设计

基于单片机的机动车智能远光灯系统设计

目 录 摘 要 I Abstract II 引 言 1 1 主要研究内容及总体设计方案 3 1.1 主要研究内容 3 1.2 系统总体方案选择 3 1.3 系统功能的确定 4 2 硬件电路的设计 5 2.1 单片机控制模块设计 5 2.2 液晶显示模块电路设计 7 2.3 远近灯光电路设计 9 2.4 按键电路设计 9 2.5 超声波电路…
阅读更多...
5G与智慧文旅的融合发展：推动旅游业转型升级与可持续发展

5G与智慧文旅的融合发展：推动旅游业转型升级与可持续发展

随着5G技术的飞速发展和广泛应用&#xff0c;其与智慧文旅的融合发展正成为推动旅游业转型升级与可持续发展的重要力量。5G技术以其高速率、低时延、大连接的特性&#xff0c;为智慧文旅注入了新的活力&#xff0c;助力旅游业实现更高效、更智能、更绿色的发展。本文将深入探讨…
阅读更多...
保持长期高效的七个法则(一)7 Rules for Staying Productive Long-Term（1）

保持长期高效的七个法则(一)7 Rules for Staying Productive Long-Term（1）

Easily the best habit I’ve ever started was to use a productivity system.The idea is simple:organizing all the stuff you need to do (and how you’re going to do it) prevents a lot of internal struggle to get things done. 无疑&#xff0c;我曾经建立过的最好…
阅读更多...
AI辅助研发

AI辅助研发

随着人工智能技术的持续发展与突破&#xff0c;2024年AI辅助研发正成为科技界和工业界瞩目的焦点。从医药研发到汽车设计&#xff0c;从软件开发到材料科学&#xff0c;AI正逐渐渗透到研发的各个环节&#xff0c;变革着传统的研发模式。在这一背景下&#xff0c;AI辅助研发不仅…
阅读更多...
【初始MongoDB】MongoDB的使用（对比MySQL）

【初始MongoDB】MongoDB的使用（对比MySQL）

MongoDB简介 1、NoSQL简介 NoSQL(NoSQL Not Only SQL)&#xff0c;意即反SQL运动&#xff0c;指的是非关系型的数据库&#xff0c;是一项全新的数据库革命性运动&#xff0c;早期就有人提出&#xff0c;发展至2009年趋势越发高涨。NoSQL的拥护者们提倡运用非关系型的数据存储…
阅读更多...
Qt 数据库驱动未装载MYSQL

Qt 数据库驱动未装载MYSQL

一、第一部分 0.Qt 连接mysql数据库时报错&#xff1a; QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE QODBC QODBC3 QPSQL QPSQL7 QT连接代码&#xff1a; bool createMysqlConn() {QSqlDatabase sqldb QSqlDatabase::addDatabase(&qu…
阅读更多...
如何配置固定TCP公网地址实现远程访问内网MongoDB数据库

如何配置固定TCP公网地址实现远程访问内网MongoDB数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 前言 MongoDB是一个基于分布式文件存储的数…
阅读更多...
Java建造者模式源码剖析及使用场景

Java建造者模式源码剖析及使用场景

一、介绍 Java 中的建造者模式(Builder Pattern)是一种创建型设计模式,它将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。该模式主要用于创建一些复杂的对象,这些对象内部由多个部分组成,各部分之间存在着复杂的相互依赖关系。 二、有什么好处&am…
阅读更多...
JVM工作原理与实战(四十三)：JVM常见面试题目

JVM工作原理与实战(四十三)：JVM常见面试题目

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、JVM常见面试题目 1.什么是类加载器&#xff0c;有哪些常见的类加载器&#xff1f; 2.什么是双亲委派机制&#xff0c;以及如何打破双亲委派机制&#xff1f; 3.如何判断堆上的对…
阅读更多...
Hive超市零售案例

Hive超市零售案例

超市零售案例 一、部分数据展示 Fiskars 剪刀| 蓝色,61,中国,华东,杭州,用品,曾惠,2,浙江,办公用品,US-2019-1357144,130 GlobeWeis 搭扣信封| 红色,43,中国,西南,内江,信封,许安,2,四川,办公用品,CN-2019-1973789,125 Cardinal 孔加固材料| 回收,4,中国,西南,内江,装订机,许…
阅读更多...
Unity性能优化篇(十) 模型优化之网格合并 Easy Mesh Combine Tool插件使用以及代码实现网格合并

Unity性能优化篇(十) 模型优化之网格合并 Easy Mesh Combine Tool插件使用以及代码实现网格合并

把多个模型的网格合并为一个网格。可以使用自己写代码&#xff0c;使用Unity自带的CombineMeshes方法&#xff0c;也可以使用资源商店的插件&#xff0c;在资源商店搜Mesh Combine可以搜索到相关的插件&#xff0c;例如Easy Mesh Combine Tool等插件。 可大幅度减少Batches数量…
阅读更多...
css flex 布局换行

css flex 布局换行

默认使用display: flex;是不换行的&#xff0c;只需要加上flex-wrap: wrap;就行了&#xff0c;效果图 .app-center {display: flex;flex-wrap: wrap;justify-content:flex-start; } 通过上面我们发现虽然时间换行了&#xff0c;但是每行的边距不一样 加上这个就行了&#xff…
阅读更多...
Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍

Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍

0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但是内容可能存在不准确的地方。如果发现文中错误&#xff0c;希望批评指正&#xff0c;共同进步。 你是否在视频教程或说明文档或Githu…
阅读更多...
软件测试面试：接口自动化测试面试题（含答案+文档）

软件测试面试：接口自动化测试面试题（含答案+文档）

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、json和字典的区别&#xff1f; Json是轻量级的数据交互格式…
阅读更多...
最新文章

Copyright @ 2022~2023