tlias部门管理-修改部门-查询回显&修改数据

修改部门

对于任何业务的修改功能来说,一般都会分为两步进行:查询回显、修改数据

查询回显

需求

当我们点击 "编辑" 的时候,需要根据ID查询部门数据,然后用于页面回显展示。

接口描述

思路分析

明确了根据ID查询部门的需求之后,再来梳理一下实现该功能时,三层架构每一层的职责:

了解了需求之后,我们再看看接口文档中,关于根据ID查询部门的接口的描述,然后根据接口文档进行服务端接口的开发 。

路径参数接收

/depts/1/depts/2 这种在url中传递的参数,我们称之为路径参数。 那么如何接收这样的路径参数呢 ?

路径参数:通过请求URL直接传递参数,使用{…}来标识该路径参数,需要使用 @PathVariable获取路径参数。如下所示:

如果路径参数名与controller方法形参名称一致,@PathVariable注解的value属性是可以省略的。

代码实现

1). Controller层

DeptController 中增加 getById方法,具体代码如下:

/**
 * 根据ID查询 - GET http://localhost:8080/depts/1
 */
@GetMapping("/depts/{id}")
public Result getById(@PathVariable Integer id){
    System.out.println("根据ID查询, id=" + id);
    Dept dept = deptService.getById(id);
    return Result.success(dept);
}
2). Service层

DeptService 中增加 getById方法,具体代码如下:

/**
 * 根据id查询部门
 */
Dept getById(Integer id);

DeptServiceImpl 中增加 getById方法,具体代码如下:

public Dept getById(Integer id) {
    return deptMapper.getById(id);
}
3). Mapper层

DeptMapper 中增加 getById 方法,具体代码如下:

/**
* 根据ID查询部门数据
*/
@Select("select id, name, create_time, update_time from dept where id = #{id}")
Dept getById(Integer id);

启动服务,进行测试。

小结:

1.如何接收路径参数 ?
@PathVariable 注解来声明获取的是路径参数
2.在url中是否可以携带多个路径参数呢 ,如:/depts/1/0
可以,接收方式如下

修改数据

需求

查询回显回来之后,就可以对部门的信息进行修改了,修改完毕之后,点击确定,此时,就需要根据ID修改部门的数据。

了解了需求之后,我们再看看接口文档中,关于修改部门的接口的描述,然后根据接口文档进行服务端接口的开发 。

接口描述思路分析

参照接口文档,梳理三层架构每一层的职责:

通过接口文档,我们可以看到前端传递的请求参数是json格式的请求参数,在Controller的方法中,我们可以通过 @RequestBody 注解来接收,并将其封装到一个对象中。

代码实现

1). Controller层

DeptController 中增加 update 方法,具体代码如下:

/**
 * 修改部门 - PUT http://localhost:8080/depts  请求参数:{"id":1,"name":"研发部"}
 */
@PutMapping("/depts")
public Result update(@RequestBody Dept dept){
    System.out.println("修改部门, dept=" + dept);
    deptService.update(dept);
    return Result.success();
}
2). Service层

DeptService 中增加 update 方法。在 DeptServiceImpl 中增加 update 方法。 由于是修改操作,每一次修改数据,都需要更新updateTime。所以,具体代码如下:

public void update(Dept dept) {
    //补全基础属性
    dept.setUpdateTime(LocalDateTime.now());
    //保存部门
    deptMapper.update(dept);
}
3). Mapper层

DeptMapper 中增加 update 方法,具体代码如下:

/**
 * 更新部门
 */
@Update("update dept set name = #{name},update_time = #{updateTime} where id = #{id}")
void update(Dept dept);

启动服务,进行测试。

修改完成之后,我们可以看到最新的数据,如下:

到此呢,关于基本的部门的增删改查功能,我们已经实现了。 我们会发现,我们在 DeptController 中所定义的方法,所有的请求路径,都是 /depts 开头的,只要操作的是部门数据,请求路径都是 /depts 开头。

那么这个时候,我们其实是可以把这个公共的路径 /depts 抽取到类上的,那在各个方法上,就可以省略了这个 /depts 路径。 代码如下:

 一个完整的请求路径,应该是类上的 @RequestMapping 的value属性 + 方法上的 @RequestMapping的value属性。

小结: 

1.@RequestMapping 注解可以加在哪儿?
类上(可选的)
方法上
一个完整的请求路径 = 类上 + 方法上的 
### 解决 `element-china-area-data` 的数据回显问题 为了实现在 Vue.js 中使用 `element-china-area-data` 进行省市区级联选择器的数据回显,可以按照以下方法操作: #### 安装依赖包 首先确保已经安装了必要的依赖包: ```bash npm install element-china-area-data ``` #### 导入并配置组件 在项目中的适当位置导入所需模块,并设置好全局组件或局部组件。 对于全局注册方式如下所示[^1]: ```javascript // main.js 或 plugins/vue.js 文件内 import Vue from 'vue'; import { Cascader } from 'element-ui'; import ChinaAreaData from 'element-china-area-data'; Vue.use(Cascader); Vue.prototype.$areaData = ChinaAreaData; ``` 如果要在一个特定页面上单独加载,则可以在该页面对应的 `.vue` 文件里按需引入: ```javascript <script> export default { data() { return { selectedOptions: [], // 存储已选地区编码数组 areaData: require('element-china-area-data') // 加载地区数据 }; }, }; </script> ``` #### 实现双向绑定与初始值设定 为了让级联选择器能够正确显示默认值(即实现“回显”),需要通过 v-model 来建立双向绑定关系,并给它赋初值。假设服务器返回了一个对象 `{provinceCode, cityCode, districtCode}` 表示用户的所在地信息,那么就可以这样做: ```html <template> <el-cascader :options="areaData" v-model="selectedOptions" @change="handleChange"> </el-cascader> </template> <script> export default { props: ['location'], // 假设父组件传递过来的位置信息 computed: { initialSelected () { const { provinceCode='', cityCode='', districtCode='' } = this.location || {}; let result = []; if (provinceCode) result.push(provinceCode); if (cityCode) result.push(cityCode); if (districtCode) result.push(districtCode); return result.length ? result : undefined; } }, watch: { location(val){ this.selectedOptions = this.initialSelected; } }, created(){ this.selectedOptions = this.initialSelected; } } </script> ``` 这里的关键在于当接收到新的地点信息时更新 `selectedOptions` 数组的内容来触发视图刷新;同时也要注意处理可能存在的空值情况以免影响用户体验。 针对带有 "全部" 选项的情况,可以通过自定义过滤逻辑去除这些特殊项后再参与匹配过程[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值