快捷導(dǎo)航

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

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

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

需求

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

安裝PONT

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

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

格式統(tǒng)一化

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

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

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

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

整合請(qǐng)求

前面弄完了，v3和pont的請(qǐng)求還是各干各的。需要將它們整合起來(lái)。

v3的請(qǐng)求在src/util/services.ts

pont的請(qǐng)求在src/services/pontCore.ts

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

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

這個(gè)干了兩個(gè)事情：

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

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

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

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

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)
  })

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

/** 擴(kuò)展了jsonPost參數(shù) */
export interface AxiosRequestConfigEx extends AxiosRequestConfig {
  jsonPost?: boolean
}
/** 創(chuàng)建請(qǐ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編碼，少量超大對(duì)象使用jsonPost
      },
      timeout: 10000, //默認(rèn)10秒請(qǐng)求超時(shí)
      baseURL: import.meta.env.VITE_BASE_API,
      data: {}
    }
    // 將默認(rèn)配置 defaultConfig 和傳入的自定義配置 config 進(jìn)行合并成為 mergeConfig
    const mergeConfig = merge(defaultConfig, config)
    if (config.jsonPost == true) {
      mergeConfig.headers['content-type'] = 'application/json'
    }
    return service(mergeConfig)
  }
}

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