快捷導(dǎo)航

v3-admin-vite 整合pont的詳細(xì)過程

更新時間：2024年03月19日 10:50:23 作者：applebomb

這篇文章主要介紹了v3-admin-vite 整合pont的詳細(xì)過程,目前后端的Admin模板使用的是v3-admin-vite,需要整合pont接口,方便前后端統(tǒng)一一體化開發(fā),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

需求

目前后端的Admin模板使用的是v3-admin-vite，需要整合pont接口，方便前后端統(tǒng)一一體化開發(fā)

安裝PONT

按照官方的文檔，將pont engine安裝好，然后在項目根目錄執(zhí)行pont start。注意生成代碼路徑要修改一下，因為v3-admin-vite是放到src下

數(shù)據(jù)源是swagger的API地址，swagger配置方式略。下一步在VSCode里安裝pont工具，這樣就可以生成js api代碼了，但是在生成前，建議修改一下配置。

格式統(tǒng)一化

如果直接生成，生成的代碼會由于 prettier 的關(guān)系出現(xiàn)不少錯誤提示。解決的辦法是參考根目錄下v3-admin-vite的prettier.config.js，修改一下根目錄下的pont-config.json，讓它們保持一致

然后VSCode下切換到pont面板以此點擊拉取遠(yuǎn)程數(shù)據(jù)源，生成接口代碼：

然后代碼就生成好了，生成的代碼是這么個對應(yīng)關(guān)系：

每個導(dǎo)出的方法一個ts文件

整合請求

前面弄完了，v3和pont的請求還是各干各的。需要將它們整合起來。

v3的請求在src/util/services.ts

pont的請求在src/services/pontCore.ts

修改pontCore.ts，以適配v3-admin的請求。實際上，除了個別狀態(tài)碼有差別，大部分也是兼容ccframe的，但是有幾個問題

1）請求長度問題，pont默認(rèn)里post請求是將所有的參數(shù)生成到URL請求的，見這部分代碼

這個干了兩個事情：

1）把路徑占位符例如{id}替換為param里的id，并從param里刪除

2）把param剩余的參數(shù)掛到URL后面

所以如果POST發(fā)送參數(shù)過長，這樣會導(dǎo)致URL請求超過承載長度，不適合發(fā)送大量的數(shù)據(jù)，因此需要擴充表單發(fā)送的方式，當(dāng)post請求時以表單編碼發(fā)送。

本著最小修改原則，我們只需要修改pontTemplate.ts，不使用PontCore，采用v3 admin的請求：

import { Interface, BaseClass, Property, CodeGenerator, Surrounding } from 'pont-engine'
export default class MyGenerator extends CodeGenerator {
  getInterfaceContentInDeclaration(inter: Interface) {
    const requestParams = inter.getRequestParams()
    const paramsCode = inter.getParamsCode('Params')
    return `
      export ${paramsCode}
      export type Response = ${inter.responseType}
      export const init: Response;
      export function request(${requestParams}): Promise<Response>;
    `
  }
  getBaseClassInDeclaration(base: BaseClass) {
    const originProps = base.properties
    base.properties = base.properties.map((prop) => {
      return new Property({
        ...prop,
        required: false
      })
    })
    const result = super.getBaseClassInDeclaration(base)
    base.properties = originProps
    return result
  }
  getInterfaceContent(inter: Interface) {
    //const method = inter.method.toUpperCase()
    const axiosParamKey = 'GET' == inter.method.toUpperCase() ? 'params' : 'data' // 如果是GET，放param，如果是POST/PUT，放data
    const requestParams = inter.getRequestParams(this.surrounding)
    const paramsCode = inter.getParamsCode('Params', this.surrounding)
    return `
    /**
     * @desc ${inter.description}
     */
    import * as defs from '../../baseClass';
    import { request as service } from '../../../utils/service';
    export ${paramsCode}
    export const init = ${inter.response.getInitialValue()};
    export function request(${requestParams}, jsonPost: boolean = false) {
      return service({url:"${inter.path}", ...${inter.getRequestContent()}, ${axiosParamKey}: params, jsonPost})
    }
   `
  }
}

嘗試一下：

import './../../services/'
API.commonAdmin.doLogin
  .request({ loginId: 'admin', userPsw: 'ssss', sid: '8888', validateCode: 'nere' })
  .then((res) => {
    console.log('*****', res)
  })

能夠看到請求輸出。但是報找不到參數(shù)，發(fā)現(xiàn)請求被編碼成application/json格式了，當(dāng)然接收不到了（如果要接收必須用@RequestBody）。由于我們請求大部分都是form格式的key-value數(shù)據(jù)，很少有結(jié)構(gòu)化的數(shù)據(jù)，因此，需要默認(rèn)為application/x-www-form-urlencoded編碼，但是預(yù)留一個參數(shù)可以傳遞json數(shù)據(jù)支持結(jié)構(gòu)化數(shù)據(jù)，因此在模板里添加了一個jsonPost變量，當(dāng)開啟時，采用application/json編碼，修改src/utils/service.ts的請求部分如下：

/** 擴展了jsonPost參數(shù) */
export interface AxiosRequestConfigEx extends AxiosRequestConfig {
  jsonPost?: boolean
}
/** 創(chuàng)建請求方法 */
function createRequest(service: AxiosInstance) {
  return function <T>(config: AxiosRequestConfigEx): Promise<T> {
    const token = getToken()
    const defaultConfig = {
      headers: {
        // 攜帶 Token
        Authorization: token ? `Bearer ${token}` : undefined,
        'Content-Type': 'application/x-www-form-urlencoded' //默認(rèn)form編碼，少量超大對象使用jsonPost
      },
      timeout: 10000, //默認(rèn)10秒請求超時
      baseURL: import.meta.env.VITE_BASE_API,
      data: {}
    }
    // 將默認(rèn)配置 defaultConfig 和傳入的自定義配置 config 進行合并成為 mergeConfig
    const mergeConfig = merge(defaultConfig, config)
    if (config.jsonPost == true) {
      mergeConfig.headers['content-type'] = 'application/json'
    }
    return service(mergeConfig)
  }
}

這樣配合模板里傳入的jsonPost變量，當(dāng)jsonPost傳true時，可以使用json body進行傳遞