iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何实现接口统一管理
  • 733
分享到

vue如何实现接口统一管理

2024-04-02 19:04:59 733人浏览 八月长安
摘要

目录Vue接口统一管理vue中api接口管理总结vue接口统一管理 1.在src文件夹下面新建api文件夹,新建api.js // let apiUrl = 'Http://192

vue接口统一管理

1.在src文件夹下面新建api文件夹,新建api.js

// let apiUrl = 'Http://192.168.8.134:8081';
let apiUrl = '/apiapi';
let API={
		api:{
			
			//应用表
			applist:apiUrl+'/app/list',    //查询应用列表
			appadd:apiUrl+'/app/add',      //新增应用列表
			appdelete:apiUrl+'/app/delete',    //删除应用列表
			appupdate:apiUrl+'/add/update',    //修改应用列表			
		},
	
} 
 
export default {
    API: API,
}

2.在main.js引用

import api from './api/api'
Vue.prototype.API1url=api;

3.在vue中使用

vue中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axiOS,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。

1. 在axiosconfig目录下的axiosConfig.js

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-fORM-urlencoded;charset=UTF-8'
// 静态资源
Vue.prototype.$static = ''
 
// 配置接口地址
axios.defaults.baseURL = ''
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
 config => {
  loadingInstance = Loading.service({
   lock: true,
   text: '数据加载中,请稍后...',
   spinner: 'el-icon-loading',
   background: 'rgba(0, 0, 0, 0.7)'
  })
  if (config.method === 'post') {
   config.data = qs.stringify(config.data)
  }
  return config
 },
 err => {
  loadingInstance.close()
  Message.error('请求错误')
  return Promise.reject(err)
 }
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
 res => {
  if (res.data.code === 200) {
   loadingInstance.close()
   return res
  } else {
   loadingInstance.close()
   Message.error(res.data.msg)
  }
 },
 err => {
  loadingInstance.close()
  Message.error('请求失败,请稍后再试')
  return Promise.reject(err)
 }
)
// 发送请求
export function post (url, params) {
 return new Promise((resolve, reject) => {
  axios
   .post(url, params)
   .then(
    res => {
     resolve(res.data)
    },
    err => {
     reject(err.data)
    }
   )
   .catch(err => {
    reject(err.data)
   })
 })
}
export function get (url, params) {
 return new Promise((resolve, reject) => {
  axios
   .get(url, {
    params: params
   })
   .then(res => {
    resolve(res.data)
   })
   .catch(err => {
    reject(err.data)
   })
 })
}

2. 在api目录下的index.js,api1.js,api2.js

api1.js
import { post } from '../axiosconfig/'
export default {
  login(params) {
    return post('/users/api/login', params)
  }
}
api2.js
import { post } from '../axiosconfig/'
export default {
  reGISt(params) {
    return post('/users/api/regist', params)
  }
}
index.js
import user from './api1.js'
import active from './api2.js'
export default {
 api1,
 api2
}

3. main.js 配置

import api from './api/'
Vue.prototype.$api = api

4. 在组件中使用

登录组件中

doLongin() {
 let params={}
 this.$api.api1.login(params).then(res => {
  console.log(res)
 })
}

注册组件中

