Before you

The current code generator is basically based on the database table to generate the corresponding front-end and back-end code, the advantage is that the front-end and back-end one-time. But in the actual development, a lot of business is the need to connect the table, so in this case, according to the interface directly generated before the code, it eliminates the time with the background field, also eliminates the very copy operation.

From there, I came up with the idea of generating front-end code generators based on interfaces. Because we have two kinds of API documents, and vue2+ Element and vue3+ Ant + TS frameworks in the front end, three kinds of code generators have been extended.

Train of thought

Front-end code generator, in a nutshell:

The first step is to get the input/output parameter of the interface from the interface document and format the input/output parameter into specific JSON

The second step is to extract the code template based on your project, combined with tables and form components

The third step is to generate VUE, JS and routing files through the JSON and code templates of the first and second steps

Introduction to the

This project uses puppeteer to read the interface document web page, obtain interface links, input parameters, output parameters, etc., and record semi-generated JSON in a specific format.

Technical solution

I used the crawler framework Puppeteer to obtain the input/output parameters of the interface in the interface document. According to the obtained input/output parameters and combined with the code template, I generated the add, delete, change and check files actually put into the project, so that the add, delete, change and check basically need no code. At the same time support audit and other table operations

Generate the file via fs.writefile

instructions

So far the project has only given code to generate vue2+ Element from the interface. The code is generated based on a specific component. Because the project is to coordinate with the company’s interface documents, to generate the company’s background management website, high customization, so this project for other friends, can be used for reference, may also modify the template to achieve their own project code generation. For other exchanges, please contact me.

Table, form components see the components directory in the project, this needs to be imported globally. See the components directory

There is also code to generate vue3+typescript+ Ant, not yet published.

Component description

Background management system mainly consists of form + page form, and form \ form one by one to write, especially has its own style requirements, you need to add a class like pretty trouble, sometimes a spelling mistake copying \ didn’t note that might be looking for half a day, looks like trouble, I prefer type configuration code, All stand on the shoulders of tall people and change out this form, form component. Do not spray if you do not like it.

Configuration instructions

The scale of the configuration

// Applies to scale configuration
export const config = {
  href: 'http://xxx.cn/'.serverName: 'AdminStoreContractService'.pages: [{
    filePath: 'promotionNew'.// list \ new \ fix page path
    chunkName: 'base'.// chunkName is used for the require.ensure packing parameter in the route
    list: { / / list
      fileName: 'pn-list'.// List file names
      name: 'list'./ / the menu name
      apiName: 'listStoreContract'.// List interface name
      exportFile: { // Export [optional]
        apiUrl: ' '.downFileName: ' '}},modify: { // (Modify \ Add) [Optional]
      fileName: 'modify'./ / page name
      apiName: 'saveStoreContract'./ / interface name
      detailApi: 'getStoreContractById'.// View details interface name (used to view details and edit)
      hasEdit: true
    },
    opts: [ // table row operations
      {
        apiName: 'modifyStoreContractStatus'./ / interface
        confrimMsg: 'Confirm review of this record'.// If there is no confirmation, request directly
        text: 'review'}}}]]Copy the code

Configuration of the Swagger API

// Applies to the swagger API configuration
export const swaggerConfig = {
  href: 'http://xxx.com'.serverName: 'mini-new-promotion-service'.baseUrl: '/promotion-new/manager/'.pages: [{
    filePath: 'promotionNew'.// list \ new \ fix page path
    chunkName: 'base'.// chunkName is used for the require.ensure packing parameter in the route
    list: { / / list
      fileName: 'pn-list'.// List file names
      name: 'list'./ / the menu name
      apiName: 'getPromotionList'.// List interface name
      exportFile: { // Export [optional]
        apiUrl: ' '.downFileName: ' '}},modify: { // (Modify \ Add) [Optional]
      fileName: 'modify'./ / page name
      apiName: 'savePromotion'./ / interface name
      detailApi: 'promotionDetail'.// View details interface name (used to view details and edit)
      hasEdit: true
    },
    opts: [ // table row operations
      {
        apiName: 'updPromotionConfigStatus'./ / interface
        confrimMsg: 'Confirm review of this record'.// If there is no confirmation, request directly
        text: 'review'}}}]]Copy the code

Code generation command

Currently, this project supports two KINDS of API documents, the first one supports Swagger API; The second supports scale[which has fewer users]

Before you execute the command in the config. Ts/swaggerConfig ts will good configuration changes, such as need the website of the generated code is configured

• Swagger’s code command

yarn run scr
Copy the code

• Scale’s code command

yarn run start
Copy the code

Generated files:

No more nonsense, on the code:

https://gitee.com/myreborns/curd
Copy the code

Generator continues to update, welcome you to communicate with friends, if it is good, give a thumbs-up.

Scale \ swagger