新增了一个新功能,隶属公司需要从另一张表中获取。
下拉框中需要展示的是 company_id 和 company_name
前端改造
前端改造分为Vue页面和js文件
修改Vue页面
前端页面展示:
<el-form-item label="隶属公司" prop="companyId">
<el-select v-model="form.companyId" placeholder="请选择隶属公司">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
修改为:
<el-form-item label="隶属公司">
<el-select v-model="form.companyId" placeholder="请选择隶属公司">
<el-option
v-for="item in companyOptions"
:key="item.companyId"
:label="item.companyName"
:value="item.companyId"
:disabled="item.status == 1"
></el-option>
</el-select>
</el-form-item>
它有个 companyOptions的字段,因此要在添加页面进行数据初始化。
handleAdd()
找到添加按钮对应的方法:
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加车间";
},
修改为:
/** 新增按钮操作 */
handleAdd() {
this.reset();
getWorkshop().then(response => {
//this.companyOptions = response.companyOptions;
this.open = true;
this.title = "添加车间";
});
},
getWorkshop()
getWorkshop()的方法如下:
// 查询车间详细
export function getWorkshop(workshopId) {
return request({
url: '/digital/workshop/' + workshopId,
method: 'get'
})
}
可以看到,这个方法里有个参数 workshopId,这个参数只有在修改页面有,添加页面是没有的,
如果不传参数,进行调用,是会直接报错的。
因此,要先判断这个参数是否为空。
getWorkshop()修改如下:
import {
praseStrEmpty } from "@/utils/ruoyi";
// 查询车间详细
export function getWorkshop(workshopId) {
return request({
url: '/digital/workshop/' + praseStrEmpty(workshopId),
method: 'get'
})
}
praseStrEmpty方法需要额外导入
前端改造就完成了,接下来进行后端改造
后端改造
后端改造需要添加对应的方法。
controller方法
原先的方法如下:
/**
* 获取车间详细信息
*/
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
return AjaxResult.success(workshopService.selectWorkshopById(workshopId));
}
它这个方法直接返回根据workshopId查询的数据,因为是添加页面,没有workshopId,因此不返回任何数据,所以前台隶属公司的字段什么都不会显示。
改造后的代码如下:
/**
* 获取车间详细信息
*/
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
先说下 AjaxResult.success(workshopService.selectWorkshopById(workshopId));
这个代码的逻辑。
/**
* 返回成功数据
* @return 成功消息
*/
public static AjaxResult success(Object data){
return AjaxResult.success("操作成功", data);
}
public static AjaxResult success(String msg, Object data){
return new AjaxResult(HttpStatus.SUCCESS, msg, data);
}
public AjaxResult(int code, String msg, Object data){
super.put(CODE_TAG, code);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data)){
super.put(DATA_TAG, data);
}
}
它等同于,改造后的代码:AjaxResult ajax = AjaxResult.success(); ajax.put("data",workshop);
public static AjaxResult success(){
return AjaxResult.success("操作成功");
}
public static AjaxResult success(String msg){
return AjaxResult.success(msg, null);
}
public static AjaxResult success(String msg, Object data){
return new AjaxResult(HttpStatus.SUCCESS, msg, data);
}
public AjaxResult(int code, String msg, Object data){
super.put(CODE_TAG, code);
super.put(MSG_TAG, msg);
if (StringUtils.isNotNull(data))
{
super.put(DATA_TAG, data);
}
}
@Override
public AjaxResult put(String key, Object value)
{
super.put(key, value);
return this;
}
可以看到,这两个方法的逻辑是一样的,区别在于,最后判断data是否为null,如果不为null,则put数据进去。
只不过我在中间增加了新的业务逻辑:ajax.put("companyOptions",companyService.selectCompanyAll());
service方法和mapper方法
代码如下:
@Autowired
private IDigCompanyService companyService;
service接口方法
/**
* 查询全部公司信息
* @return
*/
List<DigCompany> selectCompanyAll();
service接口实现类的方法
@Override
public List<DigCompany> selectCompanyAll() {
return digCompanyMapper.selectCompanyAll();
}
mapper映射类中的方法
/**
* 查询全部公司信息
* @return List<DigCompany>
*/
List<DigCompany> selectCompanyAll();
xml文件方法
最后找到对应的xml文件,SQL语句如下:
<sql id="selectDigCompanyVo">
select company_id, company_name, company_shortname, belong, create_by, create_time, status, del_flag, update_by, update_time from dig_company
</sql>
<select id="selectCompanyAll" resultMap="DigCompanyResult">
<include refid="selectDigCompanyVo"/> where status = '0'
</select>
而这个语句查询的页面,正是开头给的company页面。
到这里,这个功能就开发完成了。
部署测试
简单部署并启动,测试一下,结果报错了
Request method ‘Get’ not supported
修正BUG
这个报错信息是说,请求的方法无法匹配GET请求
这个原因是什么导致的呢?
首先看一下 controller 方法头的注解
@GetMapping(value = "/{workshopId}")
value = "/{workshopId}"
是说workshopId是可变参数
(并非没有),例如 /3,/5,/567
并不说workshopId不需要.
而在新增页面,我们是不传workshopId的,也就是说我们的请求路径实际上是 /
这样的请求路径,肯定没有对应的方法去处理,自然就报错了。
那么我们让该方法可以匹配 / 请求,修改如下:
@GetMapping(value = {
"/", "/{workshopId}" })
部署测试一下,结果再次报错:
Required URI template variable ‘workshopId’ for method parameter type Long is not present
(URL中需要传入方法参数为Long类型的workshopId,该参数不存在)
看下后台报错:
org.springframework.web.bind.MissingPathVariableException:
Required URI template variable 'workshopId' for method parameter type Long is not present
----以下略----
这个workshopId是必须的,但是我们不提供,因此无法匹配,那我们修改下参数变量,让它变成不是必须的,修改如下
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = {
"/", "/{workshopId}" })
public AjaxResult getInfo(@PathVariable(value = "workshopId", required = false) Long workshopId){
...代码略...
}
总结
修改前的代码:
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = "/{workshopId}")
public AjaxResult getInfo(@PathVariable("workshopId") Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
总的修改过后的代码,如下:
@PreAuthorize(hasPermi = "digital:workshop:query")
@GetMapping(value = {
"/", "/{workshopId}" })
public AjaxResult getInfo(@PathVariable("workshopId", required = false) Long workshopId){
AjaxResult ajax = AjaxResult.success();
ajax.put("companyOptions",companyService.selectCompanyAll());
if (StringUtils.isNotNull(workshopId)){
DigWorkshop workshop = workshopService.selectWorkshopById(workshopId);
ajax.put("data",workshop);
}
return ajax;
}
测试部署
成功!