v3-admin-vite 整合pont的详细过程_Javascript

需求

目前后端的admin模板使用的是v3-admin-vite，需要整合pont接口，方便前后端统一一体化开发

安装pont

按照官方的文档，将pont engine安装好，然后在项目根目录执行pont start。注意生成代码路径要修改一下，因为v3-admin-vite是放到src下

数据源是swagger的api地址，swagger配置方式略。下一步在vscode里安装pont工具，这样就可以生成js api代码了，但是在生成前，建议修改一下配置。

格式统一化

如果直接生成，生成的代码会由于 prettier 的关系出现不少错误提示。解决的办法是参考根目录下v3-admin-vite的prettier.config.js，修改一下根目录下的pont-config.json，让它们保持一致

然后vscode下切换到pont面板以此点击拉取远程数据源，生成接口代码：

然后代码就生成好了，生成的代码是这么个对应关系：

每个导出的方法一个ts文件

整合请求

前面弄完了，v3和pont的请求还是各干各的。需要将它们整合起来。

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

pont的请求在src/services/pontcore.ts

修改pontcore.ts，以适配v3-admin的请求。实际上，除了个别状态码有差别，大部分也是兼容ccframe的，但是有几个问题

1）请求长度问题，pont默认里post请求是将所有的参数生成到url请求的，见这部分代码

这个干了两个事情：

1）把路径占位符例如{id}替换为param里的id，并从param里删除

2）把param剩余的参数挂到url后面

所以如果post发送参数过长，这样会导致url请求超过承载长度，不适合发送大量的数据，因此需要扩充表单发送的方式，当post请求时以表单编码发送。

本着最小修改原则，我们只需要修改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)
  })

能够看到请求输出。但是报找不到参数，发现请求被编码成application/json格式了，当然接收不到了（如果要接收必须用@requestbody）。由于我们请求大部分都是form格式的key-value数据，很少有结构化的数据，因此，需要默认为application/x-www-form-urlencoded编码，但是预留一个参数可以传递json数据支持结构化数据，因此在模板里添加了一个jsonpost变量，当开启时，采用application/json编码，修改src/utils/service.ts的请求部分如下：

/** 扩展了jsonpost参数 */
export interface axiosrequestconfigex extends axiosrequestconfig {
  jsonpost?: boolean
}
/** 创建请求方法 */
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' //默认form编码，少量超大对象使用jsonpost
      },
      timeout: 10000, //默认10秒请求超时
      baseurl: import.meta.env.vite_base_api,
      data: {}
    }
    // 将默认配置 defaultconfig 和传入的自定义配置 config 进行合并成为 mergeconfig
    const mergeconfig = merge(defaultconfig, config)
    if (config.jsonpost == true) {
      mergeconfig.headers['content-type'] = 'application/json'
    }
    return service(mergeconfig)
  }
}

这样配合模板里传入的jsonpost变量，当jsonpost传true时，可以使用json body进行传递