drf框架和axios封裝

2021-10-06 09:11:22 字數 2661 閱讀 9957

djangorestframework框架,簡稱drf

方便快捷的 進行 web api 的開發

也就是說 方便 我們進行 restful 風格介面開發

乙個介面對應著 get、post、put、delete、

pip install djangorestframework
from rest_framework.views import apiview

from rest_framework.response import response

#新增裝置

class

addequipment

(apiview)

:def

get(self,request)

: name = request.get.get(

'equipment'

)print

('-*'*50

)print

(name)

return response(

'lala1'

)def

delete

(self,request)

: name = request.get.get(

'equipment'

)print

('-*'*50

)print

(name)

return response(

'lala1'

)def

post

(self,request)

: name = request.data.get(

'equipment'

)print

('-*'*50

)print

(name)

return response(

'lala1'

)def

put(self,request)

: name = request.data.get(

'equipment'

)print

('-*'*50

)print

(name)

return response(

'lala1'

)

為什麼要進行 axios封裝、是為了在後期方便管理、比方說django的乙個介面改變了,而你前端有1000個vue頁面,在1000個頁面找這乙個介面是很有難度的,所以我們為了方便管理,要進行 axios封裝

如下圖:在 src資料夾下 建立 api資料夾 在其下建立 api.js

在 api.js 中寫

import axios from

'axios'

;//建立 路由

let base =

'';// $ 後接的是 django具體路徑

export

const

addequipment1

= params =>

user/addequipment/`,)

};export

const

addequipment2

= params =>

user/addequipment/`

, params)};

export

const

addequipment3

= params =>

user/addequipment/`

, params)};

export

const

addequipment4

= params =>

user/addequipment/`,)

};//get、post、put、delete四個方法

那應該怎麼呼叫呢

在要呼叫 axios封裝 的vue頁面中

裝置名<

/td>

"text" v-model=

"equipment"

>

<

/td>

<

/tr>

<

/table>

'green' @click=

"submit"

>新增<

/button>

<

/center>

<

/div>

<

/template>

// 引入 axios封裝函式

import

from

'../api/api'

export

default},

methods:

// 呼叫 封裝好的 axios函式,將params 進行傳參

addequipment1

(parmas)

.then

((result)

=>)}

,},}

<

/script>

<

/style>

框架 axios封裝(介面)

1.統一請求方式,方便介面的取用和閱讀 2.簡化請求的 量,減少重複 冗餘 3.介面 4.方便修改 1.設計圖和專案功能 2.後端寫介面 3.提供前端介面 2.前端寫頁面 3.寫功能 4.虛擬介面資料測試功能 5根據真實介面調整前端介面資料 import axios from axios impor...

DRF框架和Vue框架閱讀目錄

vue框架目錄 二 vue框架 二 vue指令 v once指令 v cloak指令 條件指令 v pre指令 迴圈指令 todolist案例 vue例項 計算 監聽 元件 元件資料互動 三 vue框架 三 vue專案搭建和專案目錄介紹 元件 路由 四 vue框架 四 路由跳轉 路由傳參 cooki...

封裝axios和fetch方法

比較兩種請求方式 3.比較fetch和axios fetch並沒有進行封裝,拿到就是格式化後的資料 3.更多詳情請參考 axios和fetch請求詳解 axios封裝 封裝一下axios 它是乙個函式,因為它要攜帶引數 function request then res resolve res ca...