vue + mock.js 自动生成数据

最新推荐文章于 2024-08-01 09:57:29 发布

何贤惠

最新推荐文章于 2024-08-01 09:57:29 发布

阅读量662

点赞数

分类专栏： vue 文章标签： npm vue.js 前端

本文链接：https://blog.csdn.net/weixin_37699645/article/details/112801232

版权

本文介绍了如何利用vue和mock.js在没有后端接口的情况下自动生成数据，简化前端开发流程。通过简单的几步配置，即可实现数据的自动化生成，解决了手动创建大量假数据的困扰。

摘要由CSDN通过智能技术生成

vue + mock.js 自动生成数据

每天进步一点点，项目中呢，会出现这种情况，就是前端都准备好了，后台接口并没有数据，要是一个个假数据吧，一条两条还行，要是在多了，未免有些烦了，但是呢，解决方案来了，数据自动生成工具，只需要跟后台对接好字段名就ok啦。简直是完美的不可挑剔。

第一步安装

npm install mockjs

第二部建文件

在【src】目录下 新建 【mock】文件夹 然后在建【mock.js】

第三步 mock.js

先分享一个非list的数据

//mock.js文件
import Mock from 'mockjs';
Mock.mock('http://localhost:8080/user',{
   
    'name':'@name',
    'email':'@email',
    'age|1-10':5
});

//使用文件
<template>
  <div>
  	<el-button type="promary" @click="getUser()">获取用户信息</el-button>
  </div>
</template>  
<script>
    import mock from '@/mock/mock.js'
	import axios from 'axios'
	export default {
   
	  name: 'Icons',
	  data() {
   
	    return {