海上捞火锅

海上捞火锅


编辑员工

[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("员工信息修改成功");
}

页面列表

ITEM_HTML