Build a project from scratch without working scaffolding! Recently discovered a high appearance level of the front and back end separation scaffold SA-Plus, with its own code generator, can generate front-end, back-end, API document code, recommended to everyone!

SpringBoot e-commerce project mall (50K + STAR) address: github.com/macrozheng/…

Sa – plus introduction

A fast development framework based on SpringBoot, built-in code generator.

Project Features:

  • Integrate common development functions, including file upload, role authorization, global exception handling, Redis console, API log statistics, etc.
  • Built-in code generator, highly automated code generation, one-click generation of back-end, front-end and API documentation code.
  • By adding comments to the table to generate code, the database table is set up and the project is halfway through development.

The project architecture

The technology stack used by the FRONT and back ends of the SA-Plus is still very mainstream, so let’s take a look.

Using the Technology stack

  • Backend stack: MySql 5.7, SpringBoot, Mybatis-Plus, Druid, PageHelper, Redis, Sa-Token, Lombok, Hutool, FastJson

  • Front-end stack: Vue, Element-UI, WangEditor, Jquery, Layer, Swiper, Echarts

Module is introduced

  • Sp-server: SpringBoot back-end code.
  • Sp-admin: front-end code of the Vue management system.
  • Sp-apidoc: Docsify API document code.
  • Sp-generate: Code generator that generates backend, front-end, and API documentation.
  • Sp-devdoc: Sa-plus local document.
  • Doc: other files for storing SQL scripts.

Quick start

Sp-server, SP-admin and SP-APidOC are the main project modules of SA-Plus. Let’s start them first.

sp-server

  • Create it in MySql firstsp-devDatabase, import projectdocIn the directorysa-plus.sqlThe following table will be generated after the script is imported successfully.

  • willsp-serverThe module is imported into IDEA, and the project structure is as follows after successful import.

  • Modify the configuration file of the projectapplication-dev.yml, modify MySql and Redis configuration to your own connection configuration;
spring: 
    # data source configuration
    datasource: 
        type: com.alibaba.druid.pool.DruidDataSource
        url: JDBC: mysql: / / 127.0.0.1:3306 / sp - dev? useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
        username: root
        password: root

    # redis configuration
    redis:
        # Redis database index (default 0)
        database: 1
        # Redis server address
        host: 127.0. 01.
        # Redis server connection port
        port: 6379
        # Redis server connection password (default null)
        # password: 
        Connection timeout (ms)
        timeout: 5000ms
Copy the code
  • Run startup classSpServerApplicationthemainAt this point, the back-end service is successfully started.
