后端

配置文件和依赖

创建一个SpringBoot项目，采用Mybatis-Plus快速构建项目。

application.yml进行配置

server:
  port: 80

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/ems?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimeZone=GMT%2B8
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      logic-delete-field: flag
      logic-delete-value: 1
      logic-not-delete-value: 0

pom.xml依赖的导入

    <dependencies>
        <!--spring-boot-starter-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <!--spring-boot-starter-web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <!--mysql-connector-java-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
<!--            <version>3.0.5</version>-->
            <version>3.5.2</version>
        </dependency>
        <!-- 代码生成器 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!--单元测试-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
        <!--druid数据源-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.4</version>
        </dependency>
    </dependencies>

user数据库表的数据库定义语言

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `name` varchar(30) DEFAULT NULL COMMENT '姓名',
  `age` int DEFAULT NULL COMMENT '年龄',
  `email` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '邮箱',
  `gmt_create` datetime DEFAULT NULL COMMENT '创建时间',
  `gmt_modified` datetime DEFAULT NULL COMMENT '修改时间',
  `version` int unsigned DEFAULT '1' COMMENT '版本信息',
  `deleted` int(1) unsigned zerofill DEFAULT '0' COMMENT '逻辑删除',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

新版本 mybatis-plus自动生成架构

<!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
<!--            <version>3.0.5</version>-->
            <version>3.5.2</version>
        </dependency>
        <!-- 代码生成器 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.2</version>
        </dependency>

@Test
    public void testNew(){
        FastAutoGenerator.create("jdbc:mysql://localhost:3306/ems?&characterEncoding=utf-8&userSSL=false", "root", "123456")
                .globalConfig(builder -> {//全局配置
                    builder.author("coffeemao") // 设置作者
                            .enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .disableOpenDir()
                            .outputDir(System.getProperty("user.dir")+"/src/main/java"); // 指定输出目录
                })
                .packageConfig(builder -> {//包配置
                    builder.parent("com.mao") // 设置父包名
                            .moduleName("test") // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.xml,System.getProperty("user.dir")+"/src/main/resources/mybatis/mapper"));// 设置mapperXml生成路径

                })
                .strategyConfig(builder -> {//策略配置
                    builder.addInclude("user"); // 设置需要生成的表名
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker 引擎模板，默认的是Velocity引擎模板
                .execute();
    }

旧版本mybatis-plus的自动生成架构

    <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0.5</version>
        </dependency>
        <!-- 代码生成器 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.0.5</version>
        </dependency>
        <!-- 模板引擎 -->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.3</version>
        </dependency>

    @Test
    public void testOld(){
//        // 需要构建一个 代码自动生成器 对象
//        AutoGenerator mpg = new AutoGenerator();
//        // 配置策略
//        // 1、全局配置
//        GlobalConfig gc = new GlobalConfig();
//        String projectPath = System.getProperty("user.dir");
//        gc.setOutputDir(projectPath+"/src/main/java");
//        gc.setAuthor("coffee");
//        gc.setOpen(false);
//        gc.setFileOverride(false); // 是否覆盖
//        gc.setServiceName("%sService"); // 去Service的I前缀
//        gc.setIdType(IdType.ID_WORKER);
//        gc.setDateType(DateType.ONLY_DATE);
//        gc.setSwagger2(true);
//        mpg.setGlobalConfig(gc);
//        //2、设置数据源
//        DataSourceConfig dsc = new DataSourceConfig();
//        dsc.setUrl("jdbc:mysql://localhost:3306/ems?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8");
//        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
//        dsc.setUsername("root");
//        dsc.setPassword("123456");
//        dsc.setDbType(DbType.MYSQL);
//        mpg.setDataSource(dsc);
//        //3、包的配置
//        PackageConfig pc = new PackageConfig();
//        pc.setModuleName("demo");
//        pc.setParent("com.mao");
//        pc.setEntity("entity");
//        pc.setMapper("mapper");
//        pc.setService("service");
//        pc.setController("controller");
//        mpg.setPackageInfo(pc);
//        //4、策略配置
//        StrategyConfig strategy = new StrategyConfig();
//        // 设置要映射的表名
//        strategy.setInclude("blog_tags","course","links","sys_settings","user_record");
//        strategy.setNaming(NamingStrategy.underline_to_camel);
//        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
//        strategy.setEntityLombokModel(true); // 自动lombok；
//        strategy.setLogicDeleteFieldName("deleted");
//        // 自动填充配置
//        TableFill gmtCreate = new TableFill("gmt_create", FieldFill.INSERT);
//        TableFill gmtModified = new TableFill("gmt_modified", FieldFill.INSERT_UPDATE);
//        ArrayList<TableFill> tableFills = new ArrayList<>();
//        tableFills.add(gmtCreate);
//        tableFills.add(gmtModified);
//        strategy.setTableFillList(tableFills);
//        // 乐观锁
//        strategy.setVersionFieldName("version");
//        strategy.setRestControllerStyle(true);
//        strategy.setControllerMappingHyphenStyle(true);
//        mpg.setStrategy(strategy);
//        //执行
//        mpg.execute();
    }

实体类和数据源填充

handler数据源处理策略，在插入数据的时候自动的进行创建时间和更新时间的插入。

@Slf4j
@Component
public class MetaDataHandler implements MetaObjectHandler {
    @Override
    public void insertFill(MetaObject metaObject) {
        log.info("start insert fill ......");
        this.setFieldValByName("gmtCreate",new Date(),metaObject);
        this.setFieldValByName("gmtModified",new Date(),metaObject);
    }

    @Override
    public void updateFill(MetaObject metaObject) {
        log.info("start update fill ......");
        this.setFieldValByName("gmtModified",new Date(),metaObject);
    }
}

在实体类的字段上需要添加相对应的注解

public class User {
    @TableId(type = IdType.AUTO,value = "ID")
    private Integer id;
    private String name;
    private Integer age;
    private String email;
    @TableField(fill = FieldFill.INSERT)
    private Date gmtCreate;
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date gmtModified;
    @Version
    private Integer version;
    @TableLogic
    private Integer deleted;

    public User(String name, Integer age) {
        this.name = name;
        this.age = age;
    }
}

mapper处理文件，只需要继承基础的mapper类就会自动生成实体类的CRUD业务

@Mapper
public interface UserMapper extends BaseMapper<User> {
}

自定义分页配置类

@MapperScan("com.mao.test.mapper")
@EnableTransactionManagement
@Configuration
public class MybatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        // 添加乐观锁
        mybatisPlusInterceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
        //添加分页
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return mybatisPlusInterceptor;
    }
}

