mockjs从安装到模拟数据展现 看完这篇文章给你整明白

于 2022-10-24 21:29:14 发布
阅读量727 收藏
点赞数
分类专栏： mockjs 文章标签： 1024程序员节 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/promise466/article/details/127500930
版权

mockjs是怎么一回事

上图为敬
在这里插入图片描述

mock.js是什么？

mock.js是基于node平台的一款生成随机数据的资源包，因此需要在node环境下安装以及使用它，我们通过操作mock指令完成对数据的增删改查，是前后端分离过程中前端的比较优秀的模拟API的工具。

mock.js有什么用？

在后端接口（API）尚未完成之前，前端制作的“假数据”或者写死的数据时使用，并在接口文档拟定之后切换成真实数据组，完成页面的相互交互效果以及对程序性能的相关测试。

mockjs的作用

生成随机数据，拦截Ajax请求

干货来喽!!!

mockjs使用步骤

第一步：安装mockjs -->
npm i mockjs -D

在这里插入图片描述

第二步：创建mockjs

首先创建一个mockjs文件（文件名自定义的）
（在创建的mockjs文件定义模拟数据，也就是最终在页面展现的模拟数据）
在创建的mockjs文件中导入mockjs

import Mock from 'mockjs'  //导入mockjs

然后在你创建的mockjs文件中模拟数据

Mock.mock(url,data) //url 模拟请求网址 ，data 模拟数据
第三步：在全局main.js中导入
import '@/utils/mock'/
第四步：在页面中展现模拟数据
import request from "@/utils/request"; //导入封装好的request

 created() { 
 request
      .get("/v5/list")  // uel 获取你创建的模拟数据
      .then((res) => {   
        console.log("模拟数据", res.data);//data模拟数据
      })
      .catch((err) => {
        console.log(err);
      });
}

下图是完整流程操作
在这里插入图片描述
以上就是mockjs完整的操作步骤！！！

mockjs的基本语法

mock(url，data)

mock(url,method,data)

mock(url,method,function(option){
return data
})
//url 可以是正则 也可以是字符串
//method 可以为post get put delete
//option 包括url请求地址 method请求方法 body请求参数

以下是mockjs模拟数据的完整代码

// 导入mockjs
import Mock from 'mockjs'
// 随即数据
Mock.mock(/\/v5\/user/, {
	code: 0,
	msg: "成功",
	"data|10": [{
		"name": "@cname",
		"age|1-100": 1,
		"price|25-100": 1, //单价
		"scroce|1-15": "#", //符号
		"title": "@ctitle(8,14)", //标题  8-14
		"description": "@cparagraph", //段落
		"isLog|1-2": true, //布尔值  1-2从小到大
		"friend|2-10": ["小红", "小绿", "小蓝"], //对象
		"des|2": {
			"eye": 1,
			"hand": 2,
			"job": "teacher"
		},
		"tel": /1\d{10}/,
		"email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
		"canMerry": function() {
			if (this.age > 22) {
				return true;
			} else {
				return false;
			}
		}, //函数
		"day": "@date('yyyy-MM-dd')", //时间
		"time": "@time('HH:mm:ss')",
		"add": "@county(true)",
		"avatar": "@dataImage('200x100','')"
	}]

})

// post参数，option前端请的数据
// option.url请求的地址
// option.type请求的方式
// option.body请求的自参数（需要JSON.parase转对象）
// post请求不带参数
Mock.mock(/\/v5\/item/, "post", {
	code: 0,
	msg: "成功",
	data: [1, 2, 3, 4]
})
// post请求带参数  option前端请求的数据
Mock.mock(/\/v5\/jok/, "post", function(option) {
	return {
		code: 0,
		msg: "成功",
		data: {
			title: "信息标题",
			content: "内容",
			...JSON.parse(option.body) //转为json格式  body是请求回来的参数
		}
	}
})

// Mock.mock("http://abc.com/v5/list", {
// 	name: "mm",
// 	age: 18
// })

// 拦截Ajax  生成数据 拦截地址
// 只要网络皮跑到这个正则就会拦截
Mock.mock(/\/v5\/list/, {
	name: "mm",
	age: 18
})

