Front-end generates interface files according to Swagger (Application of Pont tool)

The tools described in this article arepont”, meaning “bridge” in French, meaning the bridge between the front and back ends.

Pont converts swagger, RAP, DIP and other interface document platforms into Pont metadata. Using interface metadata, Pont can be highly customized into front-end interface layer code, interface mock platform, and interface test platform.

1 Installation Dependencies

1.1 Use the command line to install NPM i-g pont-engine globally

1.2 Installing the vscode plug-in vscode-Pont (recommended)The plug-in is launched as soon as a valid pont-config.json configuration file is detected in the project. You should see the following status bar at the bottom of the plugin: Method of use​

2 new pont – config. Json

{
  "outDir": ".. /src/api"."originUrl": "https://petstore.swagger.io/v2/swagger.json"."templatePath": "./pont-template"."prettierConfig": {
    "useTabs": false."tabWidth": 2."printWidth": 100."singleQuote": true."trailingComma": "none"."bracketSpacing": true."semi": false}}Copy the code

3 define your own Template file (template)

/* eslint-disable */

import { CodeGenerator, Interface } from 'pont-engine'

/ * * *@desc Gets the requested URL */
export default class MyGenerator extends CodeGenerator {
  getInterfaceContent(inter: Interface) {
    let url = inter.path
    let isIdentification = ' '
    const identification = '{'
    let paramsArray = []
    if (url.includes(identification)) {
      const result = url.split(identification)[0]
      url = `${result}`
      inter.parameters.forEach((item) = > {
        if(item.in ! = ='header') {
          paramsArray.push(item.name)
        }
      })
      isIdentification = '+data? . ' + paramsArray.join(' ')}const paramsCode = inter.getParamsCode()
    const Interfaces = inter.getParamsCode().replace(/class/.'interface')
    const method = inter.method.toUpperCase()
    const description = inter.description.replace(/(\n|\s)/g.' ')
    const contentType =
      inter.consumes && inter.consumes.length ? inter.consumes[0] : 'application/json'

    // Check whether the parameter is optional
    const isRequired = inter.parameters.some((item) = > item.in === 'path' && item.required)
      ? ' '
      : '? '
    return '// request is a self-wrapped axios that handles its own request response import request from '@/utils/request'; import { API_HOST } from '@/constant' import * as defs from '.. /.. /baseClass'; /** * @description${description}
      * @name ${inter.name}* /${Interfaces}
    export async function ${inter.name}(data${isRequired}: Params) {
      const options = {
        method: '${method}',
        url: API_HOST + '${url}' ${isIdentification}.${isIdentification ? ' ' : 'data,'}
        name: '${description}',
        headers: {
          'Content-Type': '${contentType}'
        }
      }
      return request(options);
    }
    export const init = ${inter.response.initialValue};
   `
  }

  /** Get the index entry file for all modules */
  getModsIndex() {
    let conclusion = `
      export {
        The ${this.dataSource.mods .filter((mod) => mod.name ! = ='login')
          .map((mod) => mod.name)
          .join(', \n')}
      };
    `

    // dataSource name means multiple dataSource
    if (this.dataSource.name) {
      conclusion = `
        export const The ${this.dataSource.name} = {
          The ${this.dataSource.mods.map((mod) => mod.name).join(', \n')}
        };
      `
    }

    return `
      The ${this.dataSource.mods .filter((mod) => mod.name ! = ='login')
        .map((mod) => {
          return `import * as ${mod.name} from './${mod.name}'; `
        })
        .join('\n')}

      ${conclusion}
    `
  }

  /** Get the total index entry file code for the interface class and base class */
  getIndex() {
    let conclusion = ` export * from './mods'; `

    // dataSource name means multiple dataSource
    if (this.dataSource.name) {
      conclusion = `
        export { The ${this.dataSource.name} } from './mods/';
      `
    }

    return conclusion
  }
}

Copy the code

4 define your own transformTemplate(data source preprocessing path)

// transfrom.ts filters according to mod.name
import { StandardDataSource } from 'pont-engine'

export default function transform(data: StandardDataSource) {
  if (data.name && data.name.includes(The '*')) {
    data.name = data.name.replace(The '*'.' ')}return data
}

Copy the code

5 Generate the required file

6 Usage

import { qylbPage } from '@api/companyMonit/qylbPage'

qylbPage().then((res) = > {
  console.log(res)
})
Copy the code

Or mount it in a global call