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。