个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue项目接口管理,所有接口都在apis文件夹中统一管理操作由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在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
})
 
 
//------------------- 1、请求拦截器 忽略
instance.interceptors.request.use( function (config) {
 
   return config;
}, function (error) {
   // 对请求错误做些什么
   
   return promise.reject(error);
});
 
//----------------- 2、响应拦截器 忽略
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 。

最后此篇关于vue项目接口管理,所有接口都在apis文件夹中统一管理操作的文章就讲到这里了,如果你想了解更多关于vue项目接口管理,所有接口都在apis文件夹中统一管理操作的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 解决vue项目,npm run build后,报路径错的问题
文章推荐： 失恋但是不要表现出来的签名 对感情失望的简短签名
文章推荐： vue实现把接口单独存放在一个文件方式
文章推荐： js实现幻灯片轮播图
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com