在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs
实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试。大部分情况下,前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。
看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用。
首先搭建一个vue项目
不介绍了
安装mockjs
npm install mockjs --save-dev
启动项目
npm run dev
创建mock.js文件
- 在src路径下创建mock.js文件
- 在main.js引入mock.js文件
mock.js使用
- 在mock.js文件中写入测试代码
此处箭头函数中的代码可以根据mock的Git官网来进行修改随机数据及属性名称
//引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据let list = [];for(let i = 0; i < 30; i++) {let listObject = {title: Random.csentence(5, 10),//随机生成一段中文文本。company: Random.csentence(5, 10),attention_degree: Random.integer(100, 9999),//返回一个随机的整数。photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')}list.push(listObject);}return {data: list}
})
- 在xxxxx.vue文件中使用axios获取mock.js中的随机数据
import axios from 'axios'export default {data() {return {data:[]}},mounted:function() {axios.get('/api/data').then(res => {//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致this.data = res.data.data;console.log(res.data);//在console中看到数据}).catch(res => {alert('wrong');})},methods:{}
}
- <template></template>结构
- 效果展示
在vue-cli项目下简单使用mockjs模拟数据相关推荐
- Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源 存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
- Vue项目9:Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目 进入cmd命令行,输入如 ...
- vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件)】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...
- mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- 【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据 官网链接 第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
- vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
- react使用mockjs模拟数据
react使用mockjs模拟数据 废话少说,直接开始: mockjs简介 生成随机数据,拦截 Ajax 请求 注意:只能使用axios,fetch请求无法拦截 官网:http://mockjs.co ...
最新文章
- iOS 本地DNS解析方法
- linux 符号链接攻击防御简介
- 前端三十一:标签的属性
- windows下运行多个tomcat的配置
- linux中call命令,各种linux命令(pwn)
- 解决Windows 7 系统,Group Policy Client 服务未启动,不能登录的问题。
- Kubernetes学习笔记之kube-proxy service实现原理
- IOCP编程小结(中)
- tcpdump如何判断丢包_亿级规模的高可用微服务系统,如何轻松设计?
- xgboost 怎么读_【泰语单词】“祸从口出”泰语怎么表达?意想不到的简单
- 无线充电原理与QI协议详解
- 缠中说禅重新编排版《论语》(编撰版)
- 汽车线性二自由度动力学模型-simulink仿真
- CentOS查看文件夹大小
- 机器视觉运动控制一体机应用例程|橡胶密封圈检测
- Deepin邮箱登录阿里云邮箱个人版服务器设置
- java程序员推荐记笔记_推荐一款开源免费的笔记软件,也是程序员的好帮手
- 一文带你了解Room数据库
- 数字IC设计工程师笔试面试经典100题
- 未来教育计算机三级数据库演示大题,2019年计算机三级数据库考试强化试题及答案003...
热门文章
- mysql 还原数据库 unknown command 'b'_mysql数据库还原出错ERROR:Unknown command ‘\\’解决手记...
- 第五天、LAMP架构
- 光棍节的快乐 NYOJ 451
- VS2010可反复安装MSDN的方法
- java读写文件,读超大文件
- SQL语句inner join,left join ,right join连接的不同之处
- 诗与远方:无题(七十四)
- 解决IDEA不能编译XML文件
- mysql exp 注入_使用exp进行SQL报错注入
- jupyter新建文件_Jupyter渲染网页的3种方式