web前端 | 博客(八)用户信息修改功能
用户信息修改功能
当点击用户后面的按钮时,要跳转到用户信息修改页面。而修改和添加实际上是同一个页面。
要区分跳转后是添加操作还是修改操作,在于携带的参数。
如果是添加操作,那就直接跳转过去;如果是修改操作,那就携带当前用户的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="form-container" action="{{link}}" method="post"><div class="form-group"><label>用户名</label><input name="username" type="text" class="form-control" placeholder="请输入用户名" value="{{user && user.username}}"></div><div class="form-group"><label>邮箱</label><input name="email" type="email" class="form-control" placeholder="请输入邮箱地址" value="{{user && user.email}}"></div><div class="form-group"><label>密码</label><input name="password" type="password" class="form-control" placeholder="请输入密码"></div><div class="form-group"><label>角色</label><select name="role" class="form-control"><option value="normal" {{user && user.role == 'normal' ? 'selected' : ''}}>普通用户</option><option value="admin" {{user && user.role == 'admin' ? 'selected' : ''}}>超级管理员</option></select></div><div class="form-group"><label>状态</label><select name="state" class="form-control"><option value="0" {{user && user.state == 0 ? 'selected' : ''}}>启用</option><option value="1" {{user && user.state == 1 ? 'selected' : ''}}>禁用</option></select></div><div class="buttons"><input type="submit" class="btn btn-primary" value="{{button}}"></div></form></div>
修改数据库中的用户信息
- 将要修改的用户id传递到服务器端(
link: '/admin/user-modify?id=' + id
) - 建立用户信息修改功能对应的路由
- 接收客户端表单传递过来的请求参数
- 根据id查询用户信息,并将客户端传递过来的密码和数据库中的密码进行比对
- 如果比对失败,直接对客户端做出响应
- 如果比对成功,则将用户信息更新到数据库中
如果比对失败,要给请求处理函数传一个next,然后失败后调用next,传一个字符串类型的对象过去。并且需要携带id信息。
let obj = {path: '/admin/user-edit', message: '密码比对失败,无法修改信息', id : id};return next(JSON.stringify(obj));
但此时,app中的中间件代码是写死的,需要改善一下这个代码,把所有传递的参数拼接到地址后面。
app.js
app.use((err, req, res, next) => {//将字符串对象转换为对象类型//JSON.parse()const result = JSON.parse(err);//console.log(err);let params = [];for(let attr in result) {if(attr != 'path'){params.push(attr + '=' + result[attr]);}}return res.redirect(`${result.path}?${params.join('&')}`);
})
输入错误密码,将得到这样的提示
而地址栏是这样的
如果比对成功,把从req.body中解构出用户的属性,并更新到数据库中。其中密码是不能更新的。
//不包括idconst { username, email, role, state, password } = req.body; await User.updateOne({_id: id}, {username: username,email: email,role: role,state: state});
通过重定向
res.redirect('/admin/user');
提交成功后,页面重定向到user页面了。
此时,用户信息修改功能完成。
web前端 | 博客(八)用户信息修改功能相关推荐
- web前端 | 博客(二)登录功能
实现登录功能 创建用户集合,初始化用户 连接数据库 创建用户集合 初始化用户 为登录表单项设置请求地址,请求方式(GET方法会将参数放到地址栏中,不隐蔽,要用POST方法,它将参数放到消息体中,比较隐 ...
- IDEA中实现用户信息修改功能
实现用户信息修改功能,首先从数据库中读取用户个人信息在前台页面展示,通过修改用户某些字段信息,以form表单提交的方式,将修改后用户的信息进行保存到数据库,同时页面无刷新的显示更新后的用户数据信息 整 ...
- Django博客系统(用户中心修改)
1. 用户中心接口设计 1.请求方式 选项 方案 请求方法 POST 请求地址 /center/ 2.请求参数:表单 参数名 类型 是否必传 说明 username string 否 用户名 avat ...
- 瞧一瞧看一看:新手小白写Web前端博客
二序 2.1 表格标签 2.1.1 <table> : 表格的最外面容器<tr> : 定义表格行<th> : 定义表头<td> : 定义表格标题注:之前 ...
- 黑马博客——详细步骤(五)项目功能的实现之用户信息修改
2.4 用户信息修改 1. 将要修改的用户ID传递到服务器端(作用:区分添加用户功能还是修改用户功能) 2. 建立用户信息修改功能对应的路由 点击修改按钮 能看到用户信息 点击修改按钮 解决方式: 其 ...
- 【JSP】用户信息界面操作 ---- 用户信息修改
文章目录 用户信息界面操作 ---- 用户信息修改 Ⅰ.修改userinfo.jsp 实现修改页面跳转 Ⅱ.创建 userUpdate.jsp 修改页面 Ⅲ.完善 dbHelper类,添加用户修改方法 ...
- PHP系统开发/Web文章博客
PHP前后端交互 | web文章博客 前言 环境部署 一.登录 二.注册 三.主页 四.详情 五.编辑 六.删除 七.注销 八.发表 全部文件 总结 前言 一.项目需求: 做个基础的页面,文章博客we ...
- Node.js从零开发Web Server博客项目笔记
代码运行流程 首先开启服务器,在npm run dev的时候运行了bin目录下的www.js文件,启动http服务 当前端进行访问的时候,经过app.js文件 App.js是整个项目的入口文件,首先判 ...
- 前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
文章目录 前言 博客系统 博客列表页 紧急修改一下背景图片,虽然上面那张图很美,但是小了.特别的模糊,我就在替换一下背景图 html 代码部分 通用 css 代码部分 博客列表页专属 css文件 博客 ...
最新文章
- Springmvc配置定时任务注解开发
- linux 内核网络协议栈--IP层开始直到包被处理(三)
- rnn词性标注算法_Python预测算法哪家强?权游龙妈是生还是凉凉?
- action 带参数跳转
- linux下遍历目录树方法总结,linux下遍历目录树方法总结(下)
- java package报错_Java从入门到精通(一)
- 前端学习(2473):创建页面组件
- string contains不区分大小写_String基础复习
- 快手通过标签添加的我_快手怎么上热门?快手短视频推荐指标有哪些?
- mingw linux socket,MingW上编译WinSocket程序undefined reference to `WSAStartup@8'报错的解决办法...
- inno setup打包的安装包如何在卸载完程序后可以继续安装_这两个方法就够了!快速制作Python程序Windows安装包...
- 线性表:4.结合顺序表和链表——静态链表及C语言实现
- Timeline窗口详解
- 008 查看套接字选项是否受支持(获取当前环境下套接字选项默认值)
- axure如何页面滑动时广告位上移_Axure8.0教程:模拟滑动效果
- python跳过本次循环_Python的一些格式与逻辑控制语句
- myBatis --(3)数据的增删改查
- blog推荐 - Sources of Insight
- 台达触摸屏MODBUS直接与台达变频器通讯程序
- Android 中的hook技术是什么
热门文章
- 常用的webstore和vscode插件
- 移动互联网十年,谁主沉浮?
- 贸然的对音乐版权进行维护,这种激进的方式将如何收场?
- ubuntu一键卸载php
- Cisco AnyConnect Secure Mobility Client 4.10.05111 (macOS, Linux, Windows)
- F014-正本清源话通缩 #F1175
- 如何关闭Microsoft Office正版增值计划?
- OC 十进制 二进制 转换
- 穿越火线怎么在服务器显示人数,现在穿越火线每天平均有多少人在线?
- linux黄颜色文件,了解 Linux 文件的颜色代码