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

时间:2022-09-21 12:51:09

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

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

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

使用接口管理之前

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

xxx.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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

?
1
2
3
4
5
6
7
8
9
10
//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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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文件夹中统一管理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://www.cnblogs.com/yingyigongzi/p/10863477.html