vue实现多行数据提交_Vue+Mockjs,模拟接口数据,实现前后端独立开发
前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦。前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发。为了解决这个问题,大神就造了一个轮子,供大家使用--mock.js
关于mock.js,官网描述:
1.前后端分离
2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据
3.数据类型丰富
4.通过随机数据,模拟各种场景
本文介绍在vue项目中如何使用mock.js
通过vue-cli搭建的项目(v2.9.3)
1. 安装
1cnpm install mockjs --save-dev
2. 配置
为了只在开发环境使用mock.js,而打包到生产环境时自动不使用mock.js,做以下配置:
config目录下dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',Mock: true
})
config目录下prod.env.js
'use strict'module.exports = {NODE_ENV: '"production"',Mock: false
}
src目录下main.js
// 向main.js中添加如下代码
process.env.Mock && require('./mock.js')
3. 创建文件
在src目录下创建mock.js,内容如下
// 引入mockjsconst Mock = require('mockjs')// 获取 mock.Random 对象const Random = Mock.Random// mock一组数据const produceNewsData = function () {let articles = []for (let i = 0; i < 100; i++) {let newArticleObject = {title: Random.csentence(5, 30), // Random.csentence( min, max )thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串}articles.push(newArticleObject)}return {data: articles}}// 拦截ajax请求,配置mock的数据Mock.mock('/api/articles', 'get', produceNewsData)
模板的功能非常强大,可以生成几乎所有类型的数据,具体参考:
官方文档:https://github.com/nuysoft/Mock/wiki
4. 页面使用
export default {data () {return {articles: []}},methods: {requestData () {this.$axios.get('/api/articles').then(e => {let data = e.dataif (data.data && Array.isArray(data.data)) {this.articles = data.data}console.log(this.articles)}).catch(err => {console.log(err)})}},created () {this.requestData()}
}
返回数据:
参考文章:
如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
个人博客:https://sxd.now.sh/
vue实现多行数据提交_Vue+Mockjs,模拟接口数据,实现前后端独立开发相关推荐
- 前端使用mockjs模拟接口数据
在前后端分离开发中,有时候后台开发比较慢还没有给回接口给前端,那么这时我们可以自己模拟数据(也就是mock数据). 当然可能你会想到我新建个js文件,把数据模拟好导出再引入请求就可以啦.这个方法虽然可 ...
- 宏基因组数据提交GSA实操手册—发表文章前必备技能
文章目录 GSA简介 开始前准备:注册/登陆 新建BioProject 数据上传 批量提交样本信息 01 提交者信息 02 基本信息 03 样本类型 04 样本属性 05 元数据信息 实验样品信息 测 ...
- Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
- 手把手Django+Vue前后端分离开发入门(附demo)
前言 众所周知,Django对于网站快速开发非常友好,这得益于框架为我们做了很多事情,让我们只需要做一些简单的配置和逻辑即可把网站的功能开发出来.但是,在使用Django的过程中,有一个地方一直是比较 ...
- 《Vue+Spring Boot前后端分离开发实战》专著累计发行上万册
杰哥的学术专著<Vue+Spring Boot前后端分离开发实战>由清华大学出版社于2021年3月首次出版发行,虽受疫情影响但热度不减,受到业界读者的热捧,截至今日 ...
- SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 前后端分离开发中的异常处理 统一结果封 ...
- “安居客“住房系统-基于Python-Django前后端分离开发(二)——基于RESTful架构的数据接口配置以及Redis高速缓存
"安居客"住房系统-基于Python-Django前后端分离开发(二) 基于Django-Rest-Framework创建接口数据(二) 文章目录 "安居客"住 ...
- 【转】Vue.js入门教程(一)从静态页面到前后端分离开发
第一章:基础知识 我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
- 视频教程-SpringBoot2+Vue+AntV前后端分离开发项目实战-Java
SpringBoot2+Vue+AntV前后端分离开发项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思 ...
最新文章
- 10474 - Where is the Marble?
- MongoDB副本集
- Linux查看进程和进程管理
- 提升平面设计思维能力的实用技巧
- 蓝桥杯-前缀表达式(java)
- Win32字符串处理函数
- 算法练习day14——190402(贪心:切金条、做项目、会议室安排)
- C语言指针与强制类型转换
- SAP CRM呼叫中心里的事件注册机制
- 显示 grep 结果的指定行
- 《python透明人士,他是凭什么成为主流编程的宠儿?!》Python基础简介及入门配置
- 今天买到了回家的火车票,有座儿,心情不错.
- 牛客网月赛24--ABC
- 手机uc怎么放大页面_怎么选择大功率手机信号放大器?
- oracle游标作为out参数,oracle 存储过程 带游标作为OUT参数输出
- 常用的laplace变换公式表
- 虚拟机Linux终端命令格式
- Enterprise Architect安装
- 中国药科大学校长来茂德:我眼中“医疗+AI”的机会与挑战
- Monash call:概述生物特征识别
热门文章
- 51单片机实现c语言字母滚动,基于51单片机的led点阵滚动显示上下左右c语言程序.docx...
- python sphinx_Python Sphinx使用实例及问题解决
- 服务器系统怎么写,服务器操作系统语言写的
- matlab使用load指令,科学网—matlab常用方法 - 陈超的博文
- android 控制流混淆 反向,AST混淆实战:仿obfuscator混淆控制流平坦化
- mysql能存储的编码范围_mysql存储乱码之编码问题
- Android Tensorflow Lite最佳做法和优化
- 尤雨溪介绍 Vue 3:语法不变、TS 支持很好、2.0 系列还会发一个版本
- 用于将带有查询字符串的复杂对象传递到Web API方法的自定义模型绑定器
- Blender 2.82 发布,三维动画制作软件