Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

最新推荐文章于 2024-08-07 10:25:01 发布
最新推荐文章于 2024-08-07 10:25:01 发布
阅读量1.6k 收藏 16
点赞数 2
分类专栏： Vue 文章标签： vue.js mockjs axios element-ui 后端数据模拟
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014361280/article/details/126346674
版权

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

目录

Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用

一、简单介绍

二、实现原理

三、效果展示

四、注意事项

五、实现过程

六、代码工程

一、简单介绍

Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，vue 中使用 mockjs ，并结合 axios 进行简单的随机数据生成，然后显示在界面上的简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

mockjs 官网 ：Mock.js

为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2.使用json-server模拟，但不能随机生成所需数据
3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改

mockjs 的优势

1.前后端分离，
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，
    将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

mockjs 安装与引入

// 安装 mockjs
npm install mockjs --save-dev
// 引入 mockjs
var Mock = require('mockjs')

mockjs 简单使用示例

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

mockjs 官方示例：Mock.js

mockjs 语法规范

Mock.js 的语法规范包括两部分：

  1. 数据模板定义规范（Data Template Definition，DTD）
  2. 数据占位符定义规范（Data Placeholder Definition，DPD）
数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value


注意：

    属性名 和 生成规则 之间用竖线 | 分隔。
    生成规则 是可选的。
    生成规则 有 7 种格式：
        'name|min-max': value
        'name|count': value
        'name|min-max.dmin-dmax': value
        'name|min-max.dcount': value
        'name|count.dmin-dmax': value
        'name|count.dcount': value
        'name|+step': value
    生成规则 的 含义 需要依赖 属性值的类型 才能确定。
    属性值 中可以含有 @占位符。
    属性值 还指定了最终值的初始值和类型。

生成规则和示例：
1. 属性值是字符串 String

    'name|min-max': string

    通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

    'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

    'name|+1': number

    属性值自动加 1，初始值为 number。

    'name|min-max': number

    生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

    'name|min-max.dmin-dmax': number

    生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

3. 属性值是布尔型 Boolean

    'name|1': boolean

    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

    'name|min-max': value

    随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

    'name|count': object

    从属性值 object 中随机选取 count 个属性。

    'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

    'name|1': array

    从属性值 array 中随机选取 1 个元素，作为最终值。

    'name|+1': array

    从属性值 array 中顺序选取 1 个元素，作为最终值。

    'name|min-max': array

    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

    'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function

    'name': function

    执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

    'name': regexp

    根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

    Mock.mock({
        'regexp1': /[a-z][A-Z][0-9]/,
        'regexp2': /\w\W\s\S\d\D/,
        'regexp3': /\d{5,10}/
    })
    // =>
    {
        "regexp1": "pJ7",
        "regexp2": "F)\fp1G",
        "regexp3": "561659409"
    }

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符 的格式为：

@占位符
@占位符(参数 [, 参数])

注意：

    用 @ 来标识其后的字符串是 占位符。
    占位符 引用的是 Mock.Random 中的方法。
    通过 Mock.Random.extend() 来扩展自定义占位符。
    占位符 也可以引用 数据模板 中的属性。
    占位符 会优先引用 数据模板 中的属性。
    占位符 支持 相对路径 和 绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

操作环境：

  •  win 10
  •  node v14.20.0
  •  npm 8.5.3
  •  @vue/cli 5.0.6
  •  vue 2.6.14
  • mockjs 1.1.0
  • axios 0.27.2
  • element-ui 2.15.9

二、实现原理

1、使用 mockjs 通过 api 配置，生成随机数据，模拟后端

2、使用 axios 获取 mockjs 模拟的后端数据

3、使用 element-ui 展示获取到的数据

三、效果展示

 

四、注意事项

1、axios 本地设置的 baseURL 根据实际 vue 打包出来的端口配置

五、实现过程

1、首先，使用命令 vue create vue-mockjs 创建工程 vue-mockjs

 2、因为工程中使用到 element-ui 、axios、mockjs等，这里先安装

 

3、在 main.js 把 element-ui 引入

// 引入 element-ui
import ElementUI from 'element-ui'
// 引入 element-ui 的样式文件
import 'element-ui/lib/theme-chalk/index.css'
// 全局使用 element-ui
Vue.use(ElementUI)

4、在 App.vue ，进行改造

5、components 创建 List.vue，使用 element-ui 显示本地数据布局

<template>
	<div>
		<el-table :data="tableData" style="width: 100%" stripe border>
			<el-table-column label="日期" width="180">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.date }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名" width="180">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top">
						<p>姓名: {{ scope.row.name }}</p>
						<p>住址: {{ scope.row.address }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.name }}</el-tag>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name:'myList',
		data() {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}]
			}
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}
		}
	}
