这3张表的关系是 模型表Model ===> 训练表Training ===》应用表Application（大概的逻辑是：选择应用，然后训练，然后成为模型）如有不理解的可加我微信：17625089935 白天问我一般晚上回
首先我们先建立实体Model（我使用的data注解不需要get set @TableField(exist = false) 注解下的属性 是相关联表的属性）
package cn.com.befery.dataai.po;
import java.util.Date;
import org.springframework.boot.jackson.JsonComponent;
import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.Data;
@JsonComponent()
@Data
@TableName("ai_model")
public class Model {
@TableId(value = "model_id", type = IdType.AUTO)
private Long modelID;
private Long applicationId;
private Long trainingId;
private String modelName;
// 描述
private String modelDescribe;
private String modelType;
private Date createDate;
private String filePath;
private String fileName;
private String daimension; //维度
private Long status;
@TableField(exist = false)
private String applicationName;
@TableField(exist = false)
private String trainingName;
@TableField(exist = false)
private String order;
@TableField(exist = false)
private String orderdir; // 升序或降序
}然后是第二个相关联的表 应用表application表
package cn.com.befery.dataai.po;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.Data;
@Data
@TableName("ai_application")
public class Application implements Serializable{
private static final long serialVersionUID = 1L;
@TableId(value="application_id",type=IdType.AUTO)
private Long applicationID;
private String applicationName;
private String filePath;
private String fileName;
private Long userId;
private Date createDate;
private Integer status;
private String dimension; //维度
@TableField(exist= false)
private String userName; //关联用户表的名称字段
@TableField(exist = false)
private String order;
@TableField(exist = false)
private String modelName;
@TableField(exist = false)
private String trainingName;
@TableField(exist = false)
private String orderdir; //升序或降序
}然后是相关联的第3张表 训练表traning
package cn.com.befery.dataai.po;
import java.io.Serializable;
import java.util.Date;
import com.baomidou.mybatisplus.annotations.TableField;
import com.baomidou.mybatisplus.annotations.TableId;
import com.baomidou.mybatisplus.annotations.TableName;
import com.baomidou.mybatisplus.enums.IdType;
import lombok.Data;
@Data
@TableName("ai_training")
public class Training implements Serializable {
private static final long serialVersionUID = 1L;
@TableId(value = "training_id", type = IdType.AUTO)
private Long trainingID;
private Long serverId; //服务器ID
private Long applicationId; //应用ID
private String trainingModel; //训练模型
private String trainingName; //训练名称
private String dimensionInput; //输入维度
private String dimensionOutput; //输出维度
private Date createDate;
private Integer status;
@TableField(exist = false)
private String applicationName;
@TableField(exist = false)
private String serverName;
@TableField(exist = false)
private String modelName;
@TableField(exist = false)
private String order; //排序字段
@TableField(exist = false)
private String orderdir; //升序或降序
}然后是DAO层：
package cn.com.befery.dataai.dao;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.baomidou.mybatisplus.plugins.pagination.Pagination;
import cn.com.befery.dataai.po.Model;
public interface ModelDao extends BaseMapper<Model> {
List<Model> selectModelPage(Pagination page,@Param(value = "model") Model model);
}
然后是xml（sql语句使用了别名，别名和实体中的一致，包括之后的前后台交互，都取一致的名字，规范避免出错）【我之所以使用 $ 符号是因为 如果使用#号他会当作字符串识别，他不会当作关键字识别，我使用#号不行】
<?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.com.befery.dataai.dao.ModelDao">
<select id="selectModelPage"
resultType="cn.com.befery.dataai.po.Model">
SELECT
model.`model_id`,
model.`model_name` as modelName,
model.`status`as status,
t.`training_name`as trainingName,
ap.`application_name` as applicationName,
model.`create_date` as createDate
FROM
ai_model model
LEFT JOIN ai_training t
ON t.`training_id` = model.`training_id`
LEFT JOIN ai_application ap
ON ap.`application_id` = t.`application_id`
<where>
1 = 1
<if test="model.modelName != null and model.modelName != ''">
and model.`model_name` like '%${model.modelName}%'
</if>
order by ${model.order} ${model.orderdir}
</where>
</select>
</mapper>然后就是service：
package cn.com.befery.dataai.service;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.MultipartFile;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.IService;
import cn.com.befery.dataai.po.Model;
import cn.com.befery.dataai.vo.ResultCode;
public interface ModelService extends IService<Model>{
//分页
Page<Model> selectModelPage(int pageNo,int pageSize,Model model);
}
然后就是serviceImpl：（此处将接口中的 pageNo和pageSize封装成到 分页辅助类 page<T>中）
@Service
@Transactional
public class ModelServiceImpl extends ServiceImpl<ModelDao, Model> implements ModelService {
@Autowired
private ModelDao modelDao;
@Override
public Page<Model> selectModelPage(int pageNo, int pageSize, Model model) {
// TODO Auto-generated method stub
Page<Model> page = new Page<Model>(pageNo, pageSize);
return page.setRecords(this.baseMapper.selectModelPage(page, model));
}
}然后就是Controller：（
简单说一下下面的参数：
- orderNO（排序用的）：是前台传过来的，根据orderNO（类似下标）找到前台定义好的数据库字段
- order（排序用的）：根据orderNO（类似下标）找到前台定义好的数据库字段
- orderdir（排序用的：是asc 还是desc）
- search（前台模糊查询使用的）：前台传的名字，来进行模糊查询
）
/**
* @author zhangxuewei 三表查询
* @param param
* @param request
* @return
*/
@ResponseBody
@RequestMapping(value = "/modelPage")
public ResponseData modlePage(SearchParam param, HttpServletRequest request) {
logger.info("modlePage ...........");
String orderNO = request.getParameter("order[0][column]");
String order = request.getParameter("columns[" + orderNO + "][name]");
String orderdir = request.getParameter("order[0][dir]");
String search = request.getParameter("search[value]");
int pageNo = param.getStart() / param.getLength() + 1;
int pageSize = param.getLength();
Model model = new Model();
model.setModelName(search);
model.setOrder(order);
model.setOrderdir("asc".equals(orderdir) ? "asc" : "desc");
Page<Model> pageDate = modelService.selectModelPage(pageNo, pageSize, model);
return responseData(param.getDraw(), pageDate);
}这个是分页返回公共类
package cn.com.befery.dataai.controller;
import org.springframework.stereotype.Controller;
import com.baomidou.mybatisplus.plugins.Page;
import cn.com.befery.dataai.vo.ResponseData;
@Controller
public class BaseController {
/**
*
* @param draw 重构次数
* @param page 分页数据
* @return
*/
public ResponseData responseData(String draw,Page<?> page){
ResponseData res = new ResponseData();
res.setData(page.getRecords());
res.setDraw(draw);
res.setRecordsFiltered((int)page.getTotal());
res.setRecordsTotal((int)page.getTotal());
return res;
}
}
这个是ResponseDate实体类
package cn.com.befery.dataai.vo;
import java.util.List;
//@JsonInclude(Include.NON_NULL)
public class ResponseData {
/**
*
*/
// private static final long serialVersionUID = 1L;
private String draw;
private int recordsTotal;
private int recordsFiltered;
@SuppressWarnings("rawtypes")
private List data;
}这是前端的html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css"
href="../static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
href="../static/h-ui/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
href="../static/libs/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css"
href="../static/libs/icheck/icheck.css" />
<link rel="stylesheet" type="text/css"
href="../static/h-ui/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
href="../static/h-ui/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>应用列表</title>
<style type="text/css">
.dataTables_wrapper .dataTables_length {
float: left;
padding-bottom: 0px;
padding-top: 10px;
padding-left: 20px;
}
.table tbody tr td:FIRST-CHILD {
text-align: center;
}
.table tbody tr td {
text-align: center;
}
.dataTables_wrapper .dataTables_filter {
padding-bottom: 10px;
}
.mt-20 {
margin-top: 10px;
}
.page-container {
padding: 20px;
padding-top: 0px;
}
.form-horizontal .form-label {
text-align: left;
width: 140px;
padding-right: 0px;
}
</style>
</head>
<body>
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span>
模型和测试管理 <span class="c-gray en">></span> 模型列表 <a
class="btn btn-success radius r" id="refresh"
style="line-height: 1.6em; margin-top: 3px"
href="javascript:location.replace(location.href);" title="刷新"><i
class="Hui-iconfont"></i></a>
</nav>
<div class="page-container">
<!-- <div class="text-c"> 日期范围：
<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}',minDate:'#F{$dp.$D(\'logmax\',{M:-3})}'})" id="logmin" class="input-text Wdate" style="width:120px;">
-
<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmin\',{M:3})||\'%y-%M-%d\'}',minDate:'#F{$dp.$D(\'logmin\')}'})" id="logmax" class="input-text Wdate" style="width:120px;">
<input type="text" name="" id="search" placeholder=" 门店名称" style="width:250px" class="input-text">
<button name="" id="search" class="btn btn-success" type="submit" onclick="search()"><i class="Hui-iconfont"></i> 搜账户</button>
</div> -->
<!-- <div style="display: <#if(modelServer)??>${modelServer"
class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l"> <a class="btn btn-primary radius" id="addApp"
onclick="modelServerServer_add('创建模型服务','/pages/modelServer-add.html')"
href="javascript:;"><i class="Hui-iconfont"></i> 创建模型服务</a><a
id="datarefresh" onclick="data_refresh()"></a><input id="hiddentext"
type="text" hidden="true" /> <input id="msgsecret" type="text"
hidden="true" />
</div> -->
<div style="display: <#if (model)??>${model}<#else></#if>" class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <a class="btn btn-primary radius" id="addApp" onclick="model_testing('测试模型','/pages/model-testing.html')" href="javascript:;"><i class="Hui-iconfont"></i> 测试模型</a><a id="datarefresh" onclick="data_refresh()"></a><input id="hiddentext" type="text" hidden="true" /> <input id="msgsecret" type="text" hidden="true" /></div>
<div class="mt-20">
<table
class="table table-border table-bordered table-bg table-hover table-sort "
width=100%>
<thead>
<tr class="text-c">
<!-- <th width="40"><input id = "checkAll" name="checkAll" type="checkbox" value=""></th> -->
<th width="80">序号</th>
<th width="80">模型服务名称</th>
<th width="100">训练名称</th>
<th width="100">应用名称</th>
<th width="100">创建时间</th>
<th width="80">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="ajaxModal" class="modal hide fade" tabindex="-1">
<article class="page-container">
<form action="" method="post" class="form form-horizontal"
id="form-modelServer-add">
<div class="row cl">
<label class="form-label col-xs-3 col-sm-3"><span
class="c-red">*</span>App名称：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder=""
id="appName" name="appName">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3 col-sm-3"><span
class="c-red">*</span>图片地址：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder=""
id="adminMobile" name="adminMobile">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3 col-sm-3"><span
class="c-red">*</span>Domain(SaaS)：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder=""
id="payCallBackURL" name="payCallBackURL">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"
style="margin-left: 130px; width: 100px;">
<button class="btn btn-primary radius" value=""> 提交 </button>
</div>
<!-- <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3" style="float: right; width: 250px;margin-left: 0px;">
<input class="btn btn-primary radius" style="width: 80px;" onclick="javascript:;" value=" 取消 ">
</div> -->
</div>
</form>
</article>
</div>
<script type="text/javascript"
src="../static/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../static/libs/layer/2.1/layer.js"></script>
<script type="text/javascript"
src="../static/libs/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
src="../static/libs/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.admin.js"></script>
<!-- <script type="text/javascript" src="js/modelServer.js"></script> -->
<script type="text/javascript">
var table = $('.table-sort')
.DataTable(
{
"processing" : true,
"serverSide" : true,
// "searching":true,
'language' : {
"search" : "按名称检索：",
"sProcessing" : "<div style='position:absolute;margin-left:42%;margin-top:15%'><img src='static/h-ui/images/loading_072.gif'/>数据加载中...</div>",
},
"sDom" : '<"top"f<"clear">>rt<"bottom"ilp><"clear">',
"order" : [
[
0, "asc"
]
],
"ajax" : {
"url" : "/model/modelPage",
/* "data": function ( d ) {
//添加额外的参数传给服务器
d.extra_search = "canshu1";
d.extra_search1 = "canshu11";
}, */
},
"columnDefs" : [ {
orderable : false,//禁用排序
targets : [ 4 ]
} ],
"columns" : [
/*{"sTitle": "<input type='checkbox'></input>","mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false,"sClass": "text-center",}, */
{
"data" : "modelID",
"name" : "model_id",
"class" : "modelID"
},
{
"data" : "modelName",
"name" : "model_name",
"class" : "modelName"
},
{
"data" : "trainingName",
"name" : "training_name",
"class" : "trainingName"
},
{
"data" : "applicationName",
"name" : "application_name",
"class" : "applicationName"
},
{
"data" : function(e) {
if (e.createDate != null
&& e.createDate != "null") {
return e.createDate;
}
return "";
},
"name" : "create_date",
"class" : "createDate"
},
{
"data" : function(e) {
if (e.status == '0') {
if (e.isTrained == '0') {
return '<a style="display: <#if (modelServer_delete)??>${modelServer_delete}<#else></#if>" title="删除" href="javascript:;" onclick=modelServer_del(this,"'
+ e.modelID
+ '") class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
} else {
return '<a style="display: <#if (modelServer_delete)??>${modelServer_delete}<#else></#if>" title="删除" href="javascript:;" onclick=modelServer_del(this,"'
+ e.modelID
+ '") class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
}
} else {
if (e.isTrained == '0') {
return '<a style="display: <#if (modelServer_delete)??>${modelServer_delete}<#else></#if>" title="删除" href="javascript:;" onclick=modelServer_del(this,"'
+ e.modelID
+ '") class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
} else {
return '<a style="display: <#if (modelServer_delete)??>${modelServer_delete}<#else></#if>" title="删除" href="javascript:;" onclick=modelServer_del(this,"'
+ e.modelID
+ '") class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>';
}
}
},
"class" : "td-manage"
} ],
});
table.on('draw.dt', function() {
});
$('.table-sort tbody').on('click', 'tr', function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
//});
function refreshRow() {
}
function initComplete(data) {
//选择时间后触发重新加载的方法
$("#logmin").on('apply.input-text', function() {
//当选择时间后，出发dt的重新加载数据的方法
table.ajax.reload();
//获取dt请求参数
var args = table.ajax.params();
console.log("额外传到后台的参数值extra_search为：" + args.extra_search);
});
}
function filterGlobal() {
alert($('#search').val());
$('.table-sort').DataTable().search($('#search').val()).draw();
}
function search() {
table.ajax.reload();
//获取dt请求参数
var args = table.ajax.params();
console.log("额外传到后台的参数值extra_search为：" + args.extra_search);
// filterGlobal();
}
/*账户-添加*/
function modelServerServer_add(title, url) {
layer_show(title, url, 550, 300);
}
function data_refresh() {
var text = $('#hiddentext').val();
if (text == 'add') {
layer.alert($('#msgsecret').val());
/* layer.msg('添加成功!',{icon: 6,time:1000}); */
}
if (text == 'update') {
layer.msg('更新成功!', {
icon : 6,
time : 1000
});
}
table.ajax.reload();
}
/*app-删除*/
function modelServer_del(obj, id) {
layer.confirm('确认要删除吗？', function(index) {
//此处请求后台程序，下方是成功后的前台处理……
if (index) {
$.ajax({
type : 'POST',
url : '/model/deleteModel',
data : {
modelID : id,
},
success : function(result) {
if (result.code == "0") {
$(obj).parents("tr").remove();
layer.msg('已删除!', {
icon : 1,
time : 1000
});
} else {
layer.msg('删除失败!', {
icon : 5,
time : 1000
});
}
},
error : function(jqXHR, textStatus, errorThrown) {
layer.msg(errorThrown, {
icon : 5,
time : 1000
});
}
});
} else {
alert(33)
}
});
}
/*reset secret*/
function reset_secret(obj, id) {
layer.confirm('确认要重置Secret吗？', function(index) {
//此处请求后台程序，下方是成功后的前台处理……
if (index) {
$.ajax({
type : 'POST',
url : 'modelServer/resetSecret',
data : {
appID : id,
},
success : function(result) {
if (result.code == "0") {
layer.alert('Secret is: ' + result.msg);
} else {
layer.alert('重置失败！');
}
},
error : function(jqXHR, textStatus, errorThrown) {
layer.msg(errorThrown, {
icon : 5,
time : 1000
});
}
});
} else {
alert(33)
}
});
}
function modelServer_edit(obj, id) {
var modelServerID = $(obj).parents("tr").find(".modelServerID").text();
var appName = $(obj).parents("tr").find(".appName").text();
var imageLibId = $(obj).parents("tr").find(".imageLibId").val();
var domainId = $(obj).parents("tr").find(".domainId").val();
/*var url = "pages/modelServer-update.html?te=66&tt=88";*/
var url = "pages/modelServer-update.html?appName=" + appName
+ "&imageLibId=" + imageLibId + "&modelServerID=" + id
+ "&domainId=" + domainId;
layer_show("修改App", encodeURI(url), 550, 350);
/* var data = table.row( $(this).parents('tr') ).data();
alert(data)
var fields = $("#add-form").serializeArray();
jQuery.each( fields, function(i, field){
//jquery根据name属性查找
$(":input[name='"+field.name+"']").val(data[i]);
});
$(":input[name='mark']").val("edit");
$("#ajaxModal").modal("show");//弹出框show
*/
}
function modelServerServer_training(obj, id) {
window.location.href = "pages/modelServer-train.html?appID=" + id;
}
function model_testing(title,url){
layer_show(title,url,550,300);
}
</script>
</body>
</html>