Mock.mock(/\/api\/app\/v3\/category/, {  //这是指定举例获取纸多多 网站的数据
	"message": "success",   //以下是纸多多的全部响应头
	"code": 200,
	"data": {
		"top": [{
			"cat_id": 0,
			"cat_name": "\u63a8\u8350\u5206\u7c7b"
		}, {
			"cat_id": 1,
			"cat_name": "\u6587\u5316\u7eb8"
		}, {
			"cat_id": 2,
			"cat_name": "\u5305\u88c5\u7eb8"
		}, {
			"cat_id": 3,
			"cat_name": "\u827a\u672f\u7eb8"
		}, {
			"cat_id": 4,
			"cat_name": "\u5de5\u4e1a\u7528\u7eb8"
		}, {
			"cat_id": 7,
			"cat_name": "\u767d\u5361\u7eb8"
		}, {
			"cat_id": 11,
			"cat_name": "\u590d\u5370\u7eb8"
		}, {
			"cat_id": 12,
			"cat_name": "\u65b0\u95fb\u7eb8"
		}, {
			"cat_id": 14,
			"cat_name": "\u9ed1\u5361\u7eb8"
		}, {
			"cat_id": 15,
			"cat_name": "\u53cc\u80f6\u7eb8"
		}, {
			"cat_id": 6,
			"cat_name": "\u74e6\u695e\u7eb8"
		}, {
			"cat_id": 94,
			"cat_name": "\u519c\u526f\u4ea7\u54c1"
		}, {
			"cat_id": 86,
			"cat_name": "\u65e0\u78b3\u7eb8"
		}, {
			"cat_id": 89,
			"cat_name": "\u4e0d\u5e72\u80f6"
		}, {
			"cat_id": 91,
			"cat_name": "\u677f\u7247"
		}],
		"recommend": {
			"categorys": [{
				"cat_id": 35,
				"cat_name": "\u8f7b\u6d82\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/159514020603cf70ec9a2f3f952f2e18.jpg"
			}, {
				"cat_id": 38,
				"cat_name": "\u65b0\u95fb\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/f45dbe288b1cc478fe507ad054317267.jpg"
			}, {
				"cat_id": 51,
				"cat_name": "\u767d\u5e95\u94dc\u7248\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/169ef046e96665819ba91d9aee18f701.jpg"
			}, {
				"cat_id": 52,
				"cat_name": "\u7070\u5e95\u94dc\u7248\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/16178dcc248c8098d7d460654f900ba5.jpg"
			}, {
				"cat_id": 1,
				"cat_name": "\u6587\u5316\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/a5d9f2db2abed10a1306bc7495601801.jpg"
			}, {
				"cat_id": 2,
				"cat_name": "\u5305\u88c5\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/bad951f04bbdd4c9b0f4bffa298b9042.jpg"
			}, {
				"cat_id": 3,
				"cat_name": "\u827a\u672f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/36e7ec095717b72014cfd53752baa01d.jpg"
			}, {
				"cat_id": 4,
				"cat_name": "\u5de5\u4e1a\u7528\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/aab27872e1e188d2fe070d2a40051c9a.alicdn"
			}, {
				"cat_id": 7,
				"cat_name": "\u767d\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/3c294fc36b3e2e794d765da2ee60f6d1.jpg"
			}, {
				"cat_id": 11,
				"cat_name": "\u590d\u5370\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/e3deb62e3f2c77c9e531c435cf075db4.jpg"
			}, {
				"cat_id": 12,
				"cat_name": "\u65b0\u95fb\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/40b89317a8230db4e582541649b4c93d.jpg"
			}, {
				"cat_id": 14,
				"cat_name": "\u9ed1\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/cf609a216df70af19f6247d518d0b5a7.jpg"
			}, {
				"cat_id": 15,
				"cat_name": "\u53cc\u80f6\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/08a4f33d564cb2727a834f3f807a4706.jpg"
			}, {
				"cat_id": 6,
				"cat_name": "\u74e6\u695e\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/5443180758be1cb65077ae9aff595796.jpg"
			}, {
				"cat_id": 69,
				"cat_name": "\u9759\u7535\u590d\u5370\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/26bbb6338c0ed7ab3ed22781707e9827.jpg"
			}, {
				"cat_id": 70,
				"cat_name": "\u7eb8\u7bb1",
				"logo": "https:\/\/cdn.zdoodoo.com\/64dcc60944cbc3bc6af538aa1eeb2835.alicdn"
			}, {
				"cat_id": 71,
				"cat_name": "\u7070\u5e95\u767d\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/58f3efbe6b60b7e8cdc67c08503d489a.jpg"
			}, {
				"cat_id": 72,
				"cat_name": "\u7bb1\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/beeaf57e831a5dde998341e2493cd31a.jpg"
			}, {
				"cat_id": 36,
				"cat_name": "\u94dc\u7248\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/44cf483c3ebb41c8bc859be63f515cb3.jpg"
			}, {
				"cat_id": 42,
				"cat_name": "\u725b\u76ae\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/b9fb9f5c0697168123e454400419f822.jpg"
			}, {
				"cat_id": 43,
				"cat_name": "\u7bb1\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/39aec0797e9ff59dbbe024df2133cb04.jpg"
			}, {
				"cat_id": 45,
				"cat_name": "\u74e6\u695e\u7eb8\u677f",
				"logo": "https:\/\/cdn.toodudu.com\/dae179c37ce76eb89eb4bf913cca3898.jpg"
			}, {
				"cat_id": 66,
				"cat_name": "\u80f6\u7248\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/a5e9549092026564e7958231727e0a74.jpg"
			}],
			"brands": [{
				"brand_id": 13,
				"brand_name": "\u4f73\u76ca\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/13d295fdff8f0a5078ee97e10b6f702c.jpg"
			}, {
				"brand_id": 2,
				"brand_name": "\u535a\u5927\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/2d4b1900354a879d459cab54cd7ff5cc.jpg"
			}, {
				"brand_id": 7,
				"brand_name": "\u53cb\u987a\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/979753d9e2229c5146ba8c74efc095fc.jpg"
			}, {
				"brand_id": 9,
				"brand_name": "\u6d2a\u56fe",
				"brand_logo": "https:\/\/cdn.toodudu.com\/45c561db526f3dc8b9aadeb94bf35965.jpg"
			}, {
				"brand_id": 19,
				"brand_name": "\u6c38\u6052\u7eb8\u4e1a",
				"brand_logo": ""
			}, {
				"brand_id": 22,
				"brand_name": "\u6c5f\u95e8\u661f\u8f89\u9020\u7eb8",
				"brand_logo": "https:\/\/cdn.toodudu.com\/ee42e315348da804381125c5eb5b0cb2.png"
			}, {
				"brand_id": 137,
				"brand_name": "\u6c5f\u82cf\u76db\u5b9d\u4ed1\u7eb8\u4e1a",
				"brand_logo": ""
			}, {
				"brand_id": 138,
				"brand_name": "\u9e3f\u5a1c\u7eb8\u4e1a",
				"brand_logo": ""
			}]
		},
		"banner": [{
			"id": 239,
			"cateid": 71,
			"image": "https:\/\/cdn.zdoodoo.com\/2020\/04\/24\/FwQyo3sKuwEnb2lkJ8s26O5vLRr8bIXHbICtiNtt.jpeg",
			"title": null,
			"url": "",
			"web_url": "",
			"app_path": "",
			"web_path": "",
			"mini_url": "",
			"theme_color": "rgb(118, 198, 241)"
		}]
	}
})

