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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
js jquery数组介绍
Jul 15 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
React Native项目框架搭建的一些心得体会
May 28 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+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
jquery实现保存已选用户
2014/07/21 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
详解React 条件渲染
2020/07/08 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python中实现常量(Const)功能
2015/01/28 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
提升Python程序性能的7个习惯
2019/04/14 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python正则-re的用法详解
2019/07/28 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
Python 图片处理库exifread详解
2021/02/25 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
元宵晚会主持词
2014/03/25 职场文书
内勤主管岗位职责
2014/04/03 职场文书
保密工作责任书
2014/04/16 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL