JavaWeb-旅游网-注册和登录
JavaWeb-旅游网-线路搜索
JavaWeb-旅游网-详情展示
JavaWeb-旅游网-点击收藏
导航条
现在几乎所有网站都有导航条，导航条能够很好的指使用户去到他们想去的地方，所以导航条使用的很频繁，如果每次加载导航条都要从数据库加载，对数据库的压力就会很大，因此我们可以采取将导航条的信息保存到缓存，提升读取速度
导航条
前台发送Ajax请求向后台请求导航条中的数据，第一次查询时将查询到数据存储到redis中，往后再用到导航条数据时直接从redis中取，所以在启动项目时，记得先启动redis,redis保存对象是以序列化的方式保存，所以在实体类不用忘了implements Serializable
后台代码
public List<Category> findAll() {
//从redis查询数据，判断是否为空
//获取jedis客户端
Jedis jedis = JedisUtil.getJedis();
//如果为空，从数据库查询，并将结果保存在redis中,不为空，返回结果
//从redis中查询出分数（cid）和值（cname）
Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);
List<Category> categoryList = null;
if(null == categorys || categorys.size() == 0){
categoryList = categoryDao.findAll();
//将数据存储到redis
for(int i = 0;i<categoryList.size();i++){
jedis.zadd("category",categoryList.get(i).getCid(),categoryList.get(i).getCname() );
}
}else {
//因为从redis中取出的是Set集合，需要转换成list
categoryList = new ArrayList<>();
for (Tuple tuple : categorys) {
Category category = new Category();
category.setCname(tuple.getElement());
category.setCid((int) tuple.getScore());
categoryList.add(category);
}
}
return categoryList;
}
------
List<Category> categoryList = service.findAll();
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(categoryList));
前台代码
$.get("category/findAll",{},function (data) {
//data=[{cid=1,cname="国内游"},{},{},{}]
var li = '<li class="nav-active"><a href="index.html">首页</a></li>';
//遍历把数据加到li中
for (var i = 0 ;i<data.length;i++){
var lii = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';
li += lii;
}
li += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
$("#category").html(li);
});
分页页数展示
数据量往往是很大，此时就需要我们通过分页的方法展示数据，来提示用户的体验
分页
分页查询有几个比较重要的参数，currentPage当前的页数，pageSize每页所展示的数据，totalCount总共有多少数据，其他的数据可以根据这三个数据得出，有了这几个数据就可以分页查询了
步骤： 前台发送Ajax到后台，后台根据前台发送的currentPage，pageSize到数据库进行查询，将结果封装到PageBean，然后以json格式返回给前台，前台解析展示到页面
后台代码(cid,rname的作用后面会提到)
public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收参数
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr = request.getParameter("cid");
String rname = request.getParameter("rname");
if(null != rname && rname.length()>0){
rname = new String(rname.getBytes("iso-8859-1"),"utf-8");
System.out.println("rname: "+rname+"length: "+rname.length());
}
int cid = 0;
if(null != cidStr&&cidStr.length()>0){
cid = Integer.parseInt(cidStr);
}
//当前页码
int currentPage = 0;
if(null != currentPageStr&¤tPageStr.length()>0){
currentPage = Integer.parseInt(currentPageStr);
}else {
//默认为当前页为1
currentPage = 1;
}
//每页条数
int pageSize = 0;
if(null != pageSizeStr&&pageSizeStr.length()>0){
currentPage = Integer.parseInt(pageSizeStr);
}else {
//默认每页条数为5
pageSize = 5;
}
//查询PageBean对象
PageBean<Route> routePageBean = routeService.pageQuery(cid, currentPage, pageSize,rname);
//序列化为Json
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(routePageBean));
}
Dao层
/**
* 查收数据总数
* @param cid
* @param rname
* @return
*/
@Override
public int findTotalCount(int cid,String rname) {
// String sql = "select count(*) from tab_route where cid = ?";
String sql = "select count(*) from tab_route where 1=1 ";
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();
if(0 != cid){
sb.append(" and cid = ?");
params.add(cid);
}
if (null != rname && rname.length()>0 && !"null".equals(rname)){
sb.append(" and rname like ?");
params.add("%"+rname+"%");
}
sql = sb.toString();
return template.queryForObject(sql,Integer.class,params.toArray());
}
/**
* 获取数据段
* @param cid
* @param start
* @param pageSize
* @param rname
* @return
*/
@Override
public List<Route> findByPage(int cid, int start, int pageSize,String rname) {
// String sql = "select * from tab_route where cid = ? limit ? , ?";
String sql = "select * from tab_route where 1 =1 ";
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();
if(0 != cid){
sb.append(" and cid = ?");
params.add(cid);
}
if (null != rname && rname.length()>0 && !"null".equals(rname)){
sb.append(" and rname like ?");
params.add("%"+rname+"%");
}
sb.append(" limit ? ,? ");
sql = sb.toString();
params.add(start);
params.add(pageSize);
return template.query(sql,new BeanPropertyRowMapper<>(Route.class),params.toArray());
}
service层
/**
* 分页查询数据
* @param cid
* @param currentPage
* @param pageSize
* @param rname
* @return
*/
@Override
public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname) {
PageBean<Route> pageBean = new PageBean();
//设置当前页码
pageBean.setCurrentPage(currentPage);
//设每页条数
pageBean.setPageSize(pageSize);
//设置总记录数
int totalCount = routeDao.findTotalCount(cid,rname);
pageBean.setTotalCount(totalCount);
//当前数据集合
pageBean.setList(routeDao.findByPage(cid, (currentPage-1)*pageSize ,pageSize,rname));
//设置总页数
int totalPage = totalCount%pageSize == 0?totalCount/pageSize:(totalCount/pageSize)+1;
pageBean.setTotalPage(totalPage);
return pageBean;
}
前台代码
$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (data) {
//解析数据
//分页工具条数据显示，即显示共xxx页xxx条
$("#totalPage").html(data.totalPage);
$("#totalCount").html(data.totalCount);
var lis = '';
var firstPage = '<li οnclick="javascript:load('+cid+',1,\''+rname+'\')"class="threeword"><a href="javascript:void(0)">首页</a></li>';
//上一页的页数
var prePageNum = data.currentPage-1>0?data.currentPage-1:1;
var prePage = ' <li οnclick="javascript:load('+cid+','+prePageNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis += firstPage;
lis += prePage;
var begin;//开始的页数
var end;//结束的位置
if(data.totalPage<10){
//总页数不足10页
begin = 1;
end = data.totalPage;
}else{
//总页数超过十页
begin = data.currentPage-5;
end = data.currentPage+4;
if (begin<1){
begin = 1;
end = 10;
}
if (end>data.totalPage){
end = data.totalPage;
begin = end-9;
}
}
for (var i = begin; i <=end ; i++) {
//如果i等于当前页，高亮显示
if (data.currentPage == i){
var li = '<li οnclick="javascript:load('+cid+','+i+',\''+rname+'\')" class="curPage"><a href="javascript:void">'+i+'</a></li>'
} else{
var li = '<li οnclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void">'+i+'</a></li>'
}
lis += li;
}
//下一页的页数
var sufPageNum = data.currentPage+1<data.totalPage?data.currentPage+1:data.totalPage;
var sufPage = ' <li class="threeword" οnclick="javascript:load('+cid+','+sufPageNum+',\''+rname+'\')"><a href="javascript:void(0);">下一页</a></li>';
var lastPage = '<li class="threeword" οnclick="javascript:load('+cid+','+data.totalPage+',\''+rname+'\')"><a href="javascript:void(0);">末页</a></li>';
lis += sufPage;
lis += lastPage;
$("#page").html(lis);
分页数据展示
分页数据的获得跟分页页数一样，在前面发送Ajax时，返回的数据就已经包括了分页的要展示的数据，我们只需要拼接字符串即可，为了让每次点击新的一页能够弹回顶部，加入了 window.scrollTo(0,0); 让页面滚动到（0,0）坐标，即滚动到顶部
//列表数据显示
var route_lis='';
for (var i = 0; i < data.list.length; i++) {
var route = data.list[i];
var li='<li>\n' +
' <div class="img"><img src="'+route.rimage+'" style="width: 299px"></div>\n' +
' <div class="text1">\n' +
' <p>'+route.rname+'</p>\n' +
' <br/>\n' +
' <p>'+route.routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+route.price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
route_lis += li;
}
$("#route").html(route_lis);
//页面滚动到0，0坐标
window.scrollTo(0,0);
});
