Mock.js mysql_vue利用mockjs模拟后端数据axios接口

在前后端的交互中经常会遇到前端等后端的数据接口上线，才好做一些bug方面的调试。这中间的时间成本会大大加大项目的时间成本从而产生滞后效应。

我了解到的可以模拟后端接口的有两种工具，一个是阿里爸爸出产的RAP，可以说是复刻了一个后端出来，所以安装注册起来相对来说麻烦一些，要准备好Tomcat,java,mysql等。另一个就是vue原生的mockjs了，只需要在项目中install就可以使用了。

生成随机数据

拦截ajax、axios请求

mockjs的文档查阅

mock官网.png

官方文档.png

下载后就可以在本地查看官方文档来解决大部分问题了

vue中mockjs的使用

一、安装mockjs

使用cli脚手架安装vue项目

npm安装mockjs

//cnpm会更快点

(c)npm install mockjs

二、引入mockjs

在项目目录下创建新的文件，格式如下：

mock文件.png

2.在index.js中引入mockjs

import Mock from 'mockjs'

3.在main.js中引入

import Vue from 'vue'

import App from './App.vue'

import './mock/index'

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount('#app')

三、mock实例

在index.js中创建一组指定实例

import Mock from 'mockjs'

const data = Mock.mock({

// "|"后的数字表示生成几组数据

'string|1-4': '哎呦！'

})

console.log(data)

效果如图：

哎呦.png

在index.js中生成一组随机数据

import Mock from 'mockjs'

const data = Mock.mock({

// 随机生成字符串，括号中是字符串的个数,c代表生成的是中文

string: '@cword(3)'

})

console.log(data)

效果如图：

随机字符串png

常用到的数据类型：(可在官网实例上查看)

文本： string

标题： titlle

句子： sentence

数字： number

数组： object

四、模拟axios/ajax请求

安装axios先

npm install axios

模拟get请求

在index.js中定义get请求

import Mock from 'mockjs'

// 定义get请求

Mock.mock('/api/news', 'get', {

status: 200,

meg: '获取数据成功',

user_name: '@cword'

})

在app.vue中引入axios

import axios from 'axios'

export default {

data() {

return {}

},

created() {

axios.get('/api/news').then(res => {

console.log(res)

})

}

}

上图：

get请求.png

模拟post请求

同理，index.js加入

Mock.mock('/api/post/news', 'post', {

status: 200,

meg: '获取数据成功'

})

app.vue中加入

axios.post('/api/post/news').then(res => {

console.log(res)

})

post请求.png

get模拟批量数据

需要将数据接口转化成函数模式

const { cardList } = Mock.mock({

'cardList|10-20': [{

status: 0,

user_id: '@phone',

user_name: Mock.Random.name(),

phone: '@phone',

avatar_url: Mock.Random.image('200x200', '#ff6600', '#FCFCFC'),

university_id: '@cword(5)',

user_word: '@cword(10)',

occupation: Mock.Random.pick('职友', '学生'),

profession: '@cword(4)技术',

'age|1-90': 90,

sex: Mock.Random.pick('男', '女'),

label: Mock.mock({

'array|1-10': [

{

'name|+1': [

'Hello',

'Mock.js',

'!'

]

}

]

}),

'followers|1-200': 200,

'followings|1-200': 200,

'friends|1-200': 200,

'collection|1-100': 100,

realnames: '@boolean',

'activities|1-200': 200

}]

})

Mock.mock('/card_get', 'get', () => {

return {

list: cardList

}

})

在vue中调用这个接口可见到数据：

get批量png