Vue項目中的接口調用

在企業開發過程中，往往有着明確的前后端的分工，前端負責接收、使用接口，后端負責編寫、處理接口。

對於前端如何使用接口，今天在Vue中進行講解。

一個項目往往由這幾個部分組成。

其中在src文件夾中，，有這么些內容。

 

 

我們常常把接口文件，新建一個文件夾在src下，命名為api，api內的文件便是接口文件。

 

通常把后端的接口寫在api文件夾下，自己命名為xxx.js

// 登錄
export function login(data) {
  return request({
    url: '/api/court/login',
    method: 'post',
    data
  })
}
// 獲取驗證碼
export function captchaImage(params) {
  return request({
    url: '/api/captchaImage',
    method: 'get',
    params
  })
}

對於需要添加信息在頭部的，可以這么寫

// 獲取登錄用戶信息
export function getInfo(params) {
  return request({
    url: '/api/court/getInfo',
    method: 'get',
    params,
    headers: {
      'Authorization': JSON.parse(localStorage.Authorization)
  }
  })
}

 

 

 

 

 這個就是request.js 文件的內容 

 

import axios from 'axios'
// import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  // 外網更新
  // baseURL: 'http://xxxxx',
  baseURL: '/xxxxx',  
  timeout: 5000 // request timeout
})

export default service

項目的頁面往往寫在views中，每個頁面設一個文件夾，其中index.vue 內容則是本頁面的內容

 

 

 ，在頁面中，如果我們需要使用某個接口。則需要進行引入操作。通過 import {接口名1、接口名2} from ' api文件地址 '

import { login,captchaImage,getInfo,logOut,reset } from '@/api/login'

from后所跟的就是api中文件的地址路徑

接口往往是在方法中進行調用，對於不同接口 ，需要的參數也不一樣，根據需求，我們傳入對應的參數即可。圖中的 captchaImage、以及login就是接口信息。

接口的使用格式：

 

接口名({參數1:頁面中的參1，參數2：頁面中的參數2}).then(res => {

            console.log(res)//res就是調用接口后，后台返回過來的結果，一般數據儲存在res.data.data中，具體情況而論

           

            })

 

 

 

 這樣就是接口調用的全部過程了。附上控制台信息圖以及apipost接口圖。