doRegist() {
 let params={}
 this.$api.api2.regist(params).then(res => {
  console.log(res)
 })
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何实现接口统一管理

本文链接: https://www.lsjlt.com/news/168093.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何实现接口统一管理
    目录vue接口统一管理vue中api接口管理总结vue接口统一管理 1.在src文件夹下面新建api文件夹,新建api.js // let apiUrl = 'http://192...
    99+
    2024-04-02
  • Android如何实现socket通信统一接口
    小编给大家分享一下Android如何实现socket通信统一接口,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Android实现socket通信统一接口,统一接口之后可以在不需要大量修改应用层代码的情况下,使用与当前功能类...
    99+
    2023-06-25
  • springboot vue项目管理后端实现接口新增
    目录基于 springboot+vue 的测试平台开发继续更新。一、编写实体类 Project二、创建数据表修改 application.properties 中的配置三、编写 Pr...
    99+
    2024-04-02
  • PHP接口如何实现分布式日志管理?
    在分布式系统中,日志管理是一项非常重要的任务。日志管理可以帮助我们快速定位系统中的问题,排除故障,提高系统的可靠性。在PHP接口中,如何实现分布式日志管理呢?本文将详细介绍。 一、什么是分布式日志管理? 分布式日志管理是指在分布式系统中,...
    99+
    2023-06-27
    接口 分布式 日志
  • SpringBoot接口如何统一异常处理
    目录为什么要优雅的处理异常实现案例@ControllerAdvice异常统一处理Controller接口运行测试进一步理解@ControllerAdvice还可以怎么用?@Contr...
    99+
    2024-04-02
  • 如何在Java中利用枚举对接口进行统一管理
    这篇文章给大家介绍如何在Java中利用枚举对接口进行统一管理,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。枚举公共接口public interface IPairs<K, V,&nb...
    99+
    2023-06-06
  • 如何设计API接口实现统一格式返回
    这篇文章给大家介绍如何设计API接口实现统一格式返回,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。前言在移动互联网,分布式、微服务盛行的今天,现在项目绝大部分都采用的微服务框架,前后端分离方式,(题外话:前后端的工作职...
    99+
    2023-06-05
  • 基于springboot+vue如何实现垃圾分类管理系统
    本篇内容主要讲解“基于springboot+vue如何实现垃圾分类管理系统”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“基于springboot+vue如何实现...
    99+
    2024-04-02
  • 如何将接口转换为它实现的另一个接口?
    php小编草莓将为大家介绍如何将接口转换为它实现的另一个接口。在编程中,接口是一种定义了一组方法的抽象类型,而另一个接口则是实现了这些方法的具体类型。将接口转换为另一个接口可以帮助我们...
    99+
    2024-02-13
  • Android基于MediatorLiveData如何实现红点的统一管理
    这篇文章主要介绍了Android基于MediatorLiveData如何实现红点的统一管理,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。背景小红点在各个App内随处可见,并且...
    99+
    2023-06-14
  • java实现一个接口调取另一个接口(接口一调取接口二)
    目录java一个接口调取另一个接口工具类springboot中使用(接口一)接口二接口的调用与调用别人的接口别人调用我们的接口,与controller方法开发类似我们调用别人的接口j...
    99+
    2024-04-02
  • 如何在Spring中实现一个BeanFactoryPostProcessor接口
    本篇文章为大家展示了如何在Spring中实现一个BeanFactoryPostProcessor接口,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。接口简介BeanFactoryPostProcess...
    99+
    2023-06-06
  • 如何使用springboot及vue实现垃圾分类管理系统
    本篇内容介绍了“如何使用springboot及vue实现垃圾分类管理系统”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、项目概述1.项目内...
    99+
    2023-07-06
  • golang接口如何实现
    今天小编给大家分享一下golang接口如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在golang中,可以使用“ty...
    99+
    2023-07-04
  • Java中如何实现一个航空航班管理系统
    Java中如何实现一个航空航班管理系统,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Plane对象:在Plane对象里定义了飞机的编号id、航班号、目的地、起飞...
    99+
    2023-06-20
  • 如何编写一个与Unix系统实时接口兼容的PHP接口?
    在今天的互联网时代,PHP作为一种开源的服务器端脚本语言,被广泛应用于Web应用程序的开发,但是在一些特殊场景下,需要与Unix系统进行实时接口兼容,这就需要我们编写一个与Unix系统实时接口兼容的PHP接口。 下面,我们将为您介绍如何编写...
    99+
    2023-09-13
    实时 unix 接口
  • java利用webService 如何实现一个WSDL接口
    java利用webService 如何实现一个WSDL接口?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、使用JDK生成WSDL的对象类cmd进入JDK的bin文件中  ...
    99+
    2023-05-31
    java wsdl webservice
  • C++如何实现图书管理系统
    本文小编为大家详细介绍“C++如何实现图书管理系统”,内容详细,步骤清晰,细节处理妥当,希望这篇“C++如何实现图书管理系统”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。功能:首先是注册,登录,找回密码和修改密码...
    99+
    2023-06-29
  • python如何实现会员管理系统
    这篇文章主要介绍了python如何实现会员管理系统的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇python如何实现会员管理系统文章都会有所收获,下面我们一起来看看吧。具体内容如下:""&q...
    99+
    2023-06-29
  • java如何实现图书管理系统
    小编给大家分享一下java如何实现图书管理系统,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、背景介绍通过一段时间java编程的学习,需要一个比较综合的实例来进...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作