vue 项目接口管理

更新日期: 2019-03-13阅读: 3.1k标签: 接口

vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢?

方法可能不只一种,本文使用axios+async/await进行接口的统一管理。本文使用vue-cli生成的项目举例。


举例

拿segmentfault的官网简单举个例子,看下网站,脑补一下后台给出的文档,如果后台不傻的话给出的文档肯定分模块的,假设后台给出的文档分为了以下几个模块(假设的,不要较真哈):

  • 资讯模块 (我的订阅、热门资讯)

  • 问答模块

  • 专栏模块

  • 讲堂模块

  • 圈子模块

  • 发现模块

  • 个人信息模块

  • 用户登录注册模块

  • ...还有其他很多

一般来说,网站的首页都是复杂的,会用到很多其他页面也会用到api,所以接口统一管理可以做到api的复用,那么如何做呢?


动手

首先,在src目录下新建一个文件夹,我这里叫apis,后台提供的所有接口都在这里定义:

cd src  #切换到src目录
mkdir apis  #新建apis文件


第二步,按照后台文档划分的模块新建js文件,这里简单举个例子:

  • 资讯模块: info.js

  • 登录注册模块: member.js

  • 个人信息模块 user_info.js

  • ....

cd apis #切换到apis目录
touch info.js member.js user_info.js #新建js文件

现在的目录大概是这个样子:

src
    apis
        info.js
        member.js
        user_info.js
    main.js


第三步,需要引入axios做相应的配置。

在apis下新建一个文件夹,叫http.js,在里面做axios相应的配置。

touch http.js //新建http.js文件

配置如下:

import axios from 'axios'

//创建axios的一个实例
var instance = axios.create({
   baseURL:xxx,
   timeout: 6000
})

//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
   return config;
}, function (error) {
   // 对请求错误做些什么
   return Promise.reject(error);
});

//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
   return response.data;
}, function (error) {
   // 对响应错误做点什么
   return Promise.reject(error);
});

export default function (method, url, data = null) {
   method = method.toLowerCase();
   if (method == 'post') {
       return instance.post(url, data)
   } else if (method == 'get') {
       return instance.get(url, { params: data })
   } else if (method == 'delete') {
       return instance.delete(url, { params: data })
   }else if(method == 'put'){
       return instance.put(url,data)
   }else{
       console.error('未知的method'+method)
       return false
   }
}


配置简要说明一下:

引入axios,新建了个axios的实例(axios的实例的axios的功能一样)。

请求拦截器响应拦截器不是本文重点,略过。

第30行代码及以后是重点,拉出来重点看一下。

/**
 * 使用es6的export default导出了一个函数,导出的函数代替axios去帮我们请求数据
 * 函数的参数及返回值如下:
 * @param {String} method  请求的方法:get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象,其实就相当于axios请求数据的返回值
 */
export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data)
    } else if (method == 'get') {
        return instance.get(url, { params: data })
    } else if (method == 'delete') {
        return instance.delete(url, { params: data })
    }else if(method == 'put'){
        return instance.put(url,data)
    }else{
        console.error('未知的method'+method)
        return false
    }
}

第四步,在apis下面的js文件中引入 http.js导出的函数,拿其中一个文件 member.js说明:

//member.js 用于定义用户的登录、注册、注销等
import req from './http.js'

//定义接口  
//在这里定义了一个登陆的接口,把登陆的接口暴露出去给组件使用
export const LOGIN =params=>req('post','/operator/login',params)

//这里使用了箭头函数,转换一下写法:
//export const LOGIN=function(req){
//    return req('post','/operator/login',params)
//}

//定义注册接口
export const REG =params=>req('post','/operator/reg',params)

//定义注销接口
export const LOGOUT =params=>req('post','/operator/logout',params)



第五步,在组件中使用接口。

登陆组件 Login.js使用登录接口:

//Login.vue
<template>
   <div>
       <input type='text' v-modal='user.userId'>
       <input type='text' v-modal='user.pass'>
   </div>
</template>

<script>
   //1. 引入登录的接口定义
   import {LOGIN} from '../../apis/user.js'
   export default{
       data(){
           return {
               user:{
                   userId:'',
                   pass:''
               }
           }
       },
       methods{
       //2. 定义登录的逻辑
       async login(){
           //2.1 awiat LOGIN(this.user)
             //等待LOGIN(this.user)执行完,
             //把返回值给user_info
           let user_info=await LOGIN(this.user)

           //2.2假设登录成功,返回的数据应该是
               //user_info={code:200,msg:'success',data:{token:'xxxxx'}}
               //然后根据返回的数据做相应的处理,比如储存token
          }
       },
       mounted(){
           //3. 执行登录
           this.login()
       }
   }
</script>



这样定义接口虽然看起来麻烦点,但有以下几个好处:

  • 代码看起来规范,所有的接口都在一个文件夹定义,不用分散的各个组件,维护起来简单,例如后台的一些url变了,改起来也方便。

  • 可以做到接口一次定义,到处使用。

例如首页使用了很多api:

//index.js  首页的js文件
import {GET_USER_INFO} from 'apis/user_info.js'  //用户信息
import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //热门资讯 最新资讯
import {GET_HOT_LECTRUE} from'apis/lectrue.js' //讲座推荐

用户界面也会用到用户信息api:

//user_info.js用户信息页面
import {GET_USER_INFO} from 'apis/user_info.js'  //用户信息

就先写到这里了,如有错误,请在评论区指正,下次整理下用户权限相关的内容,包括jwt、token保存和更新、页面权限问题。


来自:hyangteng  


链接: https://fly63.com/article/detial/2360

为什么前后端分离了,你比从前更痛苦?

前后端分离可以让我们的职责更清晰,打破前端发挥的局限,工作解耦之后能更好的提高开发效率。然而因为没有规划好开发流程,导致了我们没有发挥出其应有的价值,造成了更多的浪费。

前后端分离项目的跨域及保持Session会话

当Web项目前后端分离开发的时候, 由于域名不一致, 会出现无法请求和无法维持会话的情况,在前端Ajax请求后台的时候, 打开控制台可以看到, 每一次请求之前都会有一次OPTIONS类型的请求

PHP面向对象(抽象类与抽象方法、接口的实现)

任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的。定义为抽象的类不能被实例化。 被定义为抽象的方法只是声明了其调用方式(参数),不能定义其具体的功能实现。

免费的公共API接口_WebService接口大全

这篇文章为大家整理一下免费,常用的的WebService接口,列举一些搜集到的免费的公共API接口,希望对你有所帮助,天气预报Web服务,数据来源于中国气象局;IP地址来源搜索 WEB 服务;随机英文、数字和中文简体字

常用HTTP接口测试工具对比

从功能上Jmeter最为强大,可以测试各种类型的接口,不支持的也可以通过网上或自己编写的插件进行扩展。SoapUI专门针对HTTP类型的两种接口,其初衷更是专门测试Soap类型接口,对于其他协议的接口不支持

TypeScript接口(Interfaces)来定义对象的类型

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implements)

你不得不了解的前后端分离原理!

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构

vue项目接入mock&& axios 通用配置

兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE 可以按照预定的接口文档做一些接口模拟的工作

vue中使用proxy配置不同端口和ip接口

使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致,解决问题:在vue.config.js中配置不同的端口号

TypeScript接口

接口的作用是声明变量的结构和方法,但不做具体的实现。通常,接口会强制对所有成员进行类型检查,包括数量和类型:带有可选属性的接口与普通的接口定义差不多

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!