[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
请求方式
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 |
错误信息 |
备注
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("员工信息修改成功");
}