現(xiàn)今開發(fā)中，前后端分離已成為一種主流的開發(fā)方式。在前后端分離的架構(gòu)中，Django作為后端框架和Vue作為前端框架也越來越被開發(fā)者們所接受。Django作為一種Web框架可以實現(xiàn)高效穩(wěn)健的服務器端數(shù)據(jù)處理，Vue則為前端開發(fā)帶來新的思路，推動前端開發(fā)的可維護性、可測試性和可擴展性。

Django與Vue的搭配需要實現(xiàn)對接口的調(diào)用，這時候一個好的解決方案是通過Django提供API接口，Vue利用axios庫訪問這些API。可以將該功能封裝成一個函數(shù)，通過定義URL、請求方式（GET、POST等）、請求參數(shù)等來進行API的調(diào)用。

import axios from 'axios'
let API = {}
API.install = function(Vue, options){
let BaseURL = options.BaseURL
Vue.prototype.$http = axios.create({
baseURL: BaseURL,
headers: {
'Content-Type': 'application/json',
}
})
// 封裝一個返回Promise對象的函數(shù)，實現(xiàn)API調(diào)用
Vue.prototype.$api = function(url, method, params, editUrl=false){
let request = null
switch (method) {
case 'GET':
request = this.$http.get(url, params)
break;
case 'POST':
request = this.$http.post(url, params)
break;
case 'DELETE':
request = this.$http.delete(url, params)
break;
case 'PUT':
request = this.$http.put(url, params)
break;
default:
request = this.$http.get(url, params)
break;
}
return request.then(res=>{
return res.data
}, error =>{
return Promise.reject(error)
})
}
}
export default API

在Vue中通過調(diào)用該函數(shù)，實現(xiàn)對接口的訪問。如下是對接口的GET請求示例：

<script>
export default {
name: "App",
data(){
return {
title: ""
}
},
mounted(){
this.getTitle()
},
methods:{
getTitle(){
this.$api('/get_title', 'GET', {}).then(res=>{
this.title = res.data.title
})
}
}
}
</script>