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

手机

把对应的信息一定要改掉

电子邮件

EMAIL

可以使用H5的EMAIL框来实现

email的接收

好

最后这几个我们默认的就让它有一个值

比如说validstate状态默认

我们用0表示它是无效的

1表示有效的

那么我们如果说注册完成后

他立马是有效的

我们可以在这里加一个隐藏的

只要在表单内部就行

加一个隐藏的

让用户注册完成后立马就是有效的

validstate

一定要把字段名称要写正确了

否则的话到时候找不着这个字段

那么给它的默认值你可以直接设为一就行了

这样的话

这个绑定其实可以是不需要的

除非是在修改的时候

我们来绑定它

我们就给他一个默认值一

在我们的实体类里面直接给他初始化为一

这样的话

你定义的用户一旦进来

它首先是有效的

其他的字段我们就不需要出现在界面了

然后我们放一个按钮

button

我们可以让他直接提交保存

把样式给她

让她看起来好看一些

primarily我们用

他就免去了我们去给它定义样式的麻烦

现在我们已经基本上把表单已经写好了

那么我们写的表单是否能够正确地执行添加

和编辑操作

我们首先需要去看它是否能够完成添加动作

我们就需要去运行测试

好

对于用户管理的

添加编辑界面的实现就讲到这里

我们下节课再见