SpringBoot+Mybatis-plus+页面整合

SpringBoot+Mybatis-plus整合

Mybatisplus的代码生成器以及分页

一.导入依赖

 <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.6.RELEASE</version>
  </parent>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-configuration-processor</artifactId>
      <optional>true</optional>
    </dependency>
<!--    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>-->
    <!-- servlet依赖. -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
    </dependency>

    <!-- tomcat的支持.-->
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-jasper</artifactId>
      <scope>provided</scope>
    </dependency>

    <!-- mysql -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.22</version>
    </dependency>
    <!--sprinboot 测试-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
    </dependency>
    <!--热部署-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
      <scope>true</scope>
    </dependency>
    <!--mybatisplus-->
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-boot-starter</artifactId>
      <version>3.1.2</version>
    </dependency>


    <!--模板引擎-->
    <dependency>
      <groupId>org.apache.velocity</groupId>
      <artifactId>velocity-engine-core</artifactId>
      <version>2.1</version>
    </dependency>
    <dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus-generator</artifactId>
      <version>3.1.2</version>
    </dependency>

  </dependencies>

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

二.启动类配置

package cn.leilei;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan(basePackages = "cn.leilei")
@MapperScan("cn.leilei.mapper")
public class SpringbootApplicationHome {

	public static void main(String[] args) {
		SpringApplication.run(SpringbootApplicationHome.class, args);
	}
}

三.yml配置

server:
  port: 5000
spring:
  datasource:                      #数据库连接池
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: root
    url: jdbc:mysql:///homecrud
  mvc:
    view:
      suffix: .jsp
      prefix: /WEB-INF/views/
  devtools:           #热部署
         restart:
           enabled: false
#    thymeleaf:
#      mode:  # Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
#      prefix: classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
#      suffix: .html

#pagehelper:                #分頁
#  helperDialect: mysql
#  reasonable: true
#  params: count=countSql

四.Mybatis-plus代码生成器

（1）代码生成器启动类

package cn.leilei.util;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.converts.MySqlTypeConvert;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;

import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;

public class CodeGenerator {

    public static void main(String[] args) throws InterruptedException {
        //用来获取Mybatis-Plus.properties文件的配置信息
        ResourceBundle rb = ResourceBundle.getBundle("homecrud");
        AutoGenerator mpg = new AutoGenerator();
        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        gc.setOutputDir(rb.getString("OutputDir"));
        gc.setFileOverride(true);
        gc.setActiveRecord(true);// 开启 activeRecord 模式
        gc.setEnableCache(false);// XML 二级缓存
        gc.setBaseResultMap(true);// XML ResultMap
        gc.setBaseColumnList(false);// XML columList
        gc.setAuthor(rb.getString("author"));
        mpg.setGlobalConfig(gc);
        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setDbType(DbType.MYSQL);
        dsc.setTypeConvert(new MySqlTypeConvert());
        dsc.setDriverName("com.mysql.jdbc.Driver");
        dsc.setUsername(rb.getString("jdbc.user"));
        dsc.setPassword(rb.getString("jdbc.pwd"));
        dsc.setUrl(rb.getString("jdbc.url"));
        mpg.setDataSource(dsc);
        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
       // strategy.setTablePrefix(new String[] { "t_" });// 此处可以修改为您的表前缀
        strategy.setNaming(NamingStrategy.underline_to_camel);// 表名生成策略
        strategy.setInclude(new String[]{"real_eseate"}); // 需要生成的表
        mpg.setStrategy(strategy);
        // 包配置
        PackageConfig pc = new PackageConfig();
        pc.setParent(rb.getString("parent"));
        pc.setController("controller");
        pc.setService("service");
        pc.setServiceImpl("service.impl");
        pc.setEntity("domain");
        pc.setMapper("mapper");
        mpg.setPackageInfo(pc);

        // 注入自定义配置，可以在 VM 中使用 cfg.abc 【可无】
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
            }
        };

        List<FileOutConfig> focList = new ArrayList<FileOutConfig>();

        // 调整 xml 生成目录演示
        focList.add(new FileOutConfig("/templates/mapper.xml.vm") {
            @Override
            public String outputFile(TableInfo tableInfo) {
                return rb.getString("OutputDirXml")+ "/cn/leilei/mapper/" + tableInfo.getEntityName() + "Mapper.xml";
            }
        });

        // 调整 query 生成目录
/*        focList.add(new FileOutConfig("/templates/query.java.vm") {
            @Override
            public String outputFile(TableInfo tableInfo) {
                return rb.getString("OutputDomainDir")+ "/cn/leilei/query/" + tableInfo.getEntityName() + "Query.java";
            }
        });*/

        // 调整 domain 生成目录
        focList.add(new FileOutConfig("/templates/entity.java.vm") {
            @Override
            public String outputFile(TableInfo tableInfo) {
                return rb.getString("OutputDomainDir")+ "/cn/leilei/domain/" + tableInfo.getEntityName() + ".java";
            }
        });

        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);

        // 自定义模板配置，可以 copy 源码 mybatis-plus/src/main/resources/templates 下面内容修改，
        // 放置自己项目的 src/main/resources/templates 目录下, 默认名称一下可以不配置，也可以自定义模板名称
        TemplateConfig tc = new TemplateConfig();
        //tc.setController("/templates/controller.java.vm");
        // 如上任何一个模块如果设置 空 OR Null 将不生成该模块。
        tc.setEntity(null);
        tc.setXml(null);
        mpg.setTemplate(tc);

        // 执行生成
        mpg.execute();
    }


}

