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);
});