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 相关文章推荐
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JS实现网页端猜数字小游戏
Mar 06 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python实现logistic分类算法代码
2020/02/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
市级文明单位申报材料
2014/05/07 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
服务承诺书
2015/01/19 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技