1.创建maven项目在pom.xml中添加依赖
<!-- 添加thymeleaf支持:类似于jsp的视图模板 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--jpa-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
2.在application.properties添加数据库来连接
#数据源
spring.datasource.url=jdbc:mysql://localhost:3306/accumulation?serverTimezone=Asia/Shanghai&useSSL=false&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
3.在resources下的static下添加layui和jquery文件（如下图）
4.二表联合查询分页显示，创建entity层
创建第一个实体类Person_info
@Entity
public class Person_info {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String organization;
private String person_name;
private String person_phone;
private String person_sex;
private String certificate_type;
private String certificate_id;
private String education;
private String position;
private String mailbox;
private String address;
private Date birth_date;
private String marriage;
private Double cardinal;
private String bank_name;
private String bank_id;
private String account_state;
private Date person_dates;
private String operation;
private String operation_name;
private Double balance;
private Double working_balance;
private String begin_date;
private String over_date;
//省略getter和setter方法
}
创建第二张个实体类Guaranteed
@Entity
public class Guaranteed {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String person_phone;
private Double deposit;
private Double loans;
private Double paid_loans;
private Double residue_loans;
private Integer residue_periods;
private Integer periods;
private Double rate;
private String repayment_type;
private String gathering_name;
private String gathering_tate;
private String repayment_id;
private String repayment_name;
private String mate_name;
private String mate_phone;
private String mate_certificate;
private String certificate_ids;
private String common_phone;
private String house_type;
private String address;
private Double area;
private String house_id;
private String house_name;
private String account;
private Double house_total;
private Double down;
private Double univalence;
private String pledge;
private String pledge_name;
private String identity_id;
private String pledge_address;
private String pledge_state;
private Double pledge_total;
private String audit_state;
private String operation;
private String operation_name;
private Date over_date;
//省略getter和setter方法
}
创建第三个实体类GuaranteedLoan_like 把Person_info 和 Guaranteed 实体类封装在一起
public class GuaranteedLoan_like {
private Person_info personInfo;
private Guaranteed guaranteed;
//必须要加上构造方法
public GuaranteedLoan_like(Person_info personInfo, Guaranteed guaranteed) {
this.personInfo = personInfo;
this.guaranteed = guaranteed;
}
//省略getter和setter方法
}
创建第四个实体类CodeGuaranteed ：用于向前端展示分页数据
public class CodeGuaranteed {
private Integer code;
private String msg;
private Long count;
private Page<GuaranteedLoan_like> data;
//省略getter和setter方法
}
5.创建repository层（GuaranteedRepository）并继承jpa
public interface GuaranteedRepository extends JpaRepository<Guaranteed,Integer> {
//模糊查询：员工手机号
@Query(value = "select new com.dianlinxing.accumulation.entity.limit.GuaranteedLoan_like(u,c) from Person_info u,Guaranteed c where c.person_phone=u.person_phone and c.audit_state = :audit_state and u.person_phone like CONCAT('%',:person_phone,'%') ")
Page<GuaranteedLoan_like> findGuaranteed(Pageable pageable, @Param("person_phone") String person_phone,@Param("audit_state") String audit_state);
}
6.创建controller层（GuaranteedLoanController）
@Controller
@RequestMapping("guaranteed")
public class GuaranteedLoanController {
@Autowired
GuaranteedRepository guaranteedRepository;
//跳转页面
@RequestMapping("index")
public String index(){
return "admin/loansAudit";
}
/**
* 分页
* 模糊查询
* 根据用户手机号码查询
* @param person_phone
* @param page
* @param limit
* @return
*/
@RequestMapping("findGuaranteed")
@ResponseBody
public CodeGuaranteed findGuaranteed(@RequestParam(value = "person_phone", required = false, defaultValue = "")String person_phone,
@RequestParam(value = "page", required = false, defaultValue = "1") Integer page,
@RequestParam(value = "limit", required = false, defaultValue = "10") Integer limit,String audit_state){
Sort sort = Sort.by(Sort.Order.asc("id"));
Pageable pageable = PageRequest.of(page-1, limit, sort);
Page<GuaranteedLoan_like> person_infos=guaranteedRepository.findGuaranteed(pageable,person_phone,audit_state);
Long count = guaranteedRepository.count();
CodeGuaranteed code = new CodeGuaranteed();
code.setCode(0);
code.setMsg("");
code.setCount(count);
code.setData(person_infos);
return code;
}
}
7.创建loansAudit.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贷款初审</title>
<script src="/layui/layui.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/js/jquery-1.8.3.min.js"></script>
<style>
#tab tr td{
margin:0px;
border:1px solid black;
width: 100px;
}
#tab tr td input{
border: 0px;
}
#tab{
text-align: center;
}
</style>
</head>
<body>
<div style="height: 40px;font-size: 24px;color: gray;padding:20px 0px 0px 30px">
贷款初审<input type="text" id="sear" style="font-size: 16px;height: 26px;width: 180px;margin-left: 740px;">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="search">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
</script>
</body>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#test'
,height: 460
,url: '/guaranteed/findGuaranteed?audit_state='+'待审核' //数据接口
,parseData: function(res){
//res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": "res.message", //解析提示文本
"count": res.count, //解析数据长度
"data": res.data.content //解析数据列表
};
}
,page:true
,limit:10
,cols: [
[ //表头
{
field: 'id', title: 'ID', width:80, templet:'<div>{
{d.guaranteed.id}}</div>',sort: true, fixed: 'left'}
,{
field: 'person_phone', title: '基金账号', width:120,templet:'<div>{
{d.personInfo.person_phone}}</div>'}
//一个表查询时,{field: 'person_phone', title: '基金账号', width:120}
,{
field: 'person_name', title: '借款人姓名', width:105,templet:'<div>{
{d.personInfo.person_name}}</div>'}
,{
field: 'loans', title: '贷款金额', width:105,templet:'<div>{
{d.guaranteed.loans}}</div>'}
,{
field: 'periods', title: '贷款周期', width:110,templet:'<div>{
{d.guaranteed.periods}}</div>'}
,{
field: 'rate', title: '贷款利率', width:110,templet:'<div>{
{d.guaranteed.rate}}</div>'}
,{
field: 'bank_name', title: '委托银行', width:110,templet:'<div>{
{d.personInfo.bank_name}}</div>'}
,{
field: 'repayment_type', title: '还款方式', width:110,templet:'<div>{
{d.guaranteed.repayment_type}}</div>'}
,{
field: 'over_date', title: '创建时间', width:110,templet:'<div>{
{d.guaranteed.over_date}}</div>'}
,{
field: 'audit_state', title: '审核状态', width:110,templet:'<div>{
{d.guaranteed.audit_state}}</div>'}
,{
field: '', title: '操作', width:80, toolbar: '#barDemo'}
]
]
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//删除
if(obj.event === 'del'){
} else if(obj.event === 'edit'){
//详情
var person_phone = data.personInfo.person_phone;
var organization = data.personInfo.organization;
var common_phone = data.guaranteed.common_phone;
window.location.href = "http://localhost:8080/guaranteed/loanAuditIndex?person_phone="
+person_phone+"&organization="+organization+"&common_phone="+common_phone;
}
});
//根据用户名模糊查询
$("#search").click(function () {
var person_phone = $("#sear").val();
table.render({
elem: '#test'
,height: 460
,data:{
person_phone:person_phone
}
,url: '/guaranteed/findGuaranteed?person_phone='+person_phone+'&audit_state='+'待审核' //数据接口
,parseData: function(res){
//res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": "res.message", //解析提示文本
"count": res.count, //解析数据长度
"data": res.data.content //解析数据列表
};
}
,page:true
,limit:10
,cols: [
[ //表头
{
field: 'id', title: 'ID', width:80, templet:'<div>{
{d.guaranteed.id}}</div>',sort: true, fixed: 'left'}
,{
field: 'person_phone', title: '基金账号', width:120,templet:'<div>{
{d.personInfo.person_phone}}</div>'}
,{
field: 'person_name', title: '借款人姓名', width:105,templet:'<div>{
{d.personInfo.person_name}}</div>'}
,{
field: 'loans', title: '贷款金额', width:105,templet:'<div>{
{d.guaranteed.loans}}</div>'}
,{
field: 'periods', title: '贷款周期', width:110,templet:'<div>{
{d.guaranteed.periods}}</div>'}
,{
field: 'rate', title: '贷款利率', width:110,templet:'<div>{
{d.guaranteed.rate}}</div>'}
,{
field: 'bank_name', title: '委托银行', width:110,templet:'<div>{
{d.personInfo.bank_name}}</div>'}
,{
field: 'repayment_type', title: '还款方式', width:110,templet:'<div>{
{d.guaranteed.repayment_type}}</div>'}
,{
field: 'over_date', title: '创建时间', width:110,templet:'<div>{
{d.guaranteed.over_date}}</div>'}
,{
field: 'audit_state', title: '审核状态', width:110,templet:'<div>{
{d.guaranteed.audit_state}}</div>'}
,{
field: '', title: '操作', width:80, toolbar: '#barDemo'}
]
]
});
})
});
</script>
</html>
效果如下图：
