The opening is introduced

In PC Web development, table-form classes are often the most needed, so in order to avoid redevelopment, I have put forward this series of articles to share my experience in developing table-form classes quickly. We hope you can discuss and share all kinds of weird demands you have encountered. Let’s kill “table-form” together!

From the So Easy series — Using code generators to generate concise, readable code (Chapter 1)

Note: For the convenience of demonstration, this chapter mainly uses code generator to directly generate front-end and back-end double-ended code. You need to build the back-end by yourself, and you will need simple back-end knowledge such as Spring Boot. If the front-end is recommended to use the NPM package filter-form-table-modal directly (click on me to see), the following articles will go into the details of how to use the NPM package.

Introduces the code generator

Preparation stage

Download the source code

git clone

The source code for the code generator is divided into two parts:

  • code-gen-fontend: The front-end interface of the code generator; Technology stack:vue-element
  • code-gen-backend: back-end service of the code generator; Technology stack:spring boot

Modify thecode-gen-backendThe configuration file of

Modify theapplication.yml

MySQL > alter user name, password, database name to connect to (default code-gen);


TablePrefix is the default prefix for the main table, but it can be changed by default.

Create the business primary table

Create the business master table in the database you want to connect to

Note: Each table must have a column that is a primary key; The table comment automatically becomes the Label for the generated code.

CREATE TABLE TB_REGION (regionID INT NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT 'CELL ID ', RegionTitle VARCHAR(40) NOT NULL COMMENT 'cell title', regionContact VARCHAR(10) DEFAULT' COMMENT ', RegionMobile CHAR(11) COMMENT 'regionLogo VARCHAR(300) COMMENT ', regionLogo VARCHAR(300) COMMENT ', RegionRemark VARCHAR(100) DEFAULT "COMMENT", regionProvince CHAR(10) DEFAULT ", regionCity CHAR(10) DEFAULT ", regionCity VARCHAR(10) DEFAULT ", regionRemark VARCHAR(100) DEFAULT" regionDistict CHAR(10) DEFAULT '', regionAddress CHAR(50) DEFAULT '', regionLongitude TINYINT UNSIGNED, regionLatitude TINYINT UNSIGNED, regionCreator CHAR(50), regionCreatetime TIMESTAMP default CURRENT_TIMESTAMP, regionUpdatetime TIMESTAMP default CURRENT_TIMESTAMP, regionStatus TINYINT UNSIGNED default 0, regionMiniprogram VARCHAR(100), creatorName VARCHAR(50) )ENGINE=InnoDB DEFAULT CHARSET=utf8;

Start the project

  1. runcode-gen-backend
  2. Open http://localhost/web/index.html

Specific steps to use the code generator

Here is a step

Video presentation

Code generator using video – article 1(click me to see)

Note: Around the 14th to 15th minute of the video, there was an error when the back-end code was merged, because the table fields I built the table before were not standardized. For details, please see the correction video. There will be no problem if you build the table reasonably during your own operation.

Video Errors (Click me to view)

Merge the generated code into an existing project

Currently, to ensure flexibility and ease of integration into existing projects with different front-end architectures, manual consolidation is required; A new feature will be added later: provide schema templates, the code generator will scan the original project directory, and if the original project and the provided schema template directory have the same structure, the code can be automatically merged.

Front-end code merge

The original project code:

The combined code:

Backend code merging

The original project code:

The combined code:


Low code has gotten a lot of fire in recent years, but it’s often relegated to the “professional programmers don’t like it, and non-professionals don’t use it.” However, as the backend ecology becomes more and more mature, the framework we use (VUE, Spring Boot, etc.) is actually just a kind of complex low code. The “low code” also blocks the low-level details, and most of the time we just need to do the CURD of the business. Therefore, we programmers don’t have to resist low code, but “good low code” allows us to deliver tasks faster.

The direction of low code, what is good low code? My personal experience summarizes the following points:

  1. Open source and mainstream technology stack: means scalability, the generated code can be customized and modified by professional programmers, and can be easily integrated into the original project so that professionals won’t reject it. He who wins ecology wins the world.
  2. Business scenarios are clear: Each category of low-code products should target a specific business scenario. The business process is clear, such as: “search form – form – popover form”. And usually low-code products do not pursue personalized “good-looking (complex linkage – dynamic effect)”, because “good-looking (complex linkage – dynamic effect)” will require a lot of customization, and the reuse advantage of low code in such scenarios will not be reflected. But “static beauty” can be achieved by customizing the skin.
  3. Low code for the front and back end: the main push back and back end separation, so the generated source code should be including the front and back end, or simply one end, the workload is still not reduced.

All right! Today share here, see the friends here, if you think the article is helpful to you, don’t forget to thumb up message!