vue项目接口管理,所有接口都在apis文件夹中统一管理操作


Posted in Javascript onAugust 13, 2020

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

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

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

使用接口管理之前

在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中 比如:

xxx.vue

<template>
  <div id="areaTree">
   <!-- 标题 -->
   <div class="leftTree_Title">
    <el-row>    
     <el-col :span="24">{{msg}}</el-col>
    </el-row>
   </div>
  </div>
</template>

<script>
import axios from 'axios'

export default { 
  name: "test",
  data:function(){ 
    return{ 
      msg:'站点选择',
    }
  },
  methods:{ 
  },
  computed:{
  },
  //--------------Vue生命周期---具体细节参考:https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------
  beforeCreate(){
  },
    
  created(){ 
  },
  beforeMount(){
  },
  mounted(){  //理解成初始化,该操作只会执行一次 
    axios.get('/GetTreeListForSoilByRegion',{  //从接口读取数据
    params: {
     //参数
    } 
   })
   .then(function (response) {


//代码操作
   })
   .catch(function (error) {
    console.log(error);
   });
  },
  beforeUpdate(){
  },
  updated(){
  }, 
  beforeDestroy(){
  },
  destroyed(){
  },
  //--------------Vue生命周期---具体细节参考:https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------
} 
</script>

<style scoped></style>

使用项目管理之后,可以做到接口一次定义,到处使用,

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

步骤:

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

2.在apis下新建一个js文件,叫http.js,在里面做axios相应的配置,目的 封装axios,完整代码如下,可以直接使用

http.js

import axios from 'axios'
 
//创建axios的一个实例
var instance = axios.create({
  baseURL:'',
  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) {
  // 对响应错误做点什么
  console.log('拦截器报错');
  return Promise.reject(error);
});
 
/**
 * 使用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
  }
}

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

我要去拿树结构的数据,到时候处理完数据在页面上显示出来,操作如下:

a.新建一个navigationTree.js,这里专门用来管理 我的树组件(即上文的xxx.vue)的接口,(如果还有别的组件,比如aa.vue也要用到接口,可以在api文件夹内再创一个aa.js,管理aa.vue的接口)

navigationTree.js

//navigationTree.js 用于获取导航树的树形json数据

import req from './http.js'  //引入封装好的axios

//在这里定义了一个登陆的接口,把登陆的接口暴露出去给组件使用
export const GETTREEDATA =params=>req('get','/GetTreeListForSoilByRegion',params)
//这里使用了箭头函数,转换一下写法:
//export const GETTREEDATA=function(req){
//  return req('post','/GetTreeListForSoilByRegion',params)
//}

4.在组件中使用接口,来看看现在的xxx.vue

<template>
  <div id="areaTree"><br>    
  <!-- 标题 --><br>    
  <div class="leftTree_Title"><br>    
  <el-row> <br>      
  <el-col :span="24">{{msg}}</el-col> <br>    
  </el-row> <br>    
  </div> <br>  
  </div>
</template>
 
<script>
 
//1. 引入获取树结构的接口定义
import {GETTREEDATA} from '../apis/navigationTree.js'
 
let treeTemp =[];
export default {
  name: "zTree",
  data:function(){
    return{
      msg:'站点选择',
    }
  },
  methods:{
  },
  computed:{
  },

  beforeCreate(){
  },
  created(){   
  },
  beforeMount(){
  },
  mounted(){  //理解成初始化,该操作只会执行一次
 
    let testdata = GETTREEDATA();  //vue项目接口管理,所有接口都在apis文件夹中统一管理
    testdata
    .then(function(response){
     //console.log(response);
 
    }).catch(function(error){
      console.log(error);
    });
 
  },
  beforeUpdate(){
  },
  updated(){
  },
  beforeDestroy(){ 
  },
  destroyed(){
  },

}
</script>
 
<style scoped>
</style>

核心部分mounted 这块

补充知识:vue项目api接口组织方式

一般后端接口是,一个业务的方法,用一个controller,所以前端这边,一个业务的接口放到一个js文件里

shiroApi提供认证相关接口,如下图

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

adminApi提供组织,用户,角色管理等相关接口,如下图

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

将shiroApi和adminApi等等api做个汇总,到apis.js中,如下图

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

登陆接口调用例子,引入apis.js即可(当然也可以引入具体shiroApi.js,看自己需要和习惯),如下图:

vue项目接口管理,所有接口都在apis文件夹中统一管理操作

个人总结的api组织方式,欢迎提供更好的建议

以上这篇vue项目接口管理,所有接口都在apis文件夹中统一管理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
jQuery实现大图轮播
Feb 13 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 #Javascript
js实现幻灯片轮播图
Aug 14 #Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 #Javascript
修改Vue打包后的默认文件名操作
Aug 12 #Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 #Javascript
vue设置默认首页的操作
Aug 12 #Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 #Javascript
You might like
PHP中实现进程间通讯
2006/10/09 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
js prototype截取字符串函数
2010/04/01 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
javascript self对象使用详解
2016/10/18 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
js实现下拉框二级联动
2018/12/04 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python适合人工智能的理由和优势
2019/06/28 Python
python实现静态服务器
2019/09/05 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
作风年建设汇报材料
2014/08/14 职场文书
高中学校对照检查材料
2014/08/31 职场文书
学校联谊协议书
2014/09/16 职场文书
运动会加油稿20字
2014/11/15 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python