jeecg 项目的三大技术框架 mybaties,springboot,vue;
数据库数据如何显示到界面上，页面数据又如何保存到数据库中，还是高先生摸索出来的，佩服。
jeecg 分三层架构 mapper层与数据库打交道，controller层与页面打交道，server层处理一些业务逻辑（我们很多业务逻辑也在controller层处理了，比如给让某两个量或多个量之间做四则运算，这里应该是四则运算计算完后直接给实体类属性赋值，在server层当下用过的有使用@DB("")注解选择数据源，生成任务单编号；
三层架构连同一个实体类布局图
mapper层定义接口，接口映射到xml文件中。service层会写成接口，再有接口的实现类，使用抽象的方法，只关注一个黑盒子的输入输出，而不在意其中实现细节。调用时直接调用接口就好，不用管接口的实现过程，工程中大多是面向接口编程，其它地方用到这个接口的功能，调用接口就好，无需知道其中的细节。
具体的数据库数据和前端页面数据的交互过程：
以查出老化装置的信息为例：
1.mapper层写好与数据库的交互，
StatisticsAndQueryMapper.java 中写好
//根据装置编号查询老化装置详细信息 public List<GxAgingDevice> queryAgingDeviceByDeviceCode(@Param("deviceCode") String deviceCode);
@Param("deviceCode")注解对应到sql语句中的参数名 #{deviceCode}
StatisticsAndQueryMapper.xml 中写好
<select id="queryAgingDeviceByDeviceCode" parameterType="java.lang.String" resultType="org.jeecg.modules.gxagingdevice.entity.GxAgingDevice"> select a.device_code,a.device_name,a.device_ip,a.aging_kind,a.isQualified,a.task_code,b.own_order FROM gx_aging_device a JOIN gx_device_main b ON a.device_code = b.device_code where a.device_code = #{deviceCode} </select>
注意 StatisticsAndQueryMapper.xml 中id必须和StatisticsAndQueryMapper.java 中接口名一致，
parameterType="java.lang.String"传入的参数类型，
resultType="org.jeecg.modules.gxagingdevice.entity.GxAgingDevice" 返回值类型，返回的是一个实体类的还，鼠标浮到上面，按住ctrol+鼠标左键可跳转到实体类。
实体类GxAgingDevice.java中写好
@Data @TableName("gx_aging_device") public class GxAgingDevice implements Serializable { private static final long serialVersionUID = 1L; /**主键*/ @TableId(type = IdType.UUID) private java.lang.String id; /**装置编号*/ @Excel(name = "装置编号", width = 15) private java.lang.String deviceCode; /**装置名称*/ @Excel(name = "装置名称", width = 15) private java.lang.String deviceName; /**IP地址*/ @Excel(name = "IP地址", width = 15) private java.lang.String deviceIp; /**是否合格*/ @Excel(name = "是否合格", width = 15) private java.lang.String isqualified; /**所属任务*/ @Excel(name = "所属任务", width = 15) private java.lang.String taskCode; /**老化类别*/ @Excel(name = "老化类别", width = 15) private java.lang.String agingKind; /**老化温度*/ @Excel(name = "老化温度", width = 15) private java.lang.String agingTemparature; /**老化时长*/ @Excel(name = "老化时长", width = 15) private java.lang.String agingDuration; /**起始时间*/ @Excel(name = "起始时间", width = 15) private java.lang.String startTime; /**define1*/ @Excel(name = "人员", width = 15) private java.lang.String donePerson; /**define2*/ @Excel(name = "所属订单", width = 15) private java.lang.String ownOrder; /**define3*/ @Excel(name = "define3", width = 15) private java.lang.String define3; /**define4*/ @Excel(name = "define4", width = 15) private java.lang.String define4; }
这个实体类是代码生成器生成的，很多注解不需要加也可以正常使用。
2.service层写好逻辑
这里不需要特别的逻辑，生命一下就行
IStatisticsAndQueryService.java中写好
//根据装置编号查询老化装置详细信息 public List<GxAgingDevice> queryAgingDeviceByDeviceCode( String deviceCode);
StatisticsAndQueryServiceImpl.java中写好
@Override public List<GxAgingDevice> queryAgingDeviceByDeviceCode(String deviceCode) { // TODO Auto-generated method stub return this.statisticsAndQueryMapper.queryAgingDeviceByDeviceCode(deviceCode); }
3.controller层
@RestController
@RequestMapping("/stasticsandquery/stasticsAndQuery")
@Slf4j
public class StatisticsAndQueryController {
@Autowired
private IStatisticsAndQueryService IStatisticsAndQueryService;
@PostMapping(value = "queryAgingDeviceByDeviceCode") public Result<List<GxAgingDevice>> queryAgingDeviceByDeviceCode(){ System.out.println("queryAgingDeviceByDeviceCode开始"); Result<List<GxAgingDevice>> result = new Result<List<GxAgingDevice>>(); List<GxAgingDevice> lists = this.IStatisticsAndQueryService.queryAgingDeviceByDeviceCode(this.deviceCode); System.out.println("queryAgingDeviceByDeviceCode"); System.out.println(lists); result.setResult(lists); result.setSuccess(true); return result; }
}
@PostMapping 对应前端postAction @GetMapping对应前端getAction
在controller类头需加注解
@RestController
@RequestMapping("/stasticsandquery/stasticsAndQuery")
@Slf4j
@PostMapping(value = "queryAgingDeviceByDeviceCode")前后端交互路径
4.vue前端
在data()中写好url 对应后端 声明一个数组来接收后端传来的list类集合
data() {
return {
AgingDevice:[],
url:{ queryAgingDeviceByDeviceCode:"/stasticsandquery/stasticsAndQuery/queryAgingDeviceByDeviceCode", },
}
}
created()方法为点开页面的时候就执行里面的方法
调用postAction 把后端的结果赋值给数组 AgingDevice
created() { this.loadData(); }, methods: { loadData() { postAction(this.url.queryAgingDeviceByDeviceCode).then((res) => { if (res.success) { this.AgingDevice = res.result; } }) }, }
在table中注册数据源为 AgingDevice
<a-table :columns="columns" :dataSource="AgingDevice" >
在columns中给相应列dataIndex复值为类GxAgingDevice中的属性
columns: [{
title: '装置编号',
dataIndex: 'deviceCode',
key: 'id'
}, {
title: '装置名称',
dataIndex: 'deviceName',
key: 'name'
}, {
title: 'IP地址',
dataIndex: 'deviceIp',
key: 'ip'
}, {
title: '老化类别',
dataIndex: "agingKind"
}, {
title: '测试结果',
dataIndex: 'isqualified',
key: 'result'
},
/* {
title:'人员',
dataIndex:"donePerson"
},*/
{
title:'所属任务',
dataIndex:"taskCode"
},
{
title:'所属订单',
dataIndex:"ownOrder"
}
/*,{
title:'时间',
dataIndex:"time"
}*/],
这样就实现了数据库数据传到页面显示。
前端页面数据传到后端过程类似，也是通过getAction和postAction方法
要注意下注解 把参数传到后端用@RequestParam(name="") name对应前端参数的名字
passDeviceCode(record){ var param = {}; param.deviceCode = record.deviceCode; console.log( record.deviceCode); getAction(this.url.passDeviceCode,param); }
//前端传过来的装置编号，用于查询装置的在各工序的详细信息 @GetMapping(value = "/passDeviceCode") public void passDeviceCode(@RequestParam(name="deviceCode") String deviceCode){ System.out.println(deviceCode); this.deviceCode = deviceCode; }
把实体类传到后端用@RequestBody
postAction(this.url.saveTask,this.Task)
public Result<Boolean> save(@RequestBody Task task){
前后端实体类的属性名和属性格式（比如时间）都要对应好。
目前发现传参的时候用getAction,传实体类的时候用postAction。