编辑员工

[TOC]

简要描述

• 编辑员工

前端页面和服务端交互过程

• 点击编辑按钮时，页面跳转到add.html，并在url中携带参数[员工id]
• 在add.html页面获取url中的参数[员工id]
• 发送ajax请求，请求服务端，同时提交员工id参数
• 服务端接收请求，根据员工id查询员工信息，将员工信息以json形式响应给页面
• 页面接收服务端响应的json数据，通过VUE的数据绑定进行员工信息回显
• 点击保存按钮，发送ajax请求，将页面中的员工信息以json方式提交给服务端
• 服务端接收员工信息，并进行处理，完成后给页面响应
• 页面接收到服务端响应信息后进行相应处理

触发事件

<el-button
  type="text"
  size="small"
  class="blueBug"
  @click="addMemberHandle(scope.row.id)"
  :class="{notAdmin:user !== 'admin'}"
>
  编辑
</el-button>

接口调用

editEmployee(params).then(res => {
  if (res.code === 1) {
    this.$message.success('员工信息修改成功！')
    this.goBack()
  } else {
    this.$message.error(res.msg || '操作失败')
  }
}).catch(err => {
  this.$message.error('请求出错了：' + err)
})

请求URL

• [context/path]/employee

请求方式

• PUT

API接口

function enableOrDisableEmployee (params) {
  return $axios({
    url: '/employee',
    method: 'put',
    data: { ...params }
  })
}

参数

参数名	必选	类型	说明
createTime	是	datetime	创建时间
createUser	是	bigint	创建人
id	是	bigint	编号
idNumber	是	varchar(18)	身份证号
name	是	varchar(32)	姓名
password	是	varchar(64)	密码
phone	是	varchar(11)	手机号
sex	是	varchar(2)	性别
status	是	int	状态
updateTime	是	datetime	更新时间
updateUser	是	bigint	修改人
username	是	varchar(32)	用户名

返回示例

code: 1
data: "员工信息修改成功"
map: {}
msg: null

返回参数说明

参数名	类型	说明
code	int	返回码：1：成功 0或其他：失败
data	object	返回数据
map	map	动态数据
msg	string	错误信息

备注

• data有两种返回结果

public static <T> R<T> success(T object) {
    R<T> r = new R<T>();
    r.data = object;
    r.code = 1;
    return r;
}

public static <T> R<T> error(String msg) {
    R r = new R();
    r.msg = msg;
    r.code = 0;
    return r;
}

后端接口请求参数

• @RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)

后端代码

@PutMapping
public R<String> update(@RequestBody Employee employee){
    log.info("正在通过ID修改员工信息...");

    long id = Thread.currentThread().getId();
    log.info("本次线程的id为{}",id);

    employeeService.updateById(employee);
    return R.success("员工信息修改成功");
}