更多mockjs可以了解mockjs官网：http://mockjs.com/examples.html

敲代码的小吉米
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端mock数据——使用mockjs进行mock数据
m0_50298323的博客
04-09 522
前端mock数据——使用mockjs进行mock数据
mockjs的入门 基本用法
12-27
适用于前后端分离，往往在后端同学接口还没有做好的时候，前端同学不能干等着呀，所以就需要虚拟接口上场啦^-^
8.安装mockjs以及简单实用
weixin_38644630的博客
11-25 456
8.安装mockjs以及使用 1.可视化安装mockjs 如下图 2.封装mock数据 在src目录下创建mock目录，在其中创建index.js统一接口数据模拟出口，在mock目录新新建login目录，login目录下新建login.js文件，为模块的请求文件 login.js文件，为前端请求接口，相当于后端接口返回数据格式模块 内容如下 // 导入mockjs 使用数据 // import Mock from 'mockjs' export default { loginInfo: ()
mock.js安装&使用_篇1
风如也的博客
07-17 2918
mock.js的gitHub官方文档 安装 // 全局安装 npm install mockjs -g // 测试安装效果 random url // 生成随机url random -h // 查看帮助 新建了一个vue-cli项目来测试mock.js 使用 axios 需要先安装和引入 axios npm install axios --save 在 main.js 中引入 axios import Vue from 'vue' import App from './App.vue' import
node学习—Mock模拟数据
xun__xing的博客
11-30 575
Mock模拟数据一、Mock模拟数据例：添加班级数据库数据例：添加学生数据库数据注意：关联表的添加 一、Mock模拟数据 mockjs在前面我们已经了解过了，其主要作用就是模拟数据。如果我们自行开发项目时，需要配合一些数据，此时如果手动添加的话，太繁琐。于是都会使用mockjs。 这里只要阅读下mockjs官方文档即可了解mockjs的使用方法。 例：添加班级数据库数据 首先需要npm install mockjs并引入 const Mock = require("mockjs"); const resul
简单使用mockjs模拟数据
weixin_43636454的博客
03-05 403
前提：安装axios，mockjs 步骤： 1.导包 index.js main.js 2. 创建模拟api接口 index.js 3.请求数据 App.vue PS: 请求的api接口可以用正则表达式写url路径 当mockjs自带的函数不适用时可以自己写扩展函数（例如以下） 生成水果的名字，并且通过id值来获取商品 ...
uin-app+mockjs实现本地数据模拟
10-14
主要为大家详细介绍了uin-app+mockjs实现本地数据模拟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
express+mockjs实现模拟后台数据发送功能
10-18
主要介绍了express+mockjs实现模拟后台数据发送功能,需要的朋友可以参考下
mockjs,json-server一起搭建前端通用的数据模拟框架教程
10-18
在本文中，我们将探讨如何使用MockJS和json-server来创建一个前端通用的数据模拟框架，以应对后端接口未完成时前端开发的需求。首先，我们来看看这两个关键组件的作用： 1. **MockJS**：MockJS 是一个用于前端开发...
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
mockjs 的使用
lx_1024的博客
01-17 7766
最近前后端有点不协调，用了一下mockjs，下面记录一下 我的环境是webpack+npm+vue，首先就用npm安装mockjs，安装命令是 npm install mockjs --save-dev，使用淘宝镜像也是可以的，就是使用cnpm替换npm，一样的效果 安装好mockjs后，在main.js里引入mockjs // 引入mockjs require('./mock.js')
Node.js-简单的mockserver在后台未给出接口之间进行简单的mock
08-10
简单的mock server,在后台未给出接口之间进行简单的mock
Mock.js篇1：安装入门
u013089490的博客
12-10 894
1、Mock.js安装 假如我们的项目是在D:\Vs_Code\mockDemo，我们现在来安装mock.js #进入工程目录 C:\Users\jun>cd d:\Vs_Code\mockDemo #安装mockjs d:\Vs_Code\mockDemo>cnpm install mockjs √ Installed 1 packages √ Run 0 scripts √ ...
前端mockjs模拟图片验证码
weixin_30832351的博客
08-25 1123
ps：mockjs在进行相同的双数次请求的时候，会出现请求404的状况，希望有大佬帮解决下 首先创建dom <img id='bbn' src="" alt="图图"> <button id="but">asdsa</button> 在js中先写好mock Mock.mock(/query/g,function(option){//拦截query请...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
weixin_54966486的博客
03-24 1256
mockjs 的使用 项目安装 mockjs ： cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹。 (2)mock 文件夹准备相应的 JSON 数据文件
【Vue项目心得笔记】mockjs模拟数据
qiaoyangla的博客
04-21 894
常见问题： 开发search模块中的TypeNav商品分类菜单（过渡动画效果） 过渡动画：前提组件,元素务必要有v-if|v-show指令才可以进行过渡动画
nodejs mock
niesiyuan000的博客
11-25 674
<div class="htmledit_views" id="content_views"> <h3><a name="t0"></a><strong>1. 什么是mock数据？</strong></h3> <p&gt...
node+mockjs详细教程
qq_27009517的博客
09-03 1761
1，在桌面上新建文件夹 2，按住shift右击打开命令行，输入npm install mockjs 出现 3.输入npm init 出现package.json文件 4.安装express服务输入 npm install express 5.右击新建server.js 目录如下 server.js 代码如下 let express = require('express'); //引入express模块 let Mock = require('mockjs'); //引入m..
使用mockjs模拟数据
最新发布
09-02
使用Mock.js可以方便地模拟数据。在Vue-cli项目中，可以通过引入相关模块和配置来使用Mock.js模拟数据。首先，在项目的main.js文件中引入mockserver.js模块，并让其执行一遍。这样可以确保Mock.js的相关配置得到正确...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值