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与php接口对接,怎样使用vue项目中api接口
这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 在axiosconfig目录下的axiosConfig.jsimpor ...
- vue项目中api接口管理总结
默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关. 1. 在axiosconfig目录下的ax ...
- 网易云音乐API,的调用方法 ,vue项目中(在本地使用)
1. 在cmd 命令行下:安装并启动: git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git /* 下载 */cd Netea ...
- vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
- 在vue项目中:统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理 参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
- Spring Boot项目中使用RestTemplate调用https接口出现 unable to find valid certification path to requested target
问题描述:Spring Boot项目中使用RestTemplate调用https接口出现以下错误: PKIX path building failed: sun.security.provider.c ...
- Vue学习笔记(二)—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件 二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
- methods vue过滤器 和_数据动态过滤技巧在 Vue 项目中的实践
这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount. rende ...
- Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能 需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
最新文章
- 推荐几个华为、字节跳动、蚂蚁金服的大佬公号
- MapReduce实现Apriori算法
- 在Linux系统下防火墙开放所需要访问的端口号
- python语言的优缺点论文_Python语言的优缺点是什么呢?
- fastjson 1.2.57 版本发布,Bug 修复维护版本
- 从运维角度浅谈MySQL数据库优化,中小企业DBA必会
- react-native---配置reactnative报红,run-Android时候报错unable to load script from assets 'index.android.bundl
- android中函数的直接使用用import就可以了吗各种类不用创建对象吗_React Hooks 如何安全地使用state...
- Python爬虫之(一):爬虫简介
- Java中Double保留六位小数_Java中Double保留后小数位的几种方法
- 内存少导致编译出错,内存增加到24G
- Echarts经纬度数组
- 华为SNS2224的Zone配置
- 群晖 NAS DSM 系统,只要三步使用 Docker 安装迅雷远程下载
- 功能测试数据测试之错误推测方法
- OpenCV学习篇2:viz模块简单用法
- DMP (Dynamic Movement Primitives) 动态运动基元
- python 加权随机算法_python的random模块及加权随机算法的python实现方法
- 音频文件(.wav)解析读取
- js-4 代理Proxy,object原型链, prototype, 继承,