用户信息修改功能
当点击用户后面的按钮时,要跳转到用户信息修改页面。而修改和添加实际上是同一个页面。
要区分跳转后是添加操作还是修改操作,在于携带的参数。
如果是添加操作,那就直接跳转过去;如果是修改操作,那就携带当前用户的id,通过get的方式传递过去。这样,在跳转到用户编辑页面的时候,可以通过get方式中是否有id参数,来区分到底是添加操作还是修改操作。如果是修改操作,还需要将要修改的用户信息从数据库中查询出来,并显示在页面中。
当用户在页面中修改完信息以后,点击提交表单按钮,向服务器发送修改用户信息的请求。
修改界面表单的上方显示的是要修改用户的id值,如果是添加用户,这个地方是不需要显示的。所以在模板中需要判断。
为用户列表页面为修改按钮添加链接
修改链接是admin/user-edit
在views/user.art中
<a href="/admin/user-edit?id={
{@$value._id}}" class="glyphicon glyphicon-edit"></a>
此时点击即可跳转,并且地址栏携带id参数。
找到编辑页面所对应的路由user-edit.js,在这里,要获取到地址栏中的id参数,从而判断是添加还是修改操作。
因为无论是message还是id参数,都是存放在req.query当中,所以可以继续解构。
引入User模块,
通过id获取到用户信息,并将user传递给模板user-edit.art。
由于这个页面就是一个表单,所以要通过表单value属性把用户的信息显示在表单的控件里面。
但是,当是添加用户操作时,并没有传递给模板user,如果模板中还是用到了User,那么将会报错。所以要先判断user存不存在,再获取它的属性。
密码不可以直接修改,要在单独的地方进行修改密码操作。有两种做法:
- 直接隐藏密码,不让用户修改
- 让用户填写密码,但是密码错误则不让用户修改
在user-edit.js中,渲染页面时,为添加和修改页面设置自己的提交页面和按钮。
if (id) {
//修改操作
let user = await User.findOne({
_id: id});
//res.send(user);
//return;
//渲染用户编辑页面
res.render('admin/user-edit', {
message: message,
user: user,
link: '/admin/user-add',
button: '修改'
});
} else {
//添加操作
res.render('admin/user-edit', {
message: message,
link: '/admin/user-edit',
button: '添加'
});
}
<form class=