当前课程知识点:软件开发实训--动态网站开发 > 7 用户管理功能实现二 > 7.1用户查询模板实现 > 7.1.1用户查询模板实现
同学你好
欢迎回到软件开发实训课堂
前面咱们把用户添加实现完成了
并做了调试
那么这节课我们来看一下如何去查询用户数据
把它展示在列表页面
在上节课的时候
我们存储完数据后进行转发时
没有listusers这个模板出现了错误
所以我们临时添加了一个listusers
这个页面
现在我们把它打开
就在这个页面里
我们实现我们的列表页面
在实现之前
我们来看一下我们在控制器里边的相关时限
在讲控制器的时候
咱们已经实现了这么一个list方法
让他转向的界面就是我们的模板listusers
现在我们就来看一下
如何在界面上展示出我们的用户信息列表
首先我们把这个标题改一下
改为用户管理
在我们的html上加上sim leaf的
命名空间
它的前缀是th
标识呢就是它的网址
然后我们把CSS以及GS的相关文件
拖动进来
实际上对于 来讲
它可以把头部作为一个碎片
然后把它插入进来
这里我们先来直接把他拖进来
后边我们再说如何把它公用化
好
进来后
记住要把这个标签的属性都改为TH前缀
这样才能够用上sim leaf的相关功能
A大括号它处理的是url地址
记得改属性的前缀为th
否则的话我们即便是使用了圈A大括号
也不能够正常的运行
好
这样我们把脚本和CSS样式就拿进来了
然后我们用 来编写一个容器
让他用权宽容器fluid
写上一个标题行
然后我们用H5来写一个标题
用户管理
再加入一行
我们放入搜索用的表单
然后写上我们的搜索
表单域
关键字
类名为form-group
在DIV里边加入标签
写上关键字
在他的后边加上一个input类型
就用txt就可以了
然后placeholder提示信息可写入
请输入
关键字
进行搜索
这个搜索我们可以搜索用户的姓名账号
电话号码以及email地址等等
然后我们可以给它绑定一个属性
用我们的name来绑定就可以了
属性的名称就叫KW
当我们提交这个表单时
我们用action把它提交给我们的list
用前缀
th
把它变成
我们通过动态获取url
listusers
那么提交的方法可以使用
get也可以使用post
我们这里就使用post来提交
因为我们对用户的搜索仅需要一个关键字
所以我们不用再有其它域
然后加上一个按钮
用来搜索
按钮
就用submit就可以了
然后
给出class
primary把他
用 进行美化
文字就写为搜索
这样表单提交后实际上是提交给了
listusers控制器
而当前页面也是listusers所以实际上
还是提交给了他当前的页面
这样我们就把表单写好了
下面我们来把查询出来的内容列出来
增加一个的行
然后在行里面我们用表格来列出它
表格
我们先给出他基本的样式
table
然后我们用thead
写出表格的头部
根据你的需要
你可以去写它相关的信息
第一个单格我们可以用
序号或者排序等等
第二个单元格
我们写账号
第三个性别密码我们就不在这里列出来了
把真实姓名写出来
还有电话号码
以及email地址等等
你想要显示的所有信息都可以放在这里来显示
这样我们把这个表头就写好了
有了表头以后
我们就可以去写对应的数据了
用table
来填充我们的数据
区域
在我们的控制器里面查询的结果
我们是用pages关键字来存储的
它是已经有了翻页数据的对象
所以我们在循环这里就通过对pages对象进行
循环
我们来获取他的数据
ulser
然后
是他的查询出来的对象pages
content
这里边第一个单元格
我们输出的是序号
所以我们这里直接输出
text对象注意ustat
count
用她自身的计数来显示这个内容
第二个单元格显示的是账号
所以这里就直接调用
u.count
TD里边不需要写东西
所有的内容都是通过属性
th冒号text来提供
从这个u对象里边去读取想要的数据
把它们一个个的都写出来
u.
name
testu点
这个是电话号码
mobile
一定要与你对象里边的属性对应
否则的话
他无法正常运行
EMAILU点EMAIL
这样我们的列表就已经写好了
现在我们启动我们的应用程序
来调试一下我们的列表
看是否能够查询出我们的数据
我们来执行
执行之前一定要确保数据库已经启动了
否则的话你无法正常运行
它运行的时候就连不上数据库了
我们运行它
运行起来后
如果没有错
你将会看到startd
application的提示
好
启动成功
成功后我们打开浏览器
在浏览器的地址栏输入我们访问的网址
这是默认界面
输入我们对控制器的请求路径listers
可以看到
我们的界面已经出来了
但是我们的数据并没有
是因为我们数据库里面没有
还是我们的程序出现了错误
我们打开命令行
进入到数据库里边
查询用户
我们的数据库里边有一条记录
但是我们的界面上并没有查询出来
打开我们的控制台
看它生成的select的语句
把它拿出来
放到我们的命令行下
删掉限制
然后把相关的参数给它
这里可以看到
命令提供的是用问号来接收参数的形式
这里需要我们输入的是 查询的语法
所以如果KW为空的话
那么它应该是两个百分号的查询语法
这样就已经能查询出来了
所以我们还是对于我们关键字在传递的过程中
进行检查
我们的语法没有错
就是关键字
没有提供模糊查询的相关模式
现在我们找到我们的关键字位置
在list这个方法里
这是控制器的list方法
我们找到关键字处
如果在这里来判断一下
关键字不等于null
只要它不等于null
我们就给它加上一个百分号
要是等于null等于null
实际上就传上一个
KW直接不给他传上
等于null的话
就等于百分号就可以了
现在我们刷新界面
这个信息就出来了
然后我们输入关键字
因为我们的电话号码里有数字二
我们现在就能查出来它我们可以用三三这里边
都没有这个数据
你看他就查不出来了
那么130
电话号码是130开头
所以我们的130也能查出来
ad
没问题
能查出来
adn呢
就查不出来了
所以我们的检索以及列表也是正常的
他能够进行模糊查询
但是看一下我们这里写的条件
这个条件里面
我们是判断了一个
不等于null和等于null的情况
如果等于null
实际上就是传了个百分号进去
而如果说不等于null
那么我们就是把这个关键字加到了百分号中间
这样子让这个信息传送到数据库时
形成了一个模糊查询的语法
好
关于用户查询列表
实现就讲到这里
我们下节课再见
-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随堂测试