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

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

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

mockjs的文档查阅

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

vue利用mockjs模拟后端数据axios接口_第1张图片
mock官网.png

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

vue利用mockjs模拟后端数据axios接口_第2张图片
官方文档.png

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

vue中mockjs的使用

一、安装mockjs
  1. 使用cli脚手架安装vue项目
  2. npm安装mockjs
//cnpm会更快点
(c)npm install mockjs
二、引入mockjs
  1. 在项目目录下创建新的文件,格式如下:
vue利用mockjs模拟后端数据axios接口_第3张图片
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实例
  1. 在index.js中创建一组指定实例
import Mock from 'mockjs'

const data = Mock.mock({
    // "|"后的数字表示生成几组数据
    'string|1-4': '哎呦!'
})

console.log(data)

效果如图:


vue利用mockjs模拟后端数据axios接口_第4张图片
哎呦.png
  1. 在index.js中生成一组随机数据
import Mock from 'mockjs'

const data = Mock.mock({
    // 随机生成字符串,括号中是字符串的个数,c代表生成的是中文
    string: '@cword(3)'
})

console.log(data)

效果如图:


vue利用mockjs模拟后端数据axios接口_第5张图片
随机字符串png

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

  • 文本: string
  • 标题: titlle
  • 句子: sentence
  • 数字: number
  • 数组: object
四、模拟axios/ajax请求
  • 安装axios先
npm install axios
  1. 模拟get请求
  • 在index.js中定义get请求
import Mock from 'mockjs'

// 定义get请求
Mock.mock('/api/news', 'get', {
    status: 200,
    meg: '获取数据成功',
    user_name: '@cword'
})

  • 在app.vue中引入axios



上图:


vue利用mockjs模拟后端数据axios接口_第6张图片
get请求.png
  1. 模拟post请求
  • 同理,index.js加入
Mock.mock('/api/post/news', 'post', {
    status: 200,
    meg: '获取数据成功'
})
  • app.vue中加入
   axios.post('/api/post/news').then(res => {
                console.log(res)
            })
vue利用mockjs模拟后端数据axios接口_第7张图片
post请求.png
  1. 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中调用这个接口可见到数据:


vue利用mockjs模拟后端数据axios接口_第8张图片
get批量png

你可能感兴趣的:(vue利用mockjs模拟后端数据axios接口)