vue利用mockjs模拟后端数据axios接口

在前后端的交互中经常会遇到前端等后端的数据接口上线，才好做一些bug方面的调试。这中间的时间成本会大大加大项目的时间成本从而产生滞后效应。
我了解到的可以模拟后端接口的有两种工具，一个是阿里爸爸出产的RAP，可以说是复刻了一个后端出来，所以安装注册起来相对来说麻烦一些，要准备好Tomcat,java,mysql等。另一个就是vue原生的mockjs了，只需要在项目中install就可以使用了。

生成随机数据
拦截ajax、axios请求

mockjs的文档查阅

1.上mockjs官网
http://mockjs.com/

mock官网.png

2.下载官方文档
http://mockjs.com/0.1/

官方文档.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

<template>
    <div id="app">
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {}
        },
        created() {
            axios.get('/api/news').then(res => {
                console.log(res)
            })
        }
    }
</script>

上图：

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

最后编辑于：2020.05.06 14:30:37