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

 更新时间:2023年05月18日 09:33:58   作者:卡尔特斯  
这篇文章主要介绍了Vue使用mockjs问题(返回数据、get、post 请求),具有很好的参考价值,希望对大家有所帮助。

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 基本也算会用了!!!!

vue3使用mockjs与vue2使用mockjs的方法有哪些区别?

Vue3与Vue2使用Mock.js的方法有一些不同。

Vue3支持ES6的类模块语法,使用Mock.js的时候也可以使用类模块,而Vue2只支持ES5的模块语法,所以使用Mock.js时不能使用类模块。

Vue3还支持在模块文件中使用插件,而Vue2不支持。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vue3中的非父子组件传值

    详解vue3中的非父子组件传值

    这篇文章主要为大家介绍了vue3中的非父子组件传值,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue刷新后页面数据丢失问题的解决过程

    Vue刷新后页面数据丢失问题的解决过程

    在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,这篇文章主要给大家介绍了关于Vue刷新后页面数据丢失问题的解决过程,需要的朋友可以参考下
    2022-11-11
  • 如何理解Vue的v-model指令的使用方法

    如何理解Vue的v-model指令的使用方法

    这篇文章主要介绍了如何理解Vue的v-model指令的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue接入ts基本方法

    vue接入ts基本方法

    这篇文章主要介绍了vue接入ts基本方法,关于ts,也出了很久,下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法,也算是一个初级尝试,简单梳理下基础的接入配置和已经遇到的问题,供需要的小伙伴们参考
    2022-01-01
  • Vue配置文件vue.config.js配置前端代理方式

    Vue配置文件vue.config.js配置前端代理方式

    这篇文章主要介绍了Vue配置文件vue.config.js配置前端代理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue select change事件如何传递自定义参数

    vue select change事件如何传递自定义参数

    这篇文章主要介绍了vue select change事件如何传递自定义参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • petite vue 基本使用指南示例小结

    petite vue 基本使用指南示例小结

    petite-vue 是为渐进增强而优化的另一种 Vue 发行版,它提供与标准 Vue 相同的模板语法和反应性心智模型,这篇文章主要介绍了petite vue 基本使用指南,需要的朋友可以参考下
    2024-07-07
  • 基于vue.js中关于下拉框的值默认及绑定问题

    基于vue.js中关于下拉框的值默认及绑定问题

    今天小编就为大家分享一篇基于vue.js中关于下拉框的值默认及绑定问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue项目实现github在线预览功能

    vue项目实现github在线预览功能

    这篇文章主要介绍了vue项目实现github在线预览功能,本文通过提问两个问题带领大家一起学习整个过程,需要的朋友可以参考下
    2018-06-06
  • el-tree树组件懒加载(后端上千条数据前端进行处理)

    el-tree树组件懒加载(后端上千条数据前端进行处理)

    本文主要介绍了el-tree树组件懒加载(后端上千条数据前端进行处理),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03

最新评论