The opening is introduced

Forms-form classes are often the most in demand in PC-side Web development, so to avoid duplication, this series of articles is to share my experience with developing forms-form classes quickly. We hope that you can discuss together, share all kinds of weird requirements you meet, and let’s kill “form-form” together!

Complex Form pop-ups from the So Easy series — Using code Generators to generate concise and readable code (Chapter 1)

Note: For the convenience of demonstration, this chapter mainly uses the code generator to directly generate the front and back end double-end code. You need to build the back end by yourself, which requires simple back-end knowledge such as Spring Boot. For the front-end, it is recommended to use the NPM package filter-form-table-modal directly. The details of the NPM package will be described in the following articles.

Introduction to code generators

Preparation stage

Download the source code

git clone https://github.com/ailuhaosi/code-gen
Copy the code

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

  • code-gen-fontend: front-end interface for code generator Technology stack:vue-element
  • code-gen-backend: back-end services for code generators; Technology stack:spring boot

Modify thecode-gen-backendConfiguration file of

Modify theapplication.yml

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

Modify thegenerator.properties

TablePrefix (tb_) : tablePrefix (tb_) : tablePrefix (tb_)

Create a main service table

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

Note: each table must have a column that is a primary key; Table comments automatically become labels for generated code.

CREATE TABLE tb_region( 
        regionId INT NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT 'community id',
        regionTitle VARCHAR(40) NOT NULL COMMENT The title 'village',
        regionContact VARCHAR(10) DEFAULT ' ' COMMENT 'Contacts',
        regionMobile CHAR(11) COMMENT 'Contact Number',
  	    regionLogo VARCHAR(300) COMMENT 'Zone icon',
	    regionRemark VARCHAR(100) DEFAULT ' ' COMMENT 'note',
    	regionProvince CHAR(10) DEFAULT ' ',
	    regionCity CHAR(10) 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;
Copy the code

Start the project

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

How to use the code generator

Here is a step

Video presentation

Code Generator using video – Article 1(click me to view)

Note: before and after 14 ~15 minutes of the video, there was an error in the merge of the back-end code, because the table fields I built before were not standardized. For details, the specification requires you to see the error-correction video. There will be no problem as long as you build the table reasonably in your own operation.

Video errata (click me to view)

Merge the generated code into the existing project

At present, manual consolidation is required to ensure flexibility and facilitate integration into original projects with different front-end and back-end architectures; New functionality will be added later: if the schema template is provided, the code generator will scan the original project directory, and if the original project and the schema template directory have the same structure, the code will be merged automatically.

Front-end code merge

The original project code: https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-org/code-gen-fontend-demo-org

The combined code: https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-1/code-gen-fontend-demo-1

Back-end code merge

The original project code: https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-org/code-gen-backend-demo-org

The combined code: https://github.com/ailuhaosi/my-blog-demo/tree/master/code-gen-demo-1/code-gen-backend-demo-1

conclusion

Low code has gotten a lot of buzz in recent years, but it’s often relegated to the “professional programmers don’t like it, non-professionals don’t use it.” But as the ecosystem of the front and back end matures, the frameworks we use (Vue, Spring Boot, etc.) are really just complex low code, and the “low code” is masking the low-level details, and most of the time we just do business CURD. Therefore, we programmers don’t have to resist low code, but rather “the good low code” allows us to deliver tasks faster.

Where is low code going? What is good low code? My personal experience summarizes the following points:

  1. Open source and stack mainstream: this means extensibility, low generated code that can be customized and modified by professional programmers, and 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 be targeted at a specific business scenario. The business process is clear, for example: “Search form – table – popup 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 advantages of low code reusability in such scenarios will not be reflected. But “looking good statically” can be achieved by customizing skin.
  3. Low code for the front and back end: currently the main push for the front and back end separation, so the generated source code should include the front and back end, otherwise the pure end, the workload is still not reduced.

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