（2）代码生成器配置

xxx.perproties 记得和启动类中配置文件名一致

#输出路径
OutputDir=E://ideawork//EstateInformation//src//main//java
#query和domain的生成路径
OutputDomainDir=E://ideawork//EstateInformation//src//main//java


#作者
author=lei
#数据源
jdbc.user=root
jdbc.pwd=root
jdbc.url=jdbc:mysql:///homecrud?useUnicode=true&characterEncoding=utf8

#包配置
parent=cn.leilei
#xml的生成的resources目录
OutputDirXml=E://ideawork//EstateInformation//src//main//resources

五.Mybatis分页插件配置

//Spring boot方式
@EnableTransactionManagement
@Configuration
@MapperScan("cn.leilei.mapper")
public class MybatisPlusConfig {

    /**
     * 分页插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // paginationInterceptor.setLimit(你的最大单页限制数量，默认 500 条，小于 0 如 -1 不受限制);
        return paginationInterceptor;
    }
}

六.程序流程

（1）生成domain类以及解释

RealEseate

@TableName("real_eseate") //对应数据库表名
public class RealEseate extends Model<RealEseate> {

    private static final long serialVersionUID=1L;

    @TableId(value = "id", type = IdType.AUTO)  //主键设置 自增
    private Long id;
    @TableField("project_name")  //对应数据库的列名
    private String projectName;
    @TableField("address")
    private String address;
    @TableField("house_type")
    private String houseType;
    @TableField("area")
    private Integer area;
    @TableField("build_time")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Date buildTime;
    @TableField("user_id")  
    private Long userId;
    //表示这个属性不会对应数据库中的列
    @TableField(exist = false)
    private User user;
    
    
    //get  set

user

@TableName("user")
public class User extends Model<User> {

    private static final long serialVersionUID=1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Long id;
    @TableField("username")
    private String username;
    @TableField("card_id")
    private String cardId;
    
    //get   set
}

（2）Mapper接口

@Component    //这个代码交给spring管理，可省略（为了注入此mapper不报红（假红))
public interface RealEseateMapper extends BaseMapper<RealEseate> {

    IPage<RealEseate> queryPage(Page<RealEseate> page, @Param("query") Requery query);
}

@Component
public interface UserMapper extends BaseMapper<User> {

}

mapper.xml映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.leilei.mapper.RealEseateMapper">

    <!-- 映射 -->
    <resultMap id="BaseResultMap" type="cn.leilei.domain.RealEseate">
        <id column="id" property="id" />
        <result column="project_name" property="projectName" />
        <result column="address" property="address" />
        <result column="house_type" property="houseType" />
        <result column="area" property="area" />
        <result column="build_time" property="buildTime" />
        <result column="user_id" property="userId" />
        <result column="uname" property="user.username"/>
        <result column="ucard" property="user.cardId"/>
    </resultMap>
    <!--查询条件-->
    <sql id="whereSql">
        <where>
            <if test="query.keywordName!=null and query.keywordName!=''">
                and
                ( u.username like concat('%',#{query.keywordName},'%')
                )
            </if>
            <if test="query.keywordCard!=null and query.keywordCard!=''">
                and
                (
                u.card_id like concat('%',#{query.keywordCard},'%')
                )
            </if>
        </where>
    </sql>
    <select id="queryPage" resultMap="BaseResultMap">
                SELECT re.id,re.project_name,re.address,u.username uname,u.card_id ucard,re.house_type,re.area,re.build_time
        FROM real_eseate re LEFT JOIN user u ON re.user_id=u.id
        <include refid="whereSql"/> ORDER BY build_time DESC
    </select>

</mapper>

（3）service接口以及实现

IRealEseateService接口

public interface IRealEseateService extends IService<RealEseate> {

    PageResult<RealEseate> queryBypage(Requery requery);
}

public interface IUserService extends IService<User> {

}

RealEseateServiceImpl实现

@Service
public class RealEseateServiceImpl extends ServiceImpl<RealEseateMapper, RealEseate> implements IRealEseateService {
    @Autowired
    private RealEseateMapper realEseateMapper;


    //关联用户分页查询
    @Override
    @Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
    public PageResult<RealEseate> queryBypage(Requery query) {
        Page<RealEseate> page = new Page<>(query.getPage(),query.getRows());
        IPage<RealEseate> ip = baseMapper.queryPage(page, query);
        return new PageResult<>(ip.getTotal(),ip.getRecords());
    }
}

userserviceimpl实现

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {

}

（4）工具类

封装分页实体

public class PageResult<T> {
    private Long total = 0L;   //每页条数

    private List<T> rows = new ArrayList<T>();   //每页数据

    public PageResult(Long total, List<T> rows) {
        this.total = total;
        this.rows = rows;
    }

    public PageResult() {

    }
    
    //get  set
}

高级查询实体

public class Requery {
    private Integer page = 1;
    private Integer rows = 5;
    private String keywordName;  //查询传输的值  名字
    private String keywordCard;  //查询传输的值  身份证
    
    //get  set  
}

（5）Controller

前端控制器

@Controller
@RequestMapping("/real")
public class RealEseateController {
    @Autowired
    private IRealEseateService realEseateService;

    @RequestMapping("/index")
    public  String index() {
        return "relaes";
    }
    @RequestMapping("/list")
    @ResponseBody
    public PageResult<RealEseate> list(Requery requery){
        return realEseateService.queryBypage(requery);
    }
}

（7）前台页面展示

采用的是elementui

所以必须先导入elementui依赖的js css 等

页面 jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>资源管理</title>
    <jsp:include page="/static/common/common_header.jsp"/>
    <style>
        #table{
            width: 100%;
        }
        .top{
            clear:both;
            text-align: center
        }
        .searchFrom{
            margin: 0 auto;
            float: none;
        }
        .new{
            float: right;
            margin-right: 5%;
        }
        /* 使表格背景透明 */
        .el-table th, .el-table tr {
            background-color: transparent;
        }

