前端项目中接口实现

本篇文章基于 先后端彻底分离，服务端只提供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
}
复制代码

接口对应数据若是有问号？表明该数据可选 ， 别的页面也能够引用这个接口中定义的部分数据。