vue-cli结合mockjs模拟后台数据

loostudy 发布于2019-08-22 18:27 / 1779人阅读

摘要：在中使用准备工作安装加载模块请求库开始创建文件用于定于接口返回的数据到目录下的任何一个合适的文件夹下，设置好拦截信息，，设置规则可以看官网规则在文件中写入以下模拟数据单条数据多条数据在组件中引入和文件在中运行项目查看控制台以上，结束文

mockjs在vue中使用：

准备工作：
1、安装vue-cli
2、加载模块mockjs、axios(http请求库)
npm install mockjs axios --save

开始：
1、创建mock.js文件（用于定于接口返回的数据）到src目录下的任何一个合适的文件夹下，设置好拦截信息，，设置规则可以看mock官网规则

2、在mock.js文件中写入以下模拟数据
单条数据：

多条数据：

3、在组件中引入axios和mock.js文件

import axios from "axios";
import mockdata from "../mock/mockjs";
在mounted中：

axios.get("msg").then(res=>{
    // this.data1 = res.data;
    console.log(res);
})

4、运行项目 npm run dev,查看控制台

以上，结束
文章结合了多位前辈的经验得出，如果更好的方法，请大家在评论区评论，谢谢！
https://www.cnblogs.com/vicky...
https://www.imooc.com/article...

GPU云服务器云服务器 js 后台模拟键盘 Mockjs vue-cli vue-cli3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95867.html

浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

elina 2019-08-23 15:24 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，...

MonoLog 2019-08-26 13:43 评论0 收藏0
手摸手，带你用vue撸后台系列五(v4.0新版本)

摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，收获了三...

graf 2019-05-21 19:33 评论0 收藏0
vue-cli 中使用 Mockjs 详解

摘要：想到函数有延迟网络请求稀释事件延迟执行的效果，于是将模板函数用包裹起来，如下结果出现有意思的事情当请求比较频繁，在延迟时间内，本次请求得到的响应数据是上次请求的结果。 vue-cli 中使用 Mockjs 详解背景前端在早期jQuery时代时，前端功能和后端工程基本上都是合在一起，典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件。这个时候，我们总是会遇...

developerworks 2019-05-29 17:04 评论0 收藏0