    </style>

</head>
<body <%--style="background-image: url(/static/img/1000106.jpg)"--%>>
<div id="table">
   <%-- <div class="top">
        <form action="/real/list" method="post">
            <div class="searchFrom">
                <el-form :inline="true" :model="filters" class="demo-form-inline">
                    <el-form-item label="产权人">
                        <el-input v-model="filters.keywordName" placeholder="产权人"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="filters.keywordCard" placeholder="身份证"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" content="根据资源名称进行查询" placement="right-start">
                            <el-button type="primary" @click="getHomes"><i class="el-icon-search">&nbsp;&nbsp;</i>查询</el-button>
                        </el-tooltip>

                    </el-form-item>
                    <el-button type="primary" class="new" @click="winReload"><i class="el-icon-refresh">&nbsp;&nbsp;</i>刷新</el-button>
                </el-form>
            </div>
        </form>
    </div>--%>
       <!--工具条-->
       <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
           <el-form :inline="true" :model="filters">

               <el-form-item>
                   <el-input v-model="filters.keywordName" placeholder="房产者"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-input v-model="filters.keywordCard" placeholder="身份证"></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" v-on:click="getHomes">查询</el-button>
               </el-form-item>

               <el-button type="primary" class="new" @click="winReload">
                   <i class="el-icon-refresh">&nbsp;&nbsp;</i>刷新
               </el-button>

           </el-form>

       </el-col>

    <!--列表-->
    <el-table :data="relas" stripe border highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="60" align="center">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名" width="150" sortable align="center">
        </el-table-column>
        </el-table-column>
        <el-table-column prop="user.username" label="产权人" width="150" sortable align="center">
        </el-table-column>

        <el-table-column prop="user.cardId" label="身份证" width="300" sortable align="center">
        </el-table-column>
        <el-table-column prop="houseType" label="房屋类型" min-width="200" sortable>
        </el-table-column>
        <el-table-column prop="area" label="使用面积" min-width="200" sortable>
        </el-table-column>
        <el-table-column prop="buildTime" label="建造时间" min-width="200" sortable>
        </el-table-column>
    </el-table>

       <!--工具条-->
       <el-col :span="24" class="toolbar">
           <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
           </el-pagination>
       </el-col>
</div>
</body>
<script type="text/javascript" src="/static/js/model/reals.js"></script>
</html>

js

var table = new Vue({
    el: "#table",
    data() {
        return {
            relas: [],
            page: 1,//当前页
            total: 0,
            currentPage: 1,
            listLoading: false,
            sels: [],//列表选中列
            pageSize: 5,
            filters: {
                keywordName: '',
                keywordCard: '',
            },
        };
    },
    mounted: function () {
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
        this.getHomes();
    },
    methods: {
        //获取房屋信息
        getHomes() {
        },
        //分页查数据
        getHomes() { //获取数据
            $.ajax({
                url: "/real/list",
                data: {
                    page:this.page,
                    rows:this.pageSize,
                    keywordName:this.filters.keywordName,
                    keywordCard:this.filters.keywordCard
                },
                type:'POST',
                dataType:'json',
                error: function () {
                },
                success: function (pageList) {
                    table.relas = []
                    var tablelist = table.relas;
                    table.total = pageList.total
                    for (var i = 0; i < pageList.rows.length; i++) {
                        tablelist.push(pageList.rows[i])
                    }
                }
            })
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        handleCurrentChange(val) {
            /*console.log(val);*/
            this.page = val;
            this.getHomes();
        },
        //保存选中状态
        getRowKey(row) {
            return row.id
        },
        //刷新
        winReload:function(){
            window.location.reload();
        }
    }
});

成果展示