怎么在vue項目中實現(xiàn)一個接口管理功能

怎么在vue項目中實現(xiàn)一個接口管理功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用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文件

現(xiàn)在的目錄大概是這個樣子

src
  apis
    info.js
    member.js
    user_info.js
  main.js

3.第三步，需要引入axios做相應(yīng)的配置

在apis下新建一個文件夾,叫http.js,在里面做axios相應(yīng)的配置

touch http.js //新建http.js文件

配置如下:

import axios from 'axios'

//創(chuàng)建axios的一個實例 
var instance = axios.create({
  baseURL:xxx,
  timeout: 6000
})


//------------------- 一、請求攔截器 忽略
instance.interceptors.request.use(function (config) {

  return config;
}, function (error) {
  // 對請求錯誤做些什么
  
  return Promise.reject(error);
});

//----------------- 二、響應(yīng)攔截器 忽略
instance.interceptors.response.use(function (response) {
  
  return response.data;
}, function (error) {
  // 對響應(yīng)錯誤做點(diǎn)什么
  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的功能一樣)

• 請求攔截器響應(yīng)攔截器不是本文重點(diǎn)，略過

• 第30行代碼及以后是重點(diǎn)，拉出來重點(diǎn)看一下

/**
 * 使用es6的export default導(dǎo)出了一個函數(shù)，導(dǎo)出的函數(shù)代替axios去幫我們請求數(shù)據(jù)，
 * 函數(shù)的參數(shù)及返回值如下：
 * @param {String} method 請求的方法：get、post、delete、put
 * @param {String} url   請求的url:
 * @param {Object} data  請求的參數(shù)
 * @returns {Promise}   返回一個promise對象，其實就相當(dāng)于axios請求數(shù)據(jù)的返回值
 */
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導(dǎo)出的函數(shù)，拿其中一個文件member.js說明

//member.js 用于定義用戶的登錄、注冊、注銷等

import req from './http.js'

//定義接口 

//在這里定義了一個登陸的接口，把登陸的接口暴露出去給組件使用
export const LOGIN =params=>req('post','/operator/login',params)
//這里使用了箭頭函數(shù)，轉(zhuǎn)換一下寫法：
//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)執(zhí)行完,
       //把返回值給user_info
      
      let user_info=await LOGIN(this.user)
      
      //2.2假設(shè)登錄成功,返回的數(shù)據(jù)應(yīng)該是 
        //user_info={code:200,msg:'success',data:{token:'xxxxx'}}
        //然后根據(jù)返回的數(shù)據(jù)做相應(yīng)的處理，比如儲存token
      
    } 
    },
    mounted(){
      //3. 執(zhí)行登錄
      this.login()
    }
  }
</script>

6.這樣定義接口雖然看起來麻煩點(diǎn)，但有以下幾個好處：

代碼看起來規(guī)范，所有的接口都在一個文件夾定義，不用分散的各個組件，維護(hù)起來簡單，例如后臺的一些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' //用戶信息

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。