2021-08-09 16:46:00.478 INFO --> Initializing ExecutorService 'applicationTaskExecutor' ____ ____ ___ ____ __ ____ __ [__ | | (| | | | | / _ ___ | \ | ___] | | | | __ | | _ | ___ | | DevDoc: http://sa-token.dev33.cn (v1.24.0) lot: The 2021-08-09 https://github.com/dromara/sa-token 16:46:00. 744 INFO - > the Initializing the ExecutorService 'taskScheduler' 2021-08-09 16:46:00.778 INFO --> Starting ProtocolHandler [" HTTP-NIO-8099 "] 2021-08-09 16:46:00.792 INFO --> Tomcat started on port(s): 8099 (HTTP) with context Path '' 2021-08-09 16:46:00.802 INFO --> Started SpServerApplication in 3.871 seconds (JVM) Running for 4.797) -- -- -- -- -- -- -- -- -- -- -- -- -- sa - plus (dev) start success - by the end of the 2021-08-09 16:46:00 -- -- -- -- -- -- -- -- -- -- -- -- --Copy the code

sp-admin

  • willsp-adminThe module is imported into IDEA, and the project structure is as follows after successful import.

  • Open theindex.htmlPage, click the button in the upper right corner to run to the browser;

  • After logging in to the system using the default account and password, you can access the systemsa-plusThe home page, the interface is pretty cool;

  • We can experience it a little bitsa-plusBasic functions, such asRedis consoleFunction, you can view Redis status and manage data in Redis;

  • There areAPI request logFunction to view API request records and request time;

  • And access managementRole managementFunction to create roles and assign permissions to roles;

  • And access managementMenu managementIn fact, we can find itsa-plusThe menu and permission are bound together, and the menu is obtained from the route of the front end. Assigning the menu to the role means assigning the permission under the menu. In this way, it is more difficult to achieve the interface-level permission.

  • And access managementUser managementCan manage user information.

sp-apidoc

  • willsp-apidocThe module is imported into IDEA, and the project structure is as follows after successful import.

  • Open theindex.htmlClick the button in the upper right corner to go to the browser. At this point, we can find that there is no content in the API documentation.

Code generator

Let’s take a look at the magic of a code generator that generates front-end, back-end, and API documentation code directly from database tables.

  • willsp-generateThe module is imported into IDEA, and the project structure is as follows after successful import.

  • Then import the test data into MySql and import the projectdocIn the directorytest-data.sqlAfter the script is imported successfully, the following table is added.

  • I’m going to modifySpGenerateApplicationMySql connection configuration and code generation directory configuration in
@SqlFlySetup
@SpringBootApplication
public class SpGenerateApplication {
   
   // Run the code generator directly
   public static void main(String[] args) {

        / / start springboot
        SpringApplication.run(SpGenerateApplication.class, args);


        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = set the connection information = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        FlyConfig config = new FlyConfig();
        config.setDriverClassName("com.mysql.jdbc.Driver");
        config.setUrl("JDBC: mysql: / / 127.0.0.1:3306 / sp - dev? useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC");
        config.setUsername("root");
        config.setPassword("root");
        config.setPrintSql(true);        // Whether to print SQL
        FlyObjects.setConfig(config);    // Inject into the frame


        / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = some global Settings = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
        GenCfgManager.cfg
                .setProjectPath("D:/developer/demo/sa-plus/")    // Total project address (generated code path)
                .setServerProjectName("sp-server")                // Server - project name
//.setServerProjectName("sp-com/sp-core") // Server - project name (sp-com multi-module version fill this format)
                .setCodePath("src/main/java/")                    // Server code - storage path
                .setPackagePath("com.pj.project")                // Server code - total package name
                .setPackage_utils("com.pj.utils.sg.*")            // Server code -util class package address
                .setAuthor("macrozheng");                        // Server code - code author}}Copy the code
  • Then run the startup classSpGenerateApplicationthemainMethod to generate code, and when successfully executed,sp-servertheprojectThe back-end code is generated under the package;

  • sp-adminthesa-htmlThe front-end code will be generated in the directory, and it will be in themenu-list.jsTo add menu information;

  • sp-apidoctheprojectAPI documentation code is also generated under the directory;

  • After re-running the front and back end code, we can’t see the new menu for the time being. We still need to assign permissions to roles to view it.

  • Then we can see that for the goods list, the list page and add page have been generated for us;

  • Actually,sa-plusThe code is generated by parsing comments in the database table. We can take a look at the SQL statement for the goods table, which contains many[]The comments,sa-plusThese are the rules that generate the code;
CREATE TABLE `ser_goods` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'id [num no-add]',
  `name` varchar(200) DEFAULT NULL COMMENT [text j=like]',
  `avatar` varchar(512) DEFAULT NULL COMMENT [img],
  `image_list` varchar(2048) DEFAULT NULL COMMENT [img-list],
  `content` text COMMENT [f],
  `money` int(11) DEFAULT '0' COMMENT [num] [num],
  `type_id` bigint(20) DEFAULT NULL COMMENT '[num]',
  `stock_count` int(11) DEFAULT '0' COMMENT [num] [num],
  `status` int(11) DEFAULT '1' COMMENT [J]' Product status (1= shelves,2= shelves) ',
  `create_time` datetime DEFAULT NULL COMMENT 'Create date [date-create]',
  `update_time` datetime DEFAULT NULL COMMENT 'Update date [date-update]'.PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1005 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT=\n[table icon=el-icon-apple]\n[fk-s js=(type_id=sys_type. Id), show=name.;
Copy the code
  • Here are more rules, you can check the table below;

  • Finally, let’s take a look at the generated API documentation. We have the CRUD interface documentation for the commodity list, which is very detailed.

  • And the API documentation also provides interface testing function, isn’t it very sweet!

conclusion

Through the above wave of practice, we can see that SA-Plus is indeed an interesting framework. It not only provides the basic functions of the project, but also provides the code generator, which can generate the front and back end and API document code with one key, greatly improving the development efficiency. But no code generator is a panacea, and complex code still needs to be written by hand. Sa-plus’s permissions function binds menus and permissions together, which is not very flexible to use, but could be improved.

The resources

Official document: sa-plus.dev33.cn/

The project address

Gitee.com/click33/sa-…

In this paper, making github.com/macrozheng/… Already included, welcome everyone Star!