测试分页查询的代码

    @Test
    public void testSelect() {
        Page<User> page = new Page<>(1,3);
        userMapper.selectPage(page, null);
        page.getRecords().forEach(System.out::println);
    }

页面控制器

@RestController
@CrossOrigin
public class UserController {

    @Autowired
    private UserMapper userMapper;

    @GetMapping({"/","/list"})
    public List<User> list(){
        return userMapper.selectList(null);
    }

    @RequestMapping("/query")
    public List<User> query(String name){
        return userMapper.query(name);
//        return userMapper.query("%"+name+"%");
    }

    @RequestMapping("/insert")
    public String insert(String name,Integer age){
        return userMapper.insert(new User(name,age)) > 0 ? "success!" : "fail!";
    }
}

自定义查询的接口添加方法

@Mapper
public interface UserMapper extends BaseMapper<User> {

//    @Select("select * from user where name like #{name}")
    @Select("select * from user where name like concat('%',#{name},'%')")
    List<User> query(String name);
}

前端

编写一个简单的html，导入jquery.min.js文件，方便与后端的数据进行对接展示

页面布局
注意在按钮的响应事件上方法，需要带上括号

<button onclick="list()">查询全部</button>
<h1></h1>
<input id="query">
<button onclick="query()">指定查询</button>
<h1></h1>
<input id="name">
<input id="age">
<button onclick="insert()">插入数据</button>
<h1></h1>
<textarea></textarea>

导入上述的js文件

<script src="../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

编写按钮对应的行为方法，与后端的json数据进行对接展示，每一个函数通过Ajax请求实现不同URL的数据传递，通过document对象查找到数据需要显示的区域，将后端传递的JSON转化为字符串显示即可。

获取输入框的值生成变量，通过data进行前后端数据的交互

<script type="text/javascript">
    function list() {
        $.ajax({
            type: "get",
            url: "http://localhost/",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data){
                document.querySelector("textarea").innerText=JSON.stringify(data);
            },
            error: function (data){
                alert(data)
            }
        });
    }

    function query() {
        var name = $('#query').val();
        $.ajax({
            type: "get",
            url: "http://localhost/query",
            data: {name:name},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data){
                document.querySelector("textarea").innerText=JSON.stringify(data);
            },
            error: function (data){
                alert(data)
            }
        });
    }

    function insert() {
        var name = $('#name').val();
        var age = $('#age').val();
        $.ajax({
            type: "get",
            url: "http://localhost/insert",
            data:{name:name, age:age},
            contentType: "application/json;charset=utf-8",
            dataType: "text",
            success: function (data){
                document.querySelector("textarea").innerText=JSON.stringify(data);
            },
            error: function (data){
                alert(data)
            }
        });
    }
</script>

效果展示

打包发现

maven导入插件

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.3</version>
            </plugin>
        </plugins>
    </build>

执行命令

mvn clean package

java -jar springboot-test-2.7.4.jar

即可运行

前后端交互完成