</script>

 6、其中 router 进行路由管理

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import MyList from '../components/List.vue'

Vue.use(VueRouter)

const routes = [{
		path: '/',
		redirect: '/mylist'
	},
	{
		path: '/mylist',
		component: MyList
	}

]

const router = new VueRouter({
	routes
})

export default router

7、运行工程 npm run serve ，浏览器显示本地数据展示

8、 创建脚本 request.js，使用 axios 绑定IP和端口，使用 axios 做数据交互

import axios from 'axios'

const service = axios.create({
	// 根据实际的使用填写 ip 地址
	baseURL:'http://10.133.233.96:8082',
})

export default service

 

9、创建 getData 来获取数据 API

import axios from './request.js'

// 获取数据
export const getList = ()=> axios.get('/getList/list')

 10、创建 mockServer.js，使用 mock 进行，配置对应 getData 的 API，来生成数据

import Mock from 'mockjs'

Mock.mock(/\/getList\/list/, 'get',{
  code: 200, data:
  {
		// 数据名称|数量
    'data|4': [
      {  
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {	//用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

11、在 main.js 导入 mockServer.js

import Vue from 'vue'
import App from './App.vue'

// 执行 mock 数据生成
import './js/mock/mockServer.js'

// 路由
import router from './router/index.js'

// 引入 element-ui
import ElementUI from 'element-ui'
// 引入 element-ui 的样式文件
import 'element-ui/lib/theme-chalk/index.css'
// 全局使用 element-ui
Vue.use(ElementUI)

Vue.config.productionTip = false


const app = new Vue({
	router,
  render: h => h(App),
})

app.$mount('#app')

 12、List.vue 获取网络数据，并且简单修改显示

<template>
	<div>
		<el-table :data="tableData" style="width: 600px;margin: 0 auto">
			<el-table-column label="随机ID" width="200">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名" width="180">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top">
						<p>姓名: {{ scope.row.name }}</p>
						<p>住址: {{ scope.row.address }}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.name }}</el-tag>
						</div>
						<p>邮箱: {{ scope.row.email }}</p>
						<p>性别: {{ scope.row.isMale }}</p>
						<p>昵称: {{ scope.row.nickName }}</p>
						<p>手机号: {{ scope.row.phone }}</p>
						<p>头像：</p>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {
		getList
	} from "../js/getData.js";
	export default {
		name: 'myList',
		data() {
			return {
				tableData: [{
						date: "2016-05-02",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1518 弄",
					},
					{
						date: "2016-05-04",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1517 弄",
					},
					{
						date: "2016-05-01",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1519 弄",
					},
					{
						date: "2016-05-03",
						name: "王小虎",
						address: "上海市普陀区金沙江路 1516 弄",
					},
				],
			};
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},

			async getMockList() {
				try {
					const result = await getList();
					console.log(result);
					if (result.data.code == 200) {
						this.tableData = result.data.data.data;
					}
					console.log(result.data.data.data);
				} catch (error) {
					console.log(error);
				}
			},
		},

		mounted() {
			this.getMockList();
		},

	};
</script>

 

13、运行工程，效果如下

 

六、代码工程

如有需要可下载：Vue之mockjs结合axios在vue中的随机数据生成的简单使用vue-mockjs工程

仙魁XAN
关注
专栏目录
【请求数据】3 vue使用axios，mock请求假数据，脱离后端的限制！！！这一篇就够了
jieweiwujie的博客
07-29 1992
vue使用axios，mock请求假数据
mockjs（一）——认识mockjs
可芭乐的博客
05-31 3335
安装 npm install mockjs 使用 // 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 '...
随机数生成器库ElemeFE/random使用指南
最新发布
gitblog_00018的博客
08-07 721
随机数生成器库ElemeFE/random使用指南 random一个随机分组的小工具项目地址:https://gitcode.com/gh_mirrors/random3/random 项目介绍 ElemeFE/random是一个由饿了么前端团队开发并维护的随机数生成器库. 这个库包含了多种随机算法实现，可以用来生成伪随机数序列。它适用于各种场景，包括游戏模拟、数据分析以及测试数据生成等。 本库...
简单的vue+axios+mock配合使用
m0_60822634的博客
04-13 593
1.安装axios（npm install axios --s)，在src下新建utils目录（工具目录），在utils下新建request.js文件为axios的封装文件。2.安装mockjs(npm install mockjs --s)，在src目录下创建api目录，在api目录中创建index.js文件和mock.js文件和mockServeData文件。在mockServeData目录下创建一个mock模拟接口permission.js文件：其中返回的data数据是自定义的。
Mock.js和axios在vue-cli创建项目中的使用
wanglingli95的博客
02-17 1479
一、安装并导入mock.js 1.1 项目文件下安装mockjs cnpm i mockjs 1.2 项目中新建mock文件 // 引入mock模块 import Mock from 'mockjs' 1.3 将mock文件在main.js中导入 import Vue from 'vue' import App FROM './App.vue' import './mock/index.js' 二、Mock.js语法 2.1 生成字符串 生成指定次数字符串 im.
vue3+vite 使用mockjs+axios模拟后端数据
黎小小的博客
08-15 1746
如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。你的请求会直接发出去，无法通过mock返回数据。解决方案：①直接在main.js中注入插件配置。创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。注意如果vite.config.ts中配置了代理proxy就会走代理请求，如果使用mockjs需要注释掉代理相关代码。
Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用 vue-mockjs 工程
08-16
本节介绍，vue 中使用 mockjs ，并结合 axios 进行简单的随机数据生成，然后显示在界面上的简单整理，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。Mock.js为什么使用mockjs在做开发时，当后端的接口还...
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
vue axios数据请求及vue中使用axios的方法
10-18
Vue 和 Axios 结合使用，能够方便地在 Vue 应用中处理数据获取和发送。以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器...
Vue.js使用axios动态获取response里的data数据操作
10-14
在这个场景中，我们将探讨如何在Vue.js中使用axios动态地从响应(response)对象中获取data数据。 首先，axios发送请求后会返回一个Promise对象，该对象的`then`方法接收两个参数，分别是成功时的回调函数和错误时的...
Vue框架使用Mock随机生成数据详细方法
m0_62956518的博客
04-22 4498
Vue框架使用Mock随机生成数据详细方法
vue封装axios请求，使用mock封装接口，调用实例
Aecho15的博客
11-07 1246
最近没事想自己写点东西，项目搭建好了后，突然发现很多基本的配置与封装都不记得怎么写了，在网上东找找西搜搜，东拼西凑整理了一套完整的记录一下。（一些全局请求配置，调用，封装的方法）
vue-element-admin 综合开发四：axios安装和封装、mock安装/学习/使用
冯安晨
08-11 1496
vue-element-admin 综合开发四：axios安装和封装、mock安装/学习/使用
mockjs
qq_37978839的博客
09-09 171
Mockjs什么是Mockjs使用的实例 什么是Mockjs Mockjs是一种模拟数据的工具，当项目还没有进行联调时，前端可以通过Mockjs按照接口文档的要求进行数据模拟，它可以拦截ajax请求，并生成随机数据，让前端可以脱离后端进行开发 使用的实例 1.安装 npm install mockjs npm install axios axios可以实现发送ajax请求 2.引入mockjs require("./mock.js") 3.示例 et data = [] // 用于接受生成数据的数组 l
[随笔一记]企业中结合mock和axios，实现虚拟线上接口数据的传递
Tian_randai的博客
11-02 671
企业中结合mock和axios，实现虚拟线上接口数据的传递
Vue3中使用Mock.JS，生成随机数据
A123474JJ的博客
08-01 588
在日常开发工作中，常见的现象就是我们前端写好页面之后没有数据，舔着脸找后端要数据的时候被告知老子很忙，数据库要我整，接口要我整，文档要我整，没时间等等各种理由，各种看后端脸色，有了Mock之后，再也不用看后端脸色行事了(手动狗头)。
mockjs 如何生成一个随机的图片
IT_iosers的博客
04-14 5257
通过 引入Random 生成随机图片 import Mock from 'mockjs' // 1、引入Mock const Random = require('mockjs').Random; const data={ "title":"@ctitle", "image":Random.image('200x100'), };
vue3、ts如何封装 axios,使用mock.js
热门推荐
程邓楠的博客
10-23 2万+
今天我们一起来看一看 vue3+ts如何优雅的封装axios，并结合 mock.js 实现敏捷开发； 但是我们要注意区分 Axios 和 Ajax ： Ajax 是一种技术统称，技术内容包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新，使用是基于XMLHttpRequest 进行使用；
Vue项目中使用axios和mock.js搭建模拟数据环境教程
"本文主要介绍在Vue项目中如何利用axios和mock.js搭建一个模拟数据环境，以便在后端接口未完成时进行前端开发。文中会详细讲解如何安装和配置这两个工具，以及如何使用mock.js生成假数据并提供模拟服务器。" 在现代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值