前端項目中接口實現

本篇文章基於 先後端徹底分離，服務端只提供HTTP API，前端經過Ajax與服務端進行通訊

爲公司實習中遇到的後臺管理系統中遇到的接口使用的總結。

1.從models文件夾中寫最基本的，state中須要定義引用的數據，並引入

state中就直接寫定義的接口

須要經過get post發送請求來獲取的在service文件夾下寫接口，且寫爲函數，經過在主代碼中用函數調用

async postActivityNew(row: ActivityItem) {
    try {
      tt.verify(!!row.desc, "NotFound", "描述不能爲空")
      tt.verify(!!row.subject, "NotFound", "名字不能爲空")
      let res = await BookAc.postActivityNew(row.subject, row.desc)
      tt.check(res)
      this.setState({
        isAdd: false,
        editingKey: -1
      })
      this.getActivityList()
    } catch (e) {
      toast.catchError(e)
    }
  }

複製代碼

service文件夾中定義接口

export function postActivityNew (desc: string,subject: string) {
    return http.post<NewActivityResponse>('/**/api/**/activity/new', {
      desc,
      subject
    })
  }
複製代碼

其中NewActivityResponse接口又須要再去models文件夾中定義。

export interface NewActivityResponse extends BaseResponse {
  desc: string
  subject: string
}
複製代碼

接口對應數據若是有問號？表明該數據可選 ， 別的頁面也能夠引用這個接口中定義的部分數據。