vue 项目接口管理的实现


Posted in Javascript onJanuary 17, 2019

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

方法可能不只一种,本文使用axios+async/await进行接口的统一管理

本文使用vue-cli生成的项目举例

举例

拿segmentfault的官网简单举个例子,先看一下官网

vue 项目接口管理的实现

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

  • 资讯模块 (我的订阅、热门资讯)
  • 问答模块
  • 专栏模块
  • 讲堂模块
  • 圈子模块
  • 发现模块
  • 个人信息模块
  • 用户登录注册模块
  • ...还有其他很多

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

vue 项目接口管理的实现

那么如何做呢?

动手

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

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

2.第二步,按照后台文档划分的模块新建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

3.第三步,需要引入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
  }
}

4.第四步、在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)

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

登陆组件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>

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

代码看起来规范,所有的接口都在一个文件夹定义,不用分散的各个组件,维护起来简单,例如后台的一些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保存和更新,页面权限问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
详解VUE单页应用骨架屏方案
Jan 17 #Javascript
Jquery获取radio选中值实例总结
Jan 17 #jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 #Javascript
js中怎么判断两个字符串相等的实例
Jan 17 #Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 #Javascript
vue中$nextTick的用法讲解
Jan 17 #Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 #Javascript
You might like
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python如何写个俄罗斯方块
2020/11/06 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
J2EE面试题大全
2016/08/06 面试题
个人优缺点自我评价
2014/01/27 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
出国留学导师推荐信
2015/03/26 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
微信早安问候语
2015/11/10 职场文书
使用Redis实现分布式锁的方法
2022/06/16 Redis
Mysql如何查看是否使用到索引
2022/12/24 MySQL