当前课程知识点:软件开发实训--动态网站开发 > 6 用户管理功能实现 > 6.4用户添加、编辑界面实现 > 6.4.1用户添加、编辑界面实现
同学你好
欢迎回到软件开发实训课堂
上节课咱们已经将用户的控制器实现完成了
那么这节课咱们接着来看一下用户的添加
编辑界面的实现
为了实现这些界面
咱们需要用到simleaf这样的模板
我们已经将simleaf的依赖包加入到
pom.SML了
所以我们现在要做的就是直接去添加我们的
界面
对于simleaf
spring boot给他提供了一个默认
的模板页面
位置模板页面所放置的位置
这个位置就是timplates
timplates要放在类路径下的
timplates
所以我们找到timplates
来新建一个模板页面
simleaf 使用的模板页面
是htmi格式
也就是我们普通的html
因为simleaf 如果你没有把它当做
模板来用的话
它也能够很正常的
按照你设计的格式展示这个界面
因为simleaf 所提供的模板里边
的相关操作用的都是html的属性方式
这样有一个好处
就是它不影响html界面
直接去浏览的效果
好
我们来看一下如何添加在
timplease这个目录上
点击右键
新建里边我们来新建一个html页面
这个页面的名称你要注意了
要和我们控制器里边转向的名称一样
我们先来实现我们的编辑界面
我们编辑页面叫做edituser
注意扩展名
它已经自动的给我们加上了
然后我们点击完成
这样就获得了系统给我们创建的htm模板
为了使用我们的simleaf这个模板
我们需要加一个命名空间
在html标签上
用xmlNS定义一个前缀th
然后给出simleaf的标识
sim leaf.org
这个红线是因为 他不认识这个
所以没有关系
然后我们把title给它改掉
叫添加或编辑用户
然后我们把
样式以及 给他
拉进来
在后台我们不使用
vivo主要是为了掩饰simleaf和
及 的使用
把css拿进来
再把我们对应的Tcare
以及 脚本文件也给他拿进来
对于cimleaf来讲
我们学基础的时候
已经了解到
我们要想知道它的路径的话
我们需要用它的表达式来取路径
表达式呢开始是缺A加上大括号
结束就是大括号
这个意思是说我们从网站的根路径开始查找
CSS目录下面的文件
同样的道理
我们把脚本也给它改写成cimleaf的
路径获取格式
让他动态的去计算我们的路径
好
现在我们就可以动手去编写我们的表单了
首先我们增加一个DIV给DAV的class
属性为container-fluid
fluid让他撑满整个界面
在宽度方向撑满界面
然后我们加入行的定义
这个行
我们放上这个标题
编辑用户
然后我们使用表单
也使用行的效果
这两个可以指使一个就行
然后我们加上表单的属性action
action路径
我们就用这个方式去取圈加一对大括号
然后我们表单是存储
所以是saveuser
存储的方法
我们后台定义的是post的格式
所以我们这里一定要用post
然后在我们表单里开始定义我们的表单域
首先我们用DIV定一个表单组
label
for账号输入账号的文本框
class是form control
然后这里面我们要去与simleaf提供的对象
进行绑定
把这个输入框与我们user
对应的字段给他绑上
所以在这里simleaf提供了一个属性叫做
th object
用 加一对大括号
从上下文里可以获得这个对象
我们在编辑的时候
用的是user
我们可以去控制器里看一下
当编辑时我们存储的属性名称为user
所以在这里我们使用user对象就可以了
那么它如何来绑定这个输入控
控件呢
就是 th field
注意
这里用星号大括号
括号里写的是user里边的成员属性
这样我们就把控件绑定起来了
可以写上
我们输入框的一些提示
用placeholder
placeholder
请输入
账号
当然如果你有提示信息的话
也可以加到后面这里我们省略了提示信息
只是放入了placeholder这一些信息
然后输入账号时你也可以多写一些
比如说字符
字符个数
不得少于六个
这些信息
以帮助用户在使用时能够知道你账号呢
有一个什么样的验证
还有它是必须输入的
必须输入的
这里我们只要加一个
H5的reduired验证就可以了
reduired属性不需要直
这样我们提交表单时
如果这个账号没有输入的话
它就会出错
第二个字段
form group
注意拼写
我们可以把密码放在这里
input
class等于form control
th fired
等于密码
密码也是必须的
当然你也可以提供placeholder
来提示用户
你的密码的组成形式和必须输入
这个字符的长度
你可以放在 里去验证
也可以放在后端去验证
根据你自己的习惯和系统的设计要求
然后我们还有姓名
form group
这里边我们又要改一下
你复制的东西就要改对应的相关信息
name
input
text
th
field
一定要用新号来绑定
姓名不是必须的
这里写姓名
用汉字
前面我们把文本框的类型给它加上
因为这个密码它是必须要有类型
才能显示为密码
否则默认的都显示的文本框
text
test实际上是可以省略属性
加上class
分母控制器
以及提示信息等等
这样我们就有了姓名
还有一个
我们来看一下有关性别和电话号码等等
我们直接来复制一下电话号码
mobile
手机
把对应的信息一定要改掉
电子邮件
可以使用H5的EMAIL框来实现
email的接收
好
最后这几个我们默认的就让它有一个值
比如说validstate状态默认
我们用0表示它是无效的
1表示有效的
那么我们如果说注册完成后
他立马是有效的
我们可以在这里加一个隐藏的
只要在表单内部就行
加一个隐藏的
让用户注册完成后立马就是有效的
validstate
一定要把字段名称要写正确了
否则的话到时候找不着这个字段
那么给它的默认值你可以直接设为一就行了
这样的话
这个绑定其实可以是不需要的
除非是在修改的时候
我们来绑定它
我们就给他一个默认值一
在我们的实体类里面直接给他初始化为一
这样的话
你定义的用户一旦进来
它首先是有效的
其他的字段我们就不需要出现在界面了
然后我们放一个按钮
button
我们可以让他直接提交保存
把样式给她
让她看起来好看一些
primarily我们用
他就免去了我们去给它定义样式的麻烦
现在我们已经基本上把表单已经写好了
那么我们写的表单是否能够正确地执行添加
和编辑操作
我们首先需要去看它是否能够完成添加动作
我们就需要去运行测试
好
对于用户管理的
添加编辑界面的实现就讲到这里
我们下节课再见
-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随堂测试