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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
原生js生成图片验证码
Oct 11 Javascript
详解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
php 冒泡排序 交换排序法
2011/05/10 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python输出带颜色的字符串实例
2017/10/10 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
致共产党员倡议书
2014/04/16 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
《三国志》赏析
2019/08/27 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL