当前课程知识点:软件开发实训--动态网站开发 > 7 用户管理功能实现二 > 7.2用户信息编辑的实现 > 7.2.1用户信息编辑的实现
同学你好
欢迎回到软件开发实训课堂
前面咱们已经讲了用户的添加以及它的查询
那么用户信息已经存在了
这个时候我们该如何去编辑它的内容
这节课咱们就来看一看用户的编辑
为了完成编辑操作
那么首先是需要去查询
把用户信息从数据库里查询出来
然后放到我们的界面上
当我们界面展示给用户后进行修改
最后再保存
回到数据库中
这是编辑的一个过程
我们来看如何实现
在实现添加的时候
我们直接访问了编辑界面
但是对于已经拥有的数据
我们要进行编辑的话
就必须先要进行查询
我们查询的入口就从列表页进入
所以我们要打开listuse这个模板
进行编写
首先我们在列表的头部加上一个单元格
这个单格我们主要是让它
撑开下一个单元格的个数
好
才是我们需要写内容的地方
这里我们要写两个内容
编辑
实际上还应该有一个删除
我们先来完成编辑的操作
这里我们需用超链接来添加一个功能链接
超链接的地址我们使用动态获取
所以要加上一个前缀给属性
然后
通过圈A加上一对大括号
动态的去获取我们的url地址
那么我们编辑时是需要把数据传递给
我们的
编辑页面
而传递的数据呢
就是我们的用户ID
如果我们这样写的话
那么他是不能够正确来执行的
对于simleaf来讲
我们要把它用双斜杠括起来
这样他才能正确地计算表达式
如果不想用双斜杠的话
那就得用字符串的连接形式
那样写起来就显得更加复杂一些
所以用双杠的语法还是比较简洁的
这里我们在超链接写上文字编辑
这样当我们在网页上浏览时
列表页面就多了一个编辑链接
我们打开浏览器来看一下
在我们的列表页多了一个编辑
当我们点击编辑的时候
就进入到了我们相对应的
编辑页面
看一下
已经把账号密码姓名手机等信息填进去了
那么填进去后
我们需要去修改
比如说我们给他原来没有电子邮件
现在我们加上一个电子邮件信息
然后点击保存
密码他要求必须输入我们这里边
把密码给它加上
在保存操作时
如果说保存成功
它应该转到lest页面
出现了错误
就返回到我们的 这个界面
现在返回到这个界面了
说明我们提交时出现了异常
打开我们的环境来看一下输出
这里边已经提示我们
sysadmin
是一个重复性的值
那么为什么会出现这样的情况
我明明是去修改了
可是他却新增了一条
使得我们的信息发生了重复
这是什么原因呢
gpa它规定如果一个实体信息去保存时
它的关键值是空的
那么认为是新增
如果关键字段是非空的
那就是更新了
这说明一个问题
我们在提交数据时
他的主键UID是空的
所以他才会把我们修改的
变成了我们添加信息了
所以我们打开
这个模板
查看一下我们是否把UID这个信息
给他提供了
在这里我们可以搜索一下
看看我们是否加了UID
但经过搜索根本就
没有加UID所以他把我们本应该修改的操作
变成了新增操作
那么我们在账号这里
加上一个隐藏域来解决
这个问题
input类型为hidden
我们隐藏处理
UID这样
我们就把UID隐藏的放在这里
如果说是通过查询过来的
那么UID他就有值
如果不是通过查询进来
而是直接进来
那么UID就没有值
这也就实现了修改和添加的两个操作
我们现在重新添加信息
然后保存
回到了列表页
现在我们去编辑它
我们把姓名加上一些信息
手机加上一些信息
然后进行保存
可见姓名
手机已经被改了
也就是说我们刚才的问题已经修改了
但是我们在实际应用系统的时候
如果修改个人信息
往往密码是不修改的
所以这个时候我们来看一下
不传递密码
会怎么样
我们在这里只需要加一个条件说
如果UID它有值
不为空
并且UID是大于零的
这个时候我们就不让它显示信息了
那么对于SIMLEAF来讲
用这样的语法
它会显示出来这是满足了条件后显示这个密码
这样
当条件不满足这个的时候
它就显示密码
我们来看
为了确保密码修改还是没有修改
我们需要预先的看一下数据库中密码的信息
打开我们的命令行
查询用户信息
我们可以看到当前密码是
有信息的
第二条里面密码是XADW这说明我们的密码
是存在的
现在我们来进行修改
在列表页我们点击编辑
然后
我们直接修改姓名后的W去掉
点击保存
它回到了编辑页
说明我们的提交出现了错误
这个错误很显然是没有提供密码造成的
所以为了解决它
我们把密码隐藏在界面的hidden里面
这是一个简单的解决方式
还有一种办法把密码的
notnull给它去掉
因为我们在网页上实际上已经判断了不能为空
如果不想在这里加这句话
如果不想添加表单域
就把实体中密码的注解
not null
去掉
这样我们在修改的时候
密码就可以为空
然后我们再回过头来用我们的代码
在这里把它
再合并回去
那么这个操作实际上
也就防止了我们在修改的时候
你界面上密码是隐藏的
别人给你隐藏那块一修改
那么你的密码就被修改了
通过添加这样的操作以后
即便他在网页上把密码修改了
也不会引起我们数据库中密码的修改
所以这也防止了密码被篡改的一种方式
那么实际上如果我们把notnull去掉了
也能够满足这样的需求
好
我们重新启动程序
来看一下
我们输入新的用户
来看一下
这样一来我们的数据就都保留下来了
刚才我们输入的也就保留了
所以我们 又起作用了
刚才没有起作用
就是因为我们没有怎么样把新修改的给他发布
到目标位置
没有自动复制过去
需要我们重新构建才可以复制过去
这是一个
再一个我们修改完成后以及添加完成后
并没有得到提示信息
现在我们把这个提示信息给它加上
为了得到提示信息
我们在存储完成后
应该给出一个成功的提示
这里我们通过
redirectattributes
这个对象来把存储的信息给他提交到界面去
这里写OK
然后保存成功
因为我们转向的有两个界面
一个是
一个是list转向list
那一定是保存成功了
所以我们在list这边先显示
在用户管理的提示行里
下面我们加入一行
在这里我们加一个提示语句
alert
来显示我们的成功消息
我们来看一下
打开界面去添加
text2
密码的长度
还有手机的长度以及账号的长度还没有做限制
我们添加的时候出现了错误
所以他回到的是编辑界面
数据太长
mobile超过了11个
这个我们可以在界面上去限制他
在mobile字段输入域这一块
加上长度限制
maxlength等于11
同样的电子邮件这里
maxlength等于100
这样就省得我们输入的数据过长而造成
无法提交成功
对于姓名和账号
我们也可以限制它最大的程度等于20
和我们数据库上尽可能的对应起来
密码20
我们的账号长度也是20
这样就可以把它限制住
点击保存
存储数据
可以看到已经正常的提示了
保存成功
那么有了成功提示
同样的我们需要在出错的时候还有错误提示
那么出错时我们回到的是当前编辑页面
所以我们在编辑页面的标题下面来加一行
我们首先判断一下
是否有错误发生
haserror
有错误我们就显示错误
把它显示出来
所有的错误信息都在这里展示出来
用一个空格间隔
我们把空格间隔要放在外面
因为我们
需要把它循环
每一个错误都要循环出来
这样来写
text等于
循环变量
err把err这个输出来就可以了
可以在这
加上空格
这样每个错误消息出来以后
它有一个空把它间隔开
当然我们可以用其他的标签来间隔
这个也是没问题
比如说无序列表或者有序列表
让他按照列表的形式把错误消息
一条一条的显示出来
我们在这里来回车看一下
即便是没有提示信息
我们这个绿色的提示框还在
我们可以加一个条件语句把它去掉
打开listusers
在这里加条件
th
if
保证它是非空的
说它是空的话
就把它显示出来
反条件
空的话就是不显示出来
所以unless和这个if语句正好是条件相反的
在我们刷新界面就没有了
然后我们新加编辑用户
这里出现了一个错误
我们加了一个错误消息
这应该是对错误消息处理的时候出现了错误
在我们的uers编辑
我们来看一下
我们加一个S这个方法名
这里说不能用星号来绑定我们的字段
我们来看一下
这里判断的是如果有错误的话
那么这里再写一下
如果如果什么呢
如果我们对象fields
有出现
也就是存在这个对象
就说明有错了
等于我们把它在没有错的情况下拦截了
刷新界面
haserrors
有错误
我们来看一下错误的位置不应该在这里
我们应该把它移到表单里去
因为表单发生了错误
所以它一定要放在form里面去
不能放在form的外面
我们来看一下
刷新
这就正常了
然后我们把它的 给他
danger用红色来标注
如果你觉得下面这些个红线比较麻烦
你可以让他不要验证html的错误
这样当我们提交后
如果出现了错误
他就能够用红色的字给我们显示出来
保存成功
我们的页面
用fluid太宽
内容都已经看不见了
你把它重新用content
然后刷新看一下
这样我们的界面就能完整地展现出来了
所有的信息都可以完整展现出来
好
有关用户编辑我们就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试