在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文件夹中统一管理操作 文件夹 apis 接口 vue JavaScript  第1张

adminApi出示机构,客户,人物角色管理等有关接口,如下图

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

将shiroApi和adminApi这些api做下归纳,到apis.js中,如下图

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

登录接口启用事例,引进apis.js就可以(自然还可以引进实际shiroApi.js,看自身必须和习惯性),如下图:

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

自我总结的api机构方法,热烈欢迎出示更强的提议

之上这篇vue项目接口管理,全部接口都会apis文件夹中统一管理实际操作便是我共享给大伙儿的所有内容了,期待能给大伙儿一个参照,也期待大伙儿多多的适用。