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

 更新时间:2024年03月19日 10:50:23   作者:applebomb  
这篇文章主要介绍了v3-admin-vite 整合pont的详细过程,目前后端的Admin模板使用的是v3-admin-vite,需要整合pont接口,方便前后端统一一体化开发,本文给大家介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

需求

目前后端的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进行传递

整合返回

整合请求后基本上本文可以结束了,但是项目里由于对返回进行了一些新的约定。需要进行调整,此部分直接修改v3-admin-vite的service.ts请求返回部分即可,不在本文赘述

到此这篇关于v3-admin-vite 整合pont的文章就介绍到这了,更多相关v3-admin-vite 整合pont内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 简单的无缝滚动程序-仅几行代码

    简单的无缝滚动程序-仅几行代码

    简单的无缝滚动程序-仅几行代码...
    2007-05-05
  • JavaScript 直接操作本地文件的实现代码

    JavaScript 直接操作本地文件的实现代码

    Chrome、IE和Firefox都纷纷在新版中增强了JavaScript引擎的执行效率,随着JavaScript效率在各大浏览器的显著提高,JavaScript可以做越来越多的事,本地文件API的引入将让很多有趣的功能成为现实。
    2009-12-12
  • JavaScript 原型继承之构造函数继承

    JavaScript 原型继承之构造函数继承

    JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。
    2011-08-08
  • js自制图片放大镜功能

    js自制图片放大镜功能

    这篇文章主要为大家详细介绍了js自制图片放大镜功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 微信小程序中视频的显示与隐藏功能

    微信小程序中视频的显示与隐藏功能

    这篇文章主要介绍了微信小程序中视频的显示与隐藏,思路大概是定义一个标记变量,控制视频的播放与暂停,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • JavaScript中创建对象的模式汇总

    JavaScript中创建对象的模式汇总

    本文给大家js创建对象的模式包括对象字面量,工厂模式,构造函数模式,原型模式,结合构造函数和原型模式,原型动态模式 ,感兴趣的朋友参考下
    2016-04-04
  • javascript:history.go()和History.back()的区别及应用

    javascript:history.go()和History.back()的区别及应用

    为提高用户体验度,可能会使用到刷新 前进 后退等相关更能,本文将以此问题详细介绍javascript:history.go()和History.back()的区别及应用,需要的朋友可以参考下
    2012-11-11
  • 微信小程序开发之左右分栏效果的实例代码

    微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • js实现浏览本地文件并显示扩展名的方法

    js实现浏览本地文件并显示扩展名的方法

    这篇文章主要介绍了js实现浏览本地文件并显示扩展名的方法,涉及javascript文件上传及字符串操作的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JavaScript仿京东放大镜效果

    JavaScript仿京东放大镜效果

    这篇文章主要为大家详细介绍了JavaScript仿京东放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论

?


http://www.vxiaotou.com