Vue 使用 mockjs (返回数据、get、post 请求)

1、安装 mockjs、axios（一般默认自带，没有就安装下）

附：mockjs 官网、mockjs-github

$ npm install mockjs
# axios 一般默认自带
$ npm install axios

2、启动项目

# 根据项目环境运行对应的启动命令
$ npm run dev
$ npm run serve

3、创建 mockjs 文件

1）在 src 目录下手动创建 /src/mock/index.js 文件夹与文件

2）在 main.js 文件中引入创建的 mock 文件

// 导入 mock 数据
import '../mock/index.js'

// 或者这样导入（二选一即可）
require('../mock/index.js')

3）/mock/index.js 文件中模拟常用请求方式，并返回数据

// 导入 mockjs ($ npm install mockjs)
import Mock from 'mockjs'

// 不限制请求方式
Mock.mock('/api/login', (req) => {
  // 输出请求参数
  console.log(req)
  // 返回数据
  return {
    // 输出数据(随机生成姓名)
    'name': '@name',
    // 还可以自定义其他数据
  }
})

// 限制 post
Mock.mock('/api/post', 'post', (req) => {
  // 输出请求参数
  console.log(req)
  // 返回数据
  return {
    // 输出数据(随机生成姓名)
    'name': '@name',
    // 还可以自定义其他数据
  }
})

// 限制 get
Mock.mock('/api/get', 'get', (req) => {
  // 输出请求参数
  console.log(req)
  // 返回数据
  return {
    // 输出数据
    'age|10-20': 10
    // 还可以自定义其他数据
  }
})

// 返回数据方式，所有请求方式都支持
Mock.mock('/api/login2', {
  "code": 200,
  "data": {},
  "msg": "请求成功"
})
Mock.mock('/api/login1', require('./test.json'))
Mock.mock('/api/login3', (req) => {
  return require('./test.json')
})

4）也可以通过 ./test.json 这种方式返回模拟数据，了解即可，根据情况使用

4、使用 mockjs 模拟的接口与数据

1）公共请求文件 request.js 封装案例，封装起来方便后续换线上接口

// 经过自定义处理后的 axios
// import { axios } from '@/api/axios'
// 直接使用 axios
import axios from 'axios'

// post
export function login_post (parameter) {
  return axios.post('/api/login', parameter)
}

// get
export function login_get (parameter) {
  return axios.get('/api/login', parameter)
}

// post
export function login_post_1 (parameter) {
  return axios({
    url: '/api/login1',
    method: 'post',
    data: parameter
  })
}

// get
export function login_get_1 (parameter) {
  return axios({
    url: '/api/login',
    method: 'get',
    // 在使用 mockjs 时， get 请求不能使用 params 进行传参，会报 404
    // params: parameter
    // 要么不传，要么先使用 post 的 data 方式先传着用
    data: parameter
  })
}

2）.vue 页面中使用案例

<script>

// 从封装的 request.js 文件中导出使用
import {
    login_post,
    login_post_1,
    login_get,
    login_get_1
} from '@/api/request'

// 直接使用 axios
import axios from 'axios'

export default {
  mounted () {
    // 参数
    const params = {
      id: 110
    }
    
    // post
    login_post(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

    // post
    login_post_1(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

    // get
    login_get(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

    // get
    login_get_1(params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

    // 直接使用
    axios.post('/api/post', params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    
    // 直接使用
    axios.get('/api/get', params).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

到这里 mockjs 基本也算会用了！！！！