“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂

”

今天，記錄一篇技術文章吧，也是解決了好久才解決掉的（說來也慚愧）。

涉及技術

前端：vue，element ui

后端框架：bladex

其中后端涉及到的技術有：springboot,srping mvc,mybatis plus,shiro,SpringCloud等

其實這個bladex封裝的還是挺復雜的，有些地方你若是想在他的基礎上擴展自己的些內容，能改到想吐，尤其是前端，而且官方的文檔有和沒有幾乎都一樣，說的一點都不詳細……

需求說明

系統中有模板表template和模板類型表templatetype,兩者關系是多對一的關系，也就是一個模板類型中有多個模板，在查詢展示所有模板信息的時候需要顯示的是模板類型名而不是類型編號，如圖所示：

乍一看是不是很簡單，只需要在mybatis的mapper文件中配置雙方之間的映射關系就可以，我剛開始也是這么想的，但是配置完之后發現不可以，模板類型名顯示不出來。

然后換了一種思路，原理就是在查詢模板的同時，按照模板表的外鍵查詢模板名，賦值給TemplateVo類中，然后在前端獲取。

思路三言兩語就說完了，但是做起來確實麻煩，下面看看如何實現的（也算是做個記錄，忘記了回頭看看）。

前端

首先是前端的template.vue頁面,修改column中的模板類型相關內容：

column:?[{label:?"模板編號",prop:?"id",hide:true,rules:?[{required:?true,message:?"模板編號",trigger:?"blur"}]},{label:?"模板名稱",prop:?"tname",rules:?[{required:?true,message:?"請輸入模板名稱",trigger:?"blur"}]},{label:?"類型",prop:?"typename",hide:false,rules:?[{required:?true,message:?"請輸入類型",trigger:?"blur"}]},{label:?"目標",prop:?"tmubiao",rules:?[{required:?true,message:?"請輸入目標",trigger:?"blur"}]},{label:?"強度",prop:?"tqiangdu",rules:?[{required:?true,message:?"請輸入強度",trigger:?"blur"}]},{label:?"備注",prop:?"tbeizhu",rules:?[{required:?true,message:?"請輸入備注",trigger:?"blur"}]},{label:?"創建者",prop:?"userName",rules:?[{required:?true,message:?"請輸入創建模板的人",trigger:?"blur"}]},{type:?'date',label:?'創建時間',display:?true,format:?"yyyy-MM-dd?hh:mm:ss",valueFormat:?"yyyy-MM-dd?hh:mm:ss",prop:?'tdate'},]

前端其余都不用在改動了。

后端

1.在模板類型的mapper文件TemplatetypeMapper中新加根據編號查詢名稱的接口：

/***?根據編號查詢接口*?@param?id*?@return*/String?typeNameList?(Integer?id);

2.在模板類型的配置文件TemplatetypeMapper.xml中添加sql映射：

<select?id="typeNameList"??resultType="string">select?typename?from?hbv_templateType?where?id?=?#{id}</select>

3.在TemplateVo中新加字段：

//模板類型名private?String?typename;

4.在ITemplatetypeService中添加如下接口:

/***?根據編號查詢名稱*?@param?id*?@return*/String?typeNameList?(Integer?id);

5.在TemplatetypeServiceImpl中添加對ITemplatetypeService的實現：

@Overridepublic?String?typeNameList(Integer?id)?{return?baseMapper.typeNameList(id);}

6.在TemplateWrapper文件中添加如下代碼：

//模板類型的業務接口private?static?final?ITemplatetypeService?templatetypeService;//用戶的業務接口private?static?final?IUserService?userService;static{templatetypeService?=?SpringUtil.getBean(ITemplatetypeService.class);userService?=?SpringUtil.getBean(IUserService.class);}@Overridepublic?TemplateVO?entityVO(Template?template)?{TemplateVO?templateVO?=?Objects.requireNonNull(BeanUtil.copy(template,?TemplateVO.class));String?typename?=?templatetypeService.typeNameList(template.getTypeid());String?userName?=?userService.getUserNameById(template.getTcid());//String?userName?=templateVO.setTypename(typename);templateVO.setUserName(userName);return?templateVO;}

7.最后修改控制器中的list方法：

/***?分頁?模板表*/@GetMapping("/list")@ApiOperationSupport(order?=?2)@ApiOperation(value?=?"分頁",?notes?=?"傳入template")public?R<IPage<TemplateVO>>?list(Template?template,?Query?query)?{QueryWrapper<Template>?queryWrapper=?Condition.getQueryWrapper(template);IPage<Template>?pages?=?templateService.page(Condition.getPage(query),?queryWrapper);return?R.data(TemplateWrapper.build().pageVO(pages));}

好了，至此終于完事了，運行，就可以了！！！

總結

以上是生活随笔為你收集整理的利用bladex+avue实现一对多的关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。