vue不用import直接调用实现接口api文件封装

目录
  • 引言
    • 解决每次import问题：
    • 封装代码，在index.js
    • 多层级怎么处理呢？
      • src / api / index.js
      • src / api / monitor / index.js
      • src / main.js
      • 页面
      • 接口.js文件内容如下

引言

开发时习惯将调用后端接口的方法写在接口文件里统一管理，这样使用时需要import方法，

类似在页面里 import { fun1,fun2,fun3 } from ../api/user

每次都需要import,非常不方便

解决每次import问题：

封装成图上这种后

组件内要调用api使用的时候直接 this.$api.user.func1()....

不用 import { fun1,fun2,fun3 } from ../api/user

封装代码，在index.js

import Vue from 'vue'
import * as DS from './DS'
import * as content from './content'
import * as user from './user'
const api = {
  DS,
  content,
  user
}
Vue.prototype.$api = api
export default api

main.js

import '@/api'

对于这种只有一层级的接口文件，我们可以像上面这么处理

多层级怎么处理呢？

图上api接口文件夹下，既有第一层级的login.js, menu.js ，还有第二层级在monitor文件夹下的job.js, server.js 。。。。。像这种可以用下面的方式处理~

src / api / index.js

import Vue from 'vue'
import * as login from './login'
import * as menu from './menu'
import * as monitor from './monitor/index'
console.log(2222222)
console.log(monitor)
const api = {
    login,
    monitor,
    menu
}
Vue.prototype.$api = api
// export default api

src / api / monitor / index.js

import * as job from "./job"
import * as server from "./server"
export {job,server}

src / main.js

import '@/api'

页面

this.$api.login.func1().then(res => { ...............
this.$api.monitor.job.func1().then(res => { ...............

思想就是 ：

同一层级的文件直接引入 然后挂载，多层级的文件，分文件夹用index.js把本文件夹下的文件全部引入进去，然后导出，再在外层的index文件 引用里层的index文件，就能把所有文件内容一次导出了

接口.js文件内容如下

以上就是vue不用import直接调用实现接口api文件封装的详细内容，更多关于vue调用接口api文件封装的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue Element前端应用开发之前端API接口的封装

    Vue Element前端应用开发之前端API接口的封装

    1.ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型. 启动Host的项目,我们可以看到Swagger的管理界面如下所示. 上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一般业务对象,都有Get.GetAll.Create.Update.Delete等常见接口,由于这些接口是给前端进行调用的. Vue + Elemen

  • vue封装axios与api接口管理的完整步骤

    目录 一.前言 二.axios封装步骤 三.api接口统一管理 总结 一.前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 二.axios封装步骤 安装:npm install axios -S 一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js.http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url,

  • Vue接口封装的完整步骤记录

    Vue接口封装的完整步骤记录

    首先根据接口写好对应页面的请求 内容如图尽量保证js文件名称与页面文件名称相同(易于查找) 根据文件目录动态引入/导出接口 提高便捷性 /** * 自动引入当前文件夹下所有module * require.context(directory, useSubdirectories = false, regExp = /^.//); * @param {String} directory 读取文件的路径 * @param {Boolean} directory 匹配文件的正则表达式 * @param

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • vue如何自定义封装API组件

    vue如何自定义封装API组件

    目录 自定义封装API组件 1.创建vue组件 2.创建Alter.js生成组件 3.导入Vue 如何封装使用api形式调用的vue组件 子组件 父组件 自定义封装API组件 1.创建vue组件 <template>     <div >         <div class="alert">         <div class="alert-main" v-for="item in notices"

  • vue不用import直接调用实现接口api文件封装

    vue不用import直接调用实现接口api文件封装

    目录 引言 解决每次import问题: 封装代码,在index.js 多层级怎么处理呢? src / api / index.js src / api / monitor / index.js src / main.js 页面 接口.js文件内容如下 引言 开发时习惯将调用后端接口的方法写在接口文件里统一管理,这样使用时需要import方法, 类似在页面里 import { fun1,fun2,fun3 } from ../api/user 每次都需要import,非常不方便 解决每次impor

  • Vue中使用axios调用后端接口的坑及解决

    Vue中使用axios调用后端接口的坑及解决

    目录 axios调用后端接口的坑 问题场景 总结了如下场景 调用后端接口 使用axios跨域问题 首先找到项目中vue.config.js axios调用后端接口的坑 问题场景 Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况 总结了如下场景 @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-f

  • 微信小程序如何调用图片接口API并居中显示

    微信小程序如何调用图片接口API并居中显示

    写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API: 美图API url wxml: <view class='imagesize' wx:for="{{list}}" wx:key="index"> <image src="{{list.img}}" class='in-image' > </image> </view> js: Page({ dat

  • 使用RestTemplate 调用远程接口上传文件方式

    目录 RestTemplate 调用远程接口上传文件 问题描述 解决方法 第一种方式 第二种方式 RestTemplate调用远程接口添加请求头 RestTemplate 调用远程接口上传文件 问题描述 第三方写了一个文件上传的接口,该接口的请求方式为Post请求,请求参数全部是以form-data表单形式进行提交,包含三个参数 第一个:cookie(字符串类型) 第二个:seqNo(字符串类型) 第三个:file(文件类型) 解决方法 使用传统的Spring Cloud的Feign组件在调用远

  • python 调用有道api接口的方法

    初学python ,研究了几天,写了一个python 调用 有道api接口程序 效果看下图: 申明:代码仅供和我一样的初学者学习交流 有道api申请地址http://fanyi.youdao.com/openapi?path=data-mode 申请很简单的 ps:审核不用花时间的,请勿滥用!! #-*- coding: UTF-8 -*- import urllib import urllib2 import requests import json import sys reload(sys

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

  • vue项目中如何调用多个不同的ip接口

    目录 如何调用多个不同的ip接口 第一个文件 第二个文件 第三个文件 设置自动配置不同环境接口 1.再根目录新建一个文件夹configenv 2.在main.js 入口文件中 3.在实际Vue页面中,接口实际调用 如何调用多个不同的ip接口 灵感来源: 项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口 思路: 其实就是多写几个request.js文件罢了,或者在一个文件里面多写几个响应拦截和请求拦截. 上代码: 第一个文件 request.js import ax

随机推荐