Vue项目中接口调用的详细讲解

更新时间：2022年07月22日 09:36:06 作者：我要当前端工程师

应公司需求,接口需要对接vue,记录一下碰到的问题,下面这篇文章主要给大家介绍了关于Vue项目中接口调用的详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

在企业开发过程中，往往有着明确的前后端的分工，前端负责接收、使用接口，后端负责编写、处理接口。

对于前端如何使用接口，今天在Vue中进行讲解。

一个项目往往由这几个部分组成。

其中在src文件夹中，

，有这么些内容。

我们常常把接口文件，新建一个文件夹在src下，命名为api，api内的文件便是接口文件。

通常把后端的接口写在api文件夹下，自己命名为xxx.js

// 登录
export function login(data) {
  return request({
    url: '/api/court/login',
    method: 'post',
    data
  })
}
// 获取验证码
export function captchaImage(params) {
  return request({
    url: '/api/captchaImage',
    method: 'get',
    params
  })
}

对于需要添加信息在头部的，可以这么写

// 获取登录用户信息
export function getInfo(params) {
  return request({
    url: '/api/court/getInfo',
    method: 'get',
    params,
    headers: {
      'Authorization': JSON.parse(localStorage.Authorization)
  }
  })
}

这个就是request.js 文件的内容

import axios from 'axios'
// import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  // 外网更新
  // baseURL: 'http://xxxxx',
  baseURL: '/xxxxx',  
  timeout: 5000 // request timeout
})

export default service

项目的页面往往写在views中，每个页面设一个文件夹，其中index.vue 内容则是本页面的内容

在页面中，如果我们需要使用某个接口。则需要进行引入操作。通过 import {接口名1、接口名2} from ’ api文件地址 ’

import { login,captchaImage,getInfo,logOut,reset } from '@/api/login'

from后所跟的就是api中文件的地址路径

接口往往是在方法中进行调用，对于不同接口，需要的参数也不一样，根据需求，我们传入对应的参数即可。图中的 captchaImage、以及login就是接口信息。

接口的使用格式：

接口名({参数1:页面中的参1，参数2：页面中的参数2}).then(res => {
console.log(res)//res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论
})

这样就是接口调用的全部过程了。附上控制台信息图以及apipost接口图。

总结

到此这篇关于Vue项目中接口调用的文章就介绍到这了,更多相关Vue项目接口调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue如何判断数组中的对象是否包含某个值
这篇文章主要介绍了vue如何判断数组中的对象是否包含某个值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
基于vue、react实现倒计时效果
这篇文章主要为大家详细介绍了基于vue、react实现倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
vue3将页面生成pdf导出的操作指南
最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,下面这篇文章主要给大家介绍了关于vue3 如何将页面生成 pdf 导出,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
vue引入jq插件的实例讲解
下面小编就为大家带来一篇vue引入jq插件的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue 解决路由过渡动画抖动问题(实例详解)
这篇文章主要介绍了Vue 解决路由过渡动画抖动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
解决Echarts2竖直datazoom滑动后显示数据不全的问题
这篇文章主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
全面总结Vue3.0的多种侦听方式
Vue提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue3.0多种侦听方式的相关资料,需要的朋友可以参考下
2021-10-10
vue基于element的区间选择组件
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue3.x lodash在项目中管理封装指令的优雅使用
这篇文章主要为大家介绍了vue3.x lodash在项目中管理封装指令的优雅使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
vue中router-view使用教程详解
router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,本文主要为大家详细介绍了router-view具体使用,希望对大家有所帮助
2023-12-12

Vue项目中接口调用的详细讲解

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具