当前课程知识点:软件开发实训--动态网站开发 >  6 用户管理功能实现 >  6.4用户添加、编辑界面实现 >  6.4.1用户添加、编辑界面实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

6.4.1用户添加、编辑界面实现在线视频

下一节:6.5.1用户管理添加用户调试

返回《软件开发实训--动态网站开发》慕课在线视频列表

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我们用

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

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

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

和编辑操作

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

我们就需要去运行测试

对于用户管理的

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

我们下节课再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

6.4.1用户添加、编辑界面实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。