我的文件
需要做分页的入口:
(1)home页面左侧“我的文件”导航
(2)查询:“我的文件”页面中的查询按钮
(3)分页的导航:“我的文件”页面中的页码导航栏
工具:后端:pageHelper,前端:pagination
前端:显示表格和页码
一、预期效果
1、home页面:
2、点击“我的文件”:可以显示列有文件信息的列表;默认显示第一页数据,每页显示5条数据。
3、点击页码导航栏中的页码,可以跳转到对应的页面。
4、在搜索框中输入关键词可以查找对应的文件,并显示在下方的文件信息列表中。
二、分页查询后端
1、添加依赖,引入pageHelper
(1)依赖——注意版本不能过高!
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.6</version>
</dependency>
(2)在applicationContext.xml配置文件中的SqlSessionFactoryBean配置下Mybatis插件
<!--用SqlSessionFactoryBean创建SqlSessionFactory对象-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="configLocation" value="classpath:conf/mybatis.xml"/>
<property name="plugins">
<array>
<!--配置PageHelper插件-->
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<props>
<!--配置数据库方言,告诉当前使用的数据库-->
<prop key="dialect">mysql</prop>
<!--配置页码的合理修正,在1~总页数之间修正页码-->
<prop key="reasonable">true</prop>
</props>
</property>
</bean>
</array>
</property>
</bean>
2、编写sql语句,用于关键词搜索查询。
查询语句:
concat函数:将多个字符串连接成一个字符串。
模糊查询:where login_acct like contact("%",#{keyword},"%")
<select id="selectFileByKeyword" resultType="FileInfo">
select name,size,uploadTime,type from file where name like concat("%",#{keyword},"%") or type like concat("%",#{keyword},"%")
</select>
3、编写service方法
public class FileInfoServiceImpl implements FileInfoService {
@Resource
FileInfoDao fileInfoDao;
//参数:关键词和页码,条数
@Override
public PageInfo<FileInfo> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
//1、调用PageHelper的静态方法开启分页功能
PageHelper.startPage(pageNum,pageSize);
//2、执行查询
List<FileInfo> list =fileInfoDao.selectFileByKeyword(keyword);
//3、封装到PageInfo对象中
return new PageInfo<>(list);
}
}
4、编写controller方法
给keyword、pageNum、pageSize三个参数设置默认值,当前端的请求没有携带对应参数时,可以使用默认值。
这一设置主要用于点击“我的文件”时,默认展示全部文件。
@Controller
@RequestMapping("/file")
public class FileInfoController {
@Resource
FileInfoService fileInfoService;
//使用@RequestParam中的defaultValue属性指定默认值,当请求中没有携带对应参数时,可使用默认值
@RequestMapping("/pageInfo")
@ResponseBody
public PageInfo<FileInfo> getPageInfo(
@RequestParam(value="keyword",defaultValue ="")String keyword,
@RequestParam(value="pageNum",defaultValue ="1")Integer pageNum,
@RequestParam(value="pageSize",defaultValue ="5")Integer pageSize){
//调用service方法获取数据
PageInfo<FileInfo>pageInfo=
fileInfoService.getPageInfo(keyword,pageNum,pageSize);
return pageInfo;
}
}
三、前端(基于ajax)
0、从home跳转到“我的文件”,进行文件管理。
在home页面点击“我的文件”,前端请求访问页面fileinfo.jsp。但是由于前端的请求无法直接访问WEB-INF中的数据,所以在dipatcherServlet中配置视图控制器,跳转到fileinfo.jsp。
<mvc:view-controller path="/file/fileinfo" view-name="fileinfo"></mvc:view-controller>
前端“我的文件”链接指向的请求地址:
<a href="file/fileinfo">"我的文件"/a>
1、前端发送ajax请求,
请求参数:keyword、pageNum、pageSize
返回值:response.list
$(function () {
//初始化分页数据
window.pageNum=1;
window.pageSize=5;
window.keyword="";
loadPageInfo(1);
//初始化页码导航条
// initPagination();
// $("#btnLoader").click(function () {
// loadStudentData();
// })
})
//加载分页信息
function loadPageInfo(pagenum) {
$.ajax({
url:"file/pageInfo",
type:"get",
data:{
"keyword":window.keyword,
"pageNum":pagenum,
"pageSize":window.pageSize,
},
dataType:"json",
success:function (response) {
var pageInfo=response;
//清除旧的数据
$("#info").html("");
$.each(response.list,function(i,n){
$("#info").append("<tr>")
.append("<th>"+n.name+"</th>")
.append("<th>"+n.uploadTime+"</th>")
.append("<th>"+n.type+"</th>")
.append("<th>"+n.size+"</th>")
.append("<tr>")
})
generateNavigator(pageInfo);
}
});
}
</script>
2、生成页码导航
使用工具 pagination分页插件:
(1)引入依赖资源,注意顺序:pagination要在jquery的后面!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OAfPm6eR-1634651416372)(C:\Users\rr\AppData\Roaming\Typora\typora-user-images\image-20210802181751152.png)]
(2)使用Pagination要求的div标签来替换bootstrap标签提供的页码部分(去掉ul部分)
<div style="text-align:center">
<div id="Pagination" class="pagination"><!--这里显示分页--></div>
</div>
(3) js代码:
注意回调函数放在generateNavigator的前面,否则会报错:callback is not a function
//翻页时的回调函数,声明以后不是我们自己调用的,交给系统/框架调用
function pageSelectCallback(pageIndex,jQuery) {
//修改全局变量的pageNum属性
Window.pageNum=pageIndex+1;
//alert(window.pageNum);
loadPageInfo(Window.pageNum);
//取消页码超链接的默认行为
return false;
}
//生成分页导航栏
function generateNavigator(pageInfo) {
//获取总记录数
var totalRecord=pageInfo.total;
$("#Pagination").pagination(totalRecord, {
num_edge_entries: 3, //边缘页数
num_display_entries: 5, //主体页数
callback: pageSelectCallback,
items_per_page: pageInfo.pageSize, //每页显示项数
current_page:pageInfo.pageNum-1,
prev_text: "前一页",
next_text: "后一页"
});
}
四、搜索查询
为“搜索按钮添加一个click单击事件”查询带有关键字的数据。
$("#searchBtn").click(function () {
window.keyword=$("#keywordinput").val();
loadPageInfo(window.pageNum);
});
五、报错
1、mapper文件报错
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.example.dao.FileInfoDao.selectFileByKeyword
org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:235)
org.apache.ibatis.binding.MapperMethod.<init>(MapperMethod.java:53)
org.apache.ibatis.binding.MapperProxy.lambda$cachedInvoker$0(MapperProxy.java:108)
原因:
1、resultType中的返回值没有写全限定名称
2、xml和dao接口名称不一致
2、文.件[/WEB-INF/jsp/file/pageInfo.jsp] 未找到
原因:
1、返回的是数据,但是没有添加ResponseBody注解
3、未定义的callback
原因:没有研究过java script,不知道为什么callback回调函数必须放在调用该函数的函数前面,难道和C++一样 ,函数必须先声明,声明之后才能调用?
4、点击页码导航,跳转失败,一直跳转到默认的第1页
原因:查看了浏览器中传输的请求参数,发现请求参数没有被更新,说明我在回调函数中对全局变量PageNum的更新没有被传入到ajax请求参数中。
修改:使用传参方式,在ajax的data中,不直接传window.pageNum,而是为该函数定义了一个形参,通过形参传值。