人事管理项目-部门数据编辑

后端接口实现

修改一般分两步：第一步先根据修改ID查询数据，第二步将数据修改后保存。所以在DeptController类中插入单条查询接口及修改接口，代码如下：

前端实现

1．建立修改页面

在components目录下新建DeptUpdate.vue组件，并在路由中配置，代码

2 .绑定事件

在DeptManager页面修改绑定事件，并将行ID传递给DeptUpdate页面，代码如下：

//部分代码省略
edit(row){
  this.$router.push({/*单击修改,跳转到修改页面并传递行ID*/
    path:'/update',
    query:{
       deptno:row.deptno
    }
  });
}

3．修改页面

修改页面可以借鉴添加页面的布局，在修改页面中首先通过Vue.js的生命周期created（）方法在模板渲染之前获取后端数据，然后再渲染成视图。接着将修改的数据传递至后端进行保存，代码如下：

经过以上几步配置后，部门数据的修改功能就实现了。