常州网站建设制作,视频点播网站建设,那个公司做app,做网站编程在程序在vue2中#xff0c;要实现一些方法#xff08;增删改查#xff09;一般都是写在一起的。如下图所示#xff1a; 但是在vue3中#xff0c;实现一个方法需要用到很多文件。 方法定义方法如下#xff1a;
export function classSign(phone: string) {return sign_reques…在vue2中要实现一些方法增删改查一般都是写在一起的。如下图所示 但是在vue3中实现一个方法需要用到很多文件。 方法定义方法如下
export function classSign(phone: string) {return sign_requestBoolean({url: sign?phone${phone},method: get})
}export function editBlogCount(data: BolgCountData) {return sign_request({url: blog/blog-info-change,method: post,data})
} service文件中定义方法
/** 创建请求方法 */
function createRequest(service: AxiosInstance) {return function T(config: AxiosRequestConfig): PromiseT {const token getToken()const defaultConfig {headers: {// 携带 TokenAuthorization: token ? Bearer ${token} : undefined,Content-Type: application/json},timeout: 5000,baseURL: /sign-system,data: {}}// 将默认配置 defaultConfig 和传入的自定义配置 config 进行合并成为 mergeConfigconst mergeConfig merge(defaultConfig, config)return service(mergeConfig)}
}/** 用于网络请求的实例 */
const service createService()
/** 用于网络请求的方法 */
export const sign_request createRequest(service)post请求中用到的参数在order.ts中定义
//入参定义
export interface NoSignStudentList {id: stringname: stringblogCount: numberblogAddress: string
}export interface BolgCountData {phone: stringblogCount: number
}//出参定义
export type GetTableResponseData ApiResponseData{list: GetTableData[]total: number
}export type GetNoSignData ApiResponseData{noSignStudentListI: NoSignStudentList[]
}在vue文件中首先给按钮绑定点击事件此处和vue2相同 之后在script中定义方法 到这里完整的方法就可以实现了虽然比vue2稍微复杂一点但是熟练后编写更加方便。
