一、mock

1、简介

  mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。其可模拟 Ajax 并返回模拟数据,使前端不用去调用后端的接口,方便测试。
 

2、vue直接使用mock

step1:安装mock

npm install mockjs

step2:直接引入mock.js,并编写mock接口(Mock.mock)。

【mock.js】
//引入mock模块
import Mock from 'mockjs'; Mock.mock('/login', { //输出数据
'name': '@name', //随机生成姓名
//还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
'name': '@name', //随机生成姓名
'age|10-20': 10
//还可以自定义其他数据
});

step3:在需要的地方引入编写后的接口js即可。

【App.vue】
<template>
<div>
<button @click="login">login</button>
<button @click="list">list</button>
</div>
<!--App -->
</template> <script>
import mock from './mock.js'
import axios from 'axios'
export default {
methods: {
login() {
axios.post("/login").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.name)
}
})
}, list() {
axios.post("/list").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.name + ',' + response.data.age)
}
})
}
}
}
</script> <style> </style>

step4:代码与截图
  目录结构。使用vue-cli创建项目(详见https://www.cnblogs.com/l-y-h/p/11241503.html)。

完整代码

【main.js】
import Vue from 'vue'
import App from './App.vue' Vue.config.productionTip = false new Vue({
render: h => h(App),
}).$mount('#app') 【mock.js】
//引入mock模块
import Mock from 'mockjs'; Mock.mock('/login', { //输出数据
'name': '@name', //随机生成姓名
//还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
'name': '@name', //随机生成姓名
'age|10-20': 10
//还可以自定义其他数据
}); 【App.vue】
<template>
<div>
<button @click="login">login</button>
<button @click="list">list</button>
</div>
<!--App -->
</template> <script>
import mock from './mock.js'
import axios from 'axios'
export default {
methods: {
login() {
axios.post("/login").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.name)
}
})
}, list() {
axios.post("/list").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.name + ',' + response.data.age)
}
})
}
}
}
</script> <style> </style>

运行截图:
初始画面

点击login 按钮(随机产生一个人名)

点击list按钮(随机产生一个人名和年龄)

3、Vue项目中使用webpack-api-mocker进行mock

step1:安装webpack-api-mocker

npm i webpack-api-mocker --save-dev

step2:编写 /mocker/index.js,用于定义mock接口

【/mocker/index.js】
// 使用 require 引入json文件,可以直接访问数据
const appData = require('../data.json') const proxy = {
'GET /api/login': {
success: appData.login.success,
message: appData.login.message
},
'GET /api/list': [{
id: 1,
username: 'kenny',
sex: 6
},
{
id: 2,
username: 'kenny',
sex: 6
}
],
'POST /api/post': (req, res) => {
res.send({
status: 'error',
code: 403
});
},
'DELETE /api/remove': (req, res) => {
res.send({
status: 'ok',
message: '删除成功!'
});
}
}
module.exports = proxy

step3:修改 vue.config.js 配置文件(若不存在,在项目下新建即可)

【vue.config.js】
const path = require('path')
const apiMocker = require('webpack-api-mocker') module.exports = {
devServer: {
before(app) {
    // 注意,此处引用的是自定义的接口文件
apiMocker(app, path.resolve('./mocker/index.js'), {
proxy: {
'/repos/*': 'https://api.github.com/',
},
changeHost: true,
})
}
}
}

step4:随便定义一组 json 数据(用于测试)。

{
"login": {
"success": "true",
"message": "登陆成功"
},
"fileList": {
"success":"true",
"list":[
{"fileId":"1","fileName":"a1.c","content":"content-test1"
},
{"fileId":"2","fileName":"a2.c","content":"content-test2"
},
{"fileId":"3","fileName":"a3.c","content":"content-test2"
},
{"fileId":"4","fileName":"a4.c","content":"content-test2"
},
{"fileId":"5","fileName":"a5.c","content":"content-test2"
},
{"fileId":"6","fileName":"a8.c","content":"content-test2"
},
{"fileId":"7","fileName":"a9.c","content":"content-test2"
}]
}
}

step5:完整代码、截图
文件目录结构:

完整代码

【main.js】
import Vue from 'vue'
import App from './App.vue' Vue.config.productionTip = false new Vue({
render: h => h(App),
}).$mount('#app') 【App.vue】
<template>
<div>
<button @click="login">login</button>
<button @click="list">list</button>
<button @click="post">post</button>
<button @click="remove">remove</button>
</div>
<!--App -->
</template> <script>
import axios from 'axios'
export default {
methods: {
login() {
axios.get("/api/login").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.success + ',' + response.data.message)
}
})
}, list() {
axios.get("/api/list").then(response => {
if (response.data) {
console.log(response.data)
let list1 = response.data[0].id + ',' + response.data[0].sex + ',' + response.data[0].username
let list2 = response.data[1].id + ',' + response.data[1].sex + ',' + response.data[1].username
alert(list1 + '\n' + list2)
}
})
}, post() {
axios.post("/api/post").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.status + ',' + response.data.code)
}
})
}, remove() {
axios.delete("/api/remove").then(response => {
if (response.data) {
console.log(response.data)
alert(response.data.status + ',' + response.data.message)
}
})
}
}
}
</script> <style> </style> 【data.json】
{
"login": {
"success": "true",
"message": "登录成功"
},
"fileList": {
"success":"true",
"list":[
{"fileId":"1","fileName":"a1.c","content":"content-test1"
},
{"fileId":"2","fileName":"a2.c","content":"content-test2"
},
{"fileId":"3","fileName":"a3.c","content":"content-test2"
},
{"fileId":"4","fileName":"a4.c","content":"content-test2"
},
{"fileId":"5","fileName":"a5.c","content":"content-test2"
},
{"fileId":"6","fileName":"a8.c","content":"content-test2"
},
{"fileId":"7","fileName":"a9.c","content":"content-test2"
}]
}
} 【vue.config.js】
const path = require('path')
const apiMocker = require('webpack-api-mocker') module.exports = {
devServer: {
before(app) {
// path.resolve 引入mock
apiMocker(app, path.resolve('./mocker/index.js'), {
proxy: {
'/repos/*': 'https://api.github.com/',
},
changeHost: true
})
}
}
} 【/mocker/index.js】
// 使用 require 引入json文件,可以直接访问数据
const appData = require('../data.json') const proxy = {
'GET /api/login': {
success: appData.login.success,
message: appData.login.message
},
'GET /api/list': [{
id: 1,
username: 'kenny',
sex: 6
},
{
id: 2,
username: 'kenny',
sex: 6
}
],
'POST /api/post': (req, res) => {
res.send({
status: 'error',
code: 403
});
},
'DELETE /api/remove': (req, res) => {
res.send({
status: 'ok',
message: '删除成功!'
});
}
}
module.exports = proxy

运行截图:
点击 login 按钮

点击 list 按钮

点击 post 按钮

点击remove按钮

vue关于mock的简单使用的更多相关文章

  1. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  2. vue双向数据绑定的简单实现

    vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 一个基于 easyui, vue 和 maptalks 的简单地图应用

    一个基于 easyui, vue 和 maptalks 的简单地图应用 做了一个小应用,结合 easyui , vue 和 maptalks 的简单的地图应用.可以用来画图,什么的. 地址

  4. Vue如何mock数据模拟Ajax请求

    我们在做一个项目时前期可能没有后端提供接口模拟数据,那么作为前端就需要自己写json文件模拟数据加载.网上往往参考的都是不全面的,比如get请求没问题但是post请求就报错了.在Vue中只需要vue- ...

  5. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  6. vue从mock数据过渡到使用后台接口

    说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...

  7. 总结Vue第一天:简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  8. vue中用mock制造模拟接口(本文主要解决坑),一定要看完哦

    最近新入职一家公司,后端造接口速度很慢,想来想去还是搞一套模拟接口,来满足开发需求,有人会问,我造一个死数据不就可以了吗?或者说,后端数据结构都没出来,字段我怎么定? 问这个问题的人不奇怪,我之前也有 ...

  9. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

随机推荐

  1. 重新精读《Java 编程思想》系列之类的访问权限

    Java 中,我们用访问权限修饰词确定库中的哪些类对于使用者是可以使用的. 访问权限修饰词有 public,protected,private 和什么都不写. 那么对于类来说,我们只可以用 publi ...

  2. JS---案例:点击按钮摇起来 & 星星闪动 (挺难看的)

    案例1:点击按钮摇起来 思路: 1. 2张图片,放进div里面,摇起来的本质是,此div按上下左右的位置和在一定的时间内发生移动 2. 所以用随机数的概念来实现位置的移动,用setInterval来实 ...

  3. LL(1)文法的判断,递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da | ε (3)B -> cC (4)C -> aADC | ε (5)D -> b | ε 验证文法 G ...

  4. Python 中国象棋源码 V1

    Pygame 做的中国象棋,一直以来喜欢下象棋,写了 python 就拿来做一个试试,水平有限,电脑走法水平低,需要在下次版本中更新电脑走法,希望源码能帮助大家更好的学习 python.总共分为四个文 ...

  5. vue项目 npm run dev在Linux 持久运行

    touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log &a ...

  6. Password Management:Hardcoded Password 密码管理:硬编码密码

  7. 5.java基础之static、类加载过程

    static修饰符 修饰属性:静态的属性不属于任何对象,全类及其对象共用,可以用类名直接调用 修饰方法:静态的方法可以直接用类名调用,和对象无关.静态方法只能访问静态成员和静态方法,非静态方法可以调用 ...

  8. python基础(36):pymysql模块

    1. pymysql模块 在使用pymysql模块前需要学习数据库MySQL:<MySQL基础>. 1.1 pymysql的下载和使用 看完MySQL基础,我们都是通过MySQL自带的命令 ...

  9. Python程序设计 测验易错题总结

    1.温度转换 t=input() if t[-1]=="J": t=int(t[:-1]) t1=t/4.186 print("%.3fcal"%t1) els ...

  10. Localize UI Elements 汉化界面(本地化)

    In this lesson, you will learn the basics of localizing visible UI elements. By default, the applica ...