电子商务平台 网站 建设方式,短链接生成器下载,温州网站搭建公司,凡客诚品科技有限公司我的收藏分析先登录→拿到当前登录的用户信息#xff0c;从数据库中获取uid和对应uid的rid集合→将rid集合信息展示到我的收藏前台代码判断用户是否登录#xff0c;传递uid#xff0c;通过uid查找其对应的rid集合当查询的属性涉及到多张表#xff0c;则必须使用多表连接从数据库中获取uid和对应uid的rid集合→将rid集合信息展示到我的收藏前台代码判断用户是否登录传递uid通过uid查找其对应的rid集合当查询的属性涉及到多张表则必须使用多表连接此时子查询也不再适用语法select 查询列表from 表1 别名【inner】 join 表2 别名 on 连接条件where 筛选条件group by 分组列表having 分组后的筛选order by 排序列表limit 子句;查询结果查询语句SELECT *FROM tab_favorite f
INNER JOIN tab_route r on f.rid r.rid
where uid23;后台代码RouteServlet/*** 分页查询我的收藏* 点击我的收藏展示该uid收藏的rid方法收藏分页*/
public void myFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取用户的uid和currentpageString uidStr request.getParameter(uid);String currentPageStr request.getParameter(currentPage);int uid Integer.parseInt(uidStr);int currentPage 1;//处理参数if (currentPageStr ! null currentPageStr.length() 0) {currentPage Integer.parseInt(currentPageStr);}int pageSize 4;PageBeanRoute pb favoriteService.myFavorite(uid, currentPage, pageSize);writeValue(pb, response);
}实体类中并无与tab_favorite表中对应的uidridDate属性实体类Favorite只有private Route route;//旅游线路对象
private String date;//收藏时间
private User user;//所属用户这三个对象于是为了和数据表对应创建MyFavorite实体类 /*** author 乱码酱* date 2023-02-15 20:43* program: hello_maven* create:创建tab_favorite表中对应的uidriddate属性*/
public class MyFavorite {private int uid;private Date date;private int rid;public int getUid() {return uid;}public void setUid(int uid) {this.uid uid;}public Date getDate() {return date;}public void setDate(Date date) {this.date date;}public int getRid() {return rid;}public void setRid(int rid) {this.rid rid;}Overridepublic String toString() {return MyFavorite{ uid uid , date date , rid rid };}
}FavoriteServiceImpl通过分析PageBean可以得知totalCount总记录数 需要从数据库查询得到currentPage当前页码 pageSize每页显示的条数 这两条是通过客户端提交的totalPage总页数 可以通过总记录数和每页显示的条数计算得到所以在RouteDao上有以下方法声明*根据cid查询总的记录数*根据cid,start,pageSize查询当前的数据集合Override //我的收藏
public PageBeanRoute myFavorite(int uid, int currentPage, int pageSize) {//封装pagebeanPageBeanRoute pb new PageBeanRoute();//设置每页的大小pb.setPageSize(pageSize);//设置当前页客户端提交的pb.setCurrentPage(currentPage);//设置总记录数数据库查询得到 int totalCount myFavoriteDao.findMyFavoriteCount(uid);pb.setTotalCount(totalCount);//假如没有记录前台显示提示if (totalCount 0) {return pb;}//开始的记录数假设pageSize为5,第2页是从5开始的int start (currentPage - 1) * pageSize;//设置总页数可以通过 总记录数/每页显示条数 计算得到int totalPage (totalCount % pageSize 0) ? (totalCount / pageSize) : (totalCount / pageSize 1);pb.setTotalPage(totalPage);//将“我的收藏”以集合形式展示ListMyFavorite myFavoriteList myFavoriteDao.myFavorite(uid, start, pageSize);ListRoute routelist new ArrayList();//遍历出“我的收藏”中所有ridfor (MyFavorite myFavorite : myFavoriteList) {//查出来的是每个用户的全部收藏路线Integer rid myFavorite.getRid();//根据rid查找routeRoute route routeDao.findOne(rid);//将route对象添加进listroutelist.add(route);}pb.setList(routelist);return pb;
}FavoriteDaoImpl查询总记录数查询语句SELECT COUNT(*) FROM tab_favorite WHERE uid 23;查询结果查询我的收藏查询语句-- 分页查询我的收藏SELECT * FROM tab_favorite WHERE uid 23 LIMIT 0,12;SELECT * FROM tab_favorite WHERE uid LIMIT ,;其中limit后的两个问号第一个表示从哪里开始第二个表示查询多少个记录查询结果参考前面的RouteImpl代码拼接没成功 Override //将“我的收藏”以集合形式展示,分页查询我的收藏public ListMyFavorite myFavorite(int uid, int start, int pageSize) {//1.定义sql模板
// String sql SELECT * FROM tab_favorite WHERE uid ? LIMIT ? , ?;
// return jdbcTemplate.query(sql, new BeanPropertyRowMapperMyFavorite(MyFavorite.class), uid, start, pageSize);// 改写一下String sql select * from tab_favorite where 1 1 ;StringBuilder sb new StringBuilder(sql);List params new ArrayList();//条件们//2.判断参数是否有值if(uid ! 0){sb.append( and uid ? );params.add(uid);//添加对应的值}// if(rname ! null rname.length() 0 !null.equals(rname)){
// sb.append( and rname like ? );
// params.add(%rname%);
// }sb.append( limit ? , ? );//分页条件sql sb.toString();//sql语句重新赋值拼接多条件查询params.add(start);params.add(pageSize);return jdbcTemplate.query(sql,new BeanPropertyRowMapperRoute(Route.class),params.toArray());}查询收藏次数查询代码-- 人气旅游展示SELECT rid,COUNT(rid) AS COUNT FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC LIMIT 0, 513查询结果最新旅游展示 查询代码-- 最新旅游展示SELECT * FROM tab_route ORDER BY rdate DESC LIMIT 0,513;查询结果删除收藏为了不影响后续的查看数据先测试是否可以被查看代码-- 删除收藏SELECT * FROM tab_favorite WHERE rid 2 AND uid 23;DELETE FROM tab_favorite WHERE rid 2 AND uid 23;查询结果收藏量top前几的展示代码-- 找到收藏量按降序排列的routeSELECT * FROM (SELECT rid,COUNT(rid) AS count FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC)as top;-- 找到收藏量top前几的routeSELECT * FROM (SELECT rid,COUNT(rid) AS count FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC) as top LIMIT 6;查询结果 找到收藏量按降序排列的route找到收藏量top前几的route找到所有的Favorite(不重复)多条件查询查询条件的字符串拼接方法public List findRouteByRangePage(int start, int pageSize, String rname, int first, int last)条件很多足足五个之多分开一层套一层之前RouteDaoImpl亦是多条件查询 并且其中有三个条件相同可作为参考[4.旅游线路名称查询-参数传递]查询语句-- 找到所有的Favorite(不重复)-- findRouteByRangePage(int start, int pageSize, String rname, int first, int last)SELECT * FROM(SELECT * FROM(SELECT rid,COUNT(rid) AS COUNT FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC)AS aa)AS bb,tab_route t WHERE t.rid bb.rid;查询结果参考的代码/*根据cid,start,pageSize查询当前的数据集合*/Overridepublic ListRoute findByPage(int cid, int start, int pageSize, String rname) {
// String sql select * from tab_route where cid? and rname like ? limit ? , ?;//limit后的两个问号第一个表示从哪里开始第二个表示查询多少个记录//1.定义sql模板String sql select * from tab_route where 1 1 ;//StringBuilder可变字符序列、效率高、线程不安全StringBuilder sb new StringBuilder(sql);List params new ArrayList();//条件们//2.判断参数是否有值if (cid ! 0) {sb.append( and cid ? );params.add(cid);//添加对应的值}// 加上!null.equals(rname)才不会报错否则查找不到对应内容if (rname ! null rname.length() 0 !null.equals(rname)) {sb.append( and rname like ? );params.add(% rname %);}sb.append( limit ? , ? );//分页条件sql sb.toString();//sql语句重新赋值拼接多条件查询params.add(start);params.add(pageSize);return template.query(sql, new BeanPropertyRowMapperRoute(Route.class), params.toArray());}改写的代码 Override //找到所有的Favorite(不重复)public ListRoute findRouteByRangePage(int start, int pageSize, String rname, int first, int last) {// select * from table_name limit 10;//检索前10行记录// String sql select * from tab_route where cid? and rname like ? limit ? , ?;//limit后的两个问号第一个表示从哪里开始第二个表示查询多少个记录//1.定义sql模板String sql SELECT * FROM (SELECT * FROM (SELECT rid,COUNT(rid) AS COUNT FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC)AS aa)AS bb,tab_route t WHERE t.rid bb.rid ;//StringBuilder可变字符序列、效率高、线程不安全StringBuilder sb new StringBuilder(sql);List params new ArrayList();//条件们//2.判断参数是否有值if (first ! 0) {sb.append(and t.price ? );//添加?对应的值params.add(first);}if (last ! 0) {sb.append(and t.price ? );//添加?对应的值params.add(last);}
//判断参数是否有值
// 加上!null.equals(rname)才不会报错否则查找不到对应内容if (rname ! null rname.length() 0 !null.equals(rname)) {sb.append( and rname like ? );params.add(% rname %);}//分页sb.append( limit ? );//查询条件sql sb.toString();//sql语句重新赋值拼接多条件查询params.add(start);params.add(pageSize);return template.query(sql, new BeanPropertyRowMapperRoute(Route.class), params.toArray());}前台代码的改写myFavorite.html在其中引入js文件测试一下说明能被取到测试后304服务端已经执行了GET但文件未变化。新增id作为标识将动态内容改写动态改写前var li div classcol-md-3\n a hrefroute_detail.html\n img srcimages/collection_pic.jpg alt\n div classhas_border\n h3上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/h3\n div classprice网付价em/emstrong889/strongem起/em/div\n /div\n /a\n /div动态改写后 var li div classcol-md-3\n a hrefroute_detail.html?ridroute.rid\n img srcroute.image alt\n div classhas_border\n h3route.routeIntroduce/h3\n div classprice网付价em/emstrongroute.price/strongem起/em/div\n /div\n /a\n /div
输入网址localhost/travel/route/myFavorite测试一下看到用户岁岁对应信息的json文件 将其复制下来放到网上的Json在线解析{totalCount:7,totalPage:2,currentPage:1,pageSize:5,list:[{rid:1,rname:【旅展 半价特惠 重走丝路•漫游宁夏 双飞4天】银川西部影视城 穆民新村 中卫沙坡头【品美酒 回族学唱花儿 感悟民俗】,price:999.0,routeIntroduce:走进【宁夏沙坡头】感受西北大漠风情、体会“大漠孤烟直长河落日圆”的塞上风光,rflag:1,rdate:2018-02-09 01:13:16,isThemeTour:0,count:0,cid:5,rimage:img/product/small/m304b69a4c8328f7d6b8d5dadef020fe07.jpg,sid:1,sourceId:23677,category:null,seller:null,routeImgList:null},{rid:2,rname:【官网专享 立减¥500 张家界天门山大峡谷凤凰古城玻璃栈道玻璃桥 高铁4天 无自费5钻】印象鲵宴-赶年宴2晚蓝湾博格酒店,price:1799.0,routeIntroduce:官网专线顶级品质全程超豪华住宿2晚入住超豪华铂金-蓝湾博格国际酒店独家尊享金马VIP贵宾专用楼层。,rflag:1,rdate:2018-02-09 01:13:17,isThemeTour:0,count:990,cid:5,rimage:img/product/small/m34866f055de8630e94e25c40f277a79ba.jpg,sid:1,sourceId:22066,category:null,seller:null,routeImgList:null},{rid:4,rname:【官网专享 送箱 ¥1099秒杀 华东五市乌镇南浔 双飞6天 南京进上海出】升级1晚豪华酒店 漫步西湖【水墨江南】,price:1099.0,routeIntroduce:升级入住1晚豪华酒店畅玩江南两大经典水乡——乌镇水乡和南浔水乡体验这里的历史文化底蕴、清丽婉约的水乡古镇风貌。,rflag:1,rdate:2018-02-09 01:13:17,isThemeTour:0,count:0,cid:5,rimage:img/product/small/m3d91ef60e0c7fdeee97a4e2d3e5a42e84.jpg,sid:1,sourceId:21943,category:null,seller:null,routeImgList:null},{rid:7,rname:【¥1099秒杀 约惠华东五市乌镇木渎灵山大佛 双飞6天 无锡进上海出】升级2晚豪华酒店,price:1099.0,routeIntroduce:畅玩乌镇水乡和木渎水乡游览上海迪士尼小镇其中升级入住2晚豪华酒店品尝杭州特色宴“乾隆御茶宴”送品尝金秋肥美大闸蟹一只,rflag:1,rdate:2018-02-09 01:13:17,isThemeTour:0,count:0,cid:5,rimage:img/product/small/m370365f2ea91b638695218a6df13e3819.jpg,sid:1,sourceId:14974,category:null,seller:null,routeImgList:null},{rid:9,rname:【豪叹喜来登 桂林 阳朔西街高铁4天纯玩 高级团】漓江 西山公园 象鼻山 银子岩,price:1299.0,routeIntroduce:1晚指定入住福朋喜来登酒店船游全程大漓江游览世界溶洞奇观银子岩,rflag:1,rdate:2018-02-09 01:13:17,isThemeTour:0,count:0,cid:5,rimage:img/product/small/m35c17b5b73d618bbdd2abe231f1307838.jpg,sid:1,sourceId:2702,category:null,seller:null,routeImgList:null}]}得到{totalCount: 7,totalPage: 2,currentPage: 1,pageSize: 5,list: [{rid: 1,rname: 【旅展 半价特惠 重走丝路•漫游宁夏 双飞4天】银川西部影视城 穆民新村 中卫沙坡头【品美酒 回族学唱花儿 感悟民俗】,price: 999.0,routeIntroduce: 走进【宁夏沙坡头】感受西北大漠风情、体会“大漠孤烟直长河落日圆”的塞上风光,rflag: 1,rdate: 2018-02-09 01:13:16,isThemeTour: 0,count: 0,cid: 5,rimage: img/product/small/m304b69a4c8328f7d6b8d5dadef020fe07.jpg,sid: 1,sourceId: 23677,category: null,seller: null,routeImgList: null}, {rid: 2,rname: 【官网专享 立减¥500 张家界天门山大峡谷凤凰古城玻璃栈道玻璃桥 高铁4天 无自费5钻】印象鲵宴-赶年宴2晚蓝湾博格酒店,price: 1799.0,routeIntroduce: 官网专线顶级品质全程超豪华住宿2晚入住超豪华铂金-蓝湾博格国际酒店独家尊享金马VIP贵宾专用楼层。,rflag: 1,rdate: 2018-02-09 01:13:17,isThemeTour: 0,count: 990,cid: 5,rimage: img/product/small/m34866f055de8630e94e25c40f277a79ba.jpg,sid: 1,sourceId: 22066,category: null,seller: null,routeImgList: null}, {rid: 4,rname: 【官网专享 送箱 ¥1099秒杀 华东五市乌镇南浔 双飞6天 南京进上海出】升级1晚豪华酒店 漫步西湖【水墨江南】,price: 1099.0,routeIntroduce: 升级入住1晚豪华酒店畅玩江南两大经典水乡——乌镇水乡和南浔水乡体验这里的历史文化底蕴、清丽婉约的水乡古镇风貌。,rflag: 1,rdate: 2018-02-09 01:13:17,isThemeTour: 0,count: 0,cid: 5,rimage: img/product/small/m3d91ef60e0c7fdeee97a4e2d3e5a42e84.jpg,sid: 1,sourceId: 21943,category: null,seller: null,routeImgList: null}, {rid: 7,rname: 【¥1099秒杀 约惠华东五市乌镇木渎灵山大佛 双飞6天 无锡进上海出】升级2晚豪华酒店,price: 1099.0,routeIntroduce: 畅玩乌镇水乡和木渎水乡游览上海迪士尼小镇其中升级入住2晚豪华酒店品尝杭州特色宴“乾隆御茶宴”送品尝金秋肥美大闸蟹一只,rflag: 1,rdate: 2018-02-09 01:13:17,isThemeTour: 0,count: 0,cid: 5,rimage: img/product/small/m370365f2ea91b638695218a6df13e3819.jpg,sid: 1,sourceId: 14974,category: null,seller: null,routeImgList: null}, {rid: 9,rname: 【豪叹喜来登 桂林 阳朔西街高铁4天纯玩 高级团】漓江 西山公园 象鼻山 银子岩,price: 1299.0,routeIntroduce: 1晚指定入住福朋喜来登酒店船游全程大漓江游览世界溶洞奇观银子岩,rflag: 1,rdate: 2018-02-09 01:13:17,isThemeTour: 0,count: 0,cid: 5,rimage: img/product/small/m35c17b5b73d618bbdd2abe231f1307838.jpg,sid: 1,sourceId: 2702,category: null,seller: null,routeImgList: null}]
}和数据库查询得到的结果一致说明编写的后台服务器端代码是正确的header.html完整代码如下!--我不信邪了还--
!-- 头部 start --
script srcjs/getParameter.js/script
script$(function () {var user;//查询用户信息$.get(user/findOne,{},function (data) {// {uid:1,name:hua}user data;var msg 欢迎回来, data.name;$(#span-username).html(msg)});//查询分类数据$.get(category/findAll,{},function (data) {// [{cid:1,cname:xxx},{},{}]var str li classnav-activea hrefindex.html首页/a/li;//遍历数组,字符串拼接lia hrefroute_list.html门票/a/lifor (var i 0;idata.length;i){var li lia hrefroute_list.html?ciddata[i].ciddata[i].cname/a/li;strli;}//拼接收藏排行榜(最后一部分)strlia hreffavoriterank.html收藏排行榜/a/li;//将str设置到ul的html内容中$(#category).html(str);})//给搜索按钮绑定单击事件,获取搜索输入框的内容$(#search_button).click(function () {//用户输入的线路名称var rname $(#search_input).val();// alert(rname);//跳转路径http://localhost/travel/route_list.html?cid23,拼接上rnamexxxvar cid getParameter(cid);location.href http://localhost/travel/route_list.html?cidcidrnamername;})//点击我的收藏judgeUser function (){//未登录if(user null){alert(您尚未登录,请登录!)location.href http://localhost/travel/login.html;}else{//已登录a// alert(user.uid);var uid user.uid;//跳转到我的收藏页面location.href http://localhost/travel/myfavorite.html?uiduid;}}})/scriptheader idheaderdiv classtop_banner img-responsiveimg srcimages/top_banner.jpg alt/divdiv classshortcut!-- 未登录状态 --div classlogin_outa hreflogin.html登录/aa hrefregister.html注册/a/div!-- 登录状态 --div classloginspan idspan-username/span!--//myfavorite.html--a hrefjavascript:void(judgeUser()) idmyFavorite classcollection我的收藏/aa hrefjavascript:location.hrefuser/exit;退出/a/div/divdiv classheader_wrapdiv classtopbardiv classlogoa href/img srcimages/logo.jpg alt/a/divdiv classsearchinput name typetext idsearch_input placeholder请输入路线名称 classsearch_input autocompleteoffa hrefjavascript:; idsearch_button classsearch-button搜索/a/divdiv classhotteldiv classhot_picimg srcimages/hot_tel.jpg alt/divdiv classhot_telp classhot_time客服热线(9:00-6:00)/pp classhot_num400-618-9090/p/div/div/div/div
/header
!-- 头部 end --
!-- 首页导航 --
div classnavitemul idcategory classnav!--li classnav-activea hrefindex.html首页/a/li--!--lia hrefroute_list.html门票/a/li--!--lia hrefroute_list.html酒店/a/li--!--lia hrefroute_list.html香港车票/a/li--!--lia hrefroute_list.html出境游/a/li--!--lia hrefroute_list.html国内游/a/li--!--lia hrefroute_list.html港澳游/a/li--!--lia hrefroute_list.html抱团定制/a/li--!--lia hrefroute_list.html全球自由行/a/li--!--lia hreffavoriterank.html收藏排行榜/a/li--/ul
/div要想点击介绍纪进入对应详情页改写前端代码我的收藏1/*//我的收藏1$(function () {//引入js有了更方便的方法如下↓//获取uid的参数值var uid getParameter(uid);// alert(uid);//当页码加载完成后调用load方法发送ajax请求加载数据load(uid, null);});// “我的收藏”分页function load(uid, currentPage) {//发送ajax请求请求route/pageQuery,传递cid$.get(route/myFavorite, {uid: uid, currentPage: currentPage}, function (pb) {if (pb.totalcount 0) {$(#favorite_route).html(span idnofavorite您还没有任何收藏哦去看一看线路列表吧/span);}//解析pagebean数据展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$(#totalPage).html(pb.totalPage);$(#totalCount).html(pb.totalCount);//分页展示var lis ;//onclickjavascipt:load(5,1,\西安\) 出现两个引号避免拼接使用转义字符\var fristPage li onclickjavascipt:load( uid ,1) stylecursor: pointera hrefjavascript:void(0)首页/a/li;//onclick放到这里就可以点击框框也可以跳转 //已是首页啥也不做//计算上一页的页码 当前页码-1var beforeNum pb.currentPage - 1;if (beforeNum 0) {beforeNum 1; //如果已经是最前页就回到第一页}var beforePage li onclickjavascipt:load( uid , beforeNum ) stylecursor: pointer classthreeworda hrefjavascript:void(0)上一页/a/li;lis fristPage;lis beforePage;//1.2 展示分页页码/!*1.一共展示10个页码能够达到前5后4的效果2.如果前边不够5个后边补齐10个3.如果后边不足4个前边补齐10个*!/// 定义开始位置begin,结束位置 endvar begin; // 开始位置var end; // 结束位置//1.要显示10个页码if (pb.totalPage 10) {//a.总页码不够10页begin 1;end pb.totalPage;} else {//b.总页码超过10页begin pb.currentPage - 5;end pb.currentPage 4;//b.1.如果前边不够5个后边补齐10个if (begin 1) {begin 1;end begin 9;}//b.2如果后边不足4个前边补齐10个if (end pb.totalPage) {end pb.totalPage;begin end - 9;}}//加上判断更严谨for (var i begin; i end; i) {var li;//为当前页码加上样式 判断当前页码是否等于iif (pb.currentPage i) {li li classcurPageonclickjavascipt:load( uid , i ) stylecursor: pointer a hrefjavascript:void(0) i /a/li;//是当前页码添加当前页码样式classcurPage} else {//创建页码的li //不是当前页码不添加当前页码样式li li onclickjavascipt:load( uid , i ) stylecursor: pointer a hrefjavascript:void(0) i /a/li;}//拼接字符串lis li;}//计算后一页的页码 当前页码1var afterNum pb.currentPage 1;if (afterNum pb.totalPage) { //如果已经是最末页就回到最末页afterNum pb.totalPage;}//后一页var nextPage li onclickjavascipt:load( uid , afterNum ,\ rname \) stylecursor: pointer classthreeworda hrefjavascript:void(0)下一页/a/li;//最后一页var lastPage li onclickjavascipt:load( uid , pb.totalPage ,\ rname \) stylecursor: pointer classthreeworda hrefjavascript:void(0)末页/a/li;lis nextPage;lis lastPage;//将lis内容设置到 ul$(#ul).html(lis);//2.列表数据展示var route_lis ;for (var i 0; i pb.list.length; i) {//获取{rid:1,rname:xxx}var route pb.list[i];var li div classcol-md-3\n a hrefroute_detail.html?rid route.rid \n img src route.image alt\n div classhas_border\n h3 route.routeIntroduce /h3\n div classprice网付价em/emstrong route.price /strongem起/em/div\n /div\n /a\n /divroute_lis li;}$(#myfavorite).html(route_lis);//定位到页面顶部window.scrollTo(0, 0);});}*/我的收藏2/*//我的收藏2$(function () {var uid getParameter(uid);// alert(location.href);// alert(uid)//当页面加载完成后,调用load方法,发送ajax请求,加载数据load(uid,null)});load function (uid,currentPage) {$.get(route/myFavorite,{uid:uid,currentPage:currentPage},function (pb) {//发送ajax请求请求route/pageQuery,传递cid// $.get(route/myFavorite, {uid: uid, currentPage: currentPage}, function (pb) {if (pb.totalcount 0) {$(#favorite_route).html(span idnofavorite您还没有任何收藏哦去看一看线路列表吧/span);}//解析pagebean数据展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$(#totalPage).html(pb.totalPage);$(#totalCount).html(pb.totalCount);//分页显示var lis ;var firstPage li onclickjavascript:load(uid,1) stylecursor: pointera hrefjavascript:void(0)首页/a/li;//上一页的序号var beforeNum pb.currentPage - 1;if (beforeNum 0) {beforeNum 1;}var prevPage li onclickjavascript:load( uid , beforeNum ) stylecursor: pointer classthreeworda href#上一页/a/li;lis firstPage;lis prevPage;//展示分页页码/!*一共展示10个页码,能够达到前五后四的效果如果前面不够5个后面补齐10个如果后面不足4个,前面补齐10ge*!///定义开始位置begin.结束位置endvar begin;var end;if(pb.totalPage10){//总页码10begin 1;end pb.totalPage;}else{//总页码10begin pb.currentPage-5;end pb.currentPage4;//前面不够5个,后面补齐10个if(begin1){begin 1;end begin9;}//后面不足4个,前面补齐10个if(endpb.totalPage){end pb.totalPage;begin end-9;}}for (var i begin; i end; i) {var li;//为当前页码加上样式if (pb.currentPage i) {li li classcurPage stylecursor: pointer onclickjavascript:load( uid , i )a hrefjavascript:void(0) i /a/li;} else {//创建页码的lili li stylecursor: pointer onclickjavascript:load( uid , i )a hrefjavascript:void(0) i /a/li;}//拼接字符串lis li;}var nextNum currentPage 1;if (nextNum pb.totalPage) {nextNum pb.totalPage;}var nextPage li onclickjavascript:load( uid ,nextNum) stylecursor: pointer classthreeworda hrefjavascript:void(0);下一页/a/li;var lastPage li onclickjavascript:load( uid ,pb.totalPage) stylecursor: pointer classthreeworda hrefjavascript:void(0);末页/a/li;lis nextPage;lis lastPage;//将list内容设置到ul中$(#ul).html(lis);//列表数据展示var route_lis ;for (var i 0; i pb.list.length; i) {//获取{rid:1,rname:xxx}var route pb.list[i];/!* div classcol-md-3a hrefroute_detail.htmlimg srcimages/collection_pic.jpg altdiv classhas_borderh3上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/h3div classprice网付价em/emstrong889/strongem起/em/div/div*!/var li div classcol-md-3\n a hrefroute_detail.html?ridroute.rid\n img srcroute.rimage alt图片加载失败……\n div classhas_border\n h3route.routeIntroduce/h3\n div classprice网付价em/emstrongroute.price/strongem起/em/div\n /div\n /a\n /div;route_lis li;}$(#favorite).html(route_lis);//定位到页面顶部window.scrollTo(0,0);})}*/我的收藏3最终版 //我的收藏3
$(function () {var uid getParameter(uid);// alert(location.href);// alert(uid)//当页面加载完成后,调用load方法,发送ajax请求,加载数据load(uid,null)
});
load function (uid,currentPage) {$.get(route/myFavorite,{uid:uid,currentPage:currentPage},function (pb) {//发送ajax请求请求route/pageQuery,传递cidif (pb.totalcount 0) {$(#favorite_route).html(span idnofavorite您还没有任何收藏哦去看一看线路列表吧/span);}//解析pagebean数据展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$(#totalPage).html(pb.totalPage);$(#totalCount).html(pb.totalCount);
// alert(pb.totalPage);
// alert(pb.totalCount);//分页显示var lis ;var firstPage li onclickjavascript:load(uid,1) stylecursor: pointera hrefjavascript:void(0)首页/a/li;//上一页的序号var beforeNum pb.currentPage - 1;if (beforeNum 0) {beforeNum 1;}var prevPage li onclickjavascript:load( uid , beforeNum ) stylecursor: pointer classthreeworda href#上一页/a/li;lis firstPage;lis prevPage;//展示分页页码/*一共展示10个页码,能够达到前五后四的效果如果前面不够5个后面补齐10个如果后面不足4个,前面补齐10ge*///定义开始位置begin.结束位置endvar begin;var end;if(pb.totalPage10){//总页码10begin 1;end pb.totalPage;}else{//总页码10begin pb.currentPage-5;end pb.currentPage4;//前面不够5个,后面补齐10个if(begin1){begin 1;end begin9;}//后面不足4个,前面补齐10个if(endpb.totalPage){end pb.totalPage;begin end-9;}}for (var i begin; i end; i) {var li;//为当前页码加上样式if (pb.currentPage i) {li li classcurPage stylecursor: pointer onclickjavascript:load( uid , i )a hrefjavascript:void(0) i /a/li;} else {//创建页码的lili li stylecursor: pointer onclickjavascript:load( uid , i )a hrefjavascript:void(0) i /a/li;}//拼接字符串lis li;}var nextNum currentPage 1;if (nextNum pb.totalPage) {nextNum pb.totalPage;}var nextPage li onclickjavascript:load( uid ,nextNum) stylecursor: pointer classthreeworda hrefjavascript:void(0);下一页/a/li;var lastPage li onclickjavascript:load( uid ,pb.totalPage) stylecursor: pointer classthreeworda hrefjavascript:void(0);末页/a/li;lis nextPage;lis lastPage;//将list内容设置到ul中$(#ul).html(lis);//列表数据展示var route_lis ;for (var i 0; i pb.list.length; i) {//获取{rid:1,rname:xxx}var route pb.list[i];/* div classcol-md-3a hrefroute_detail.htmlimg srcimages/collection_pic.jpg altdiv classhas_borderh3上海直飞三亚5天4晚自由行(春节预售亲子/蜜月/休闲游首选豪华酒店任选接送机)/h3div classprice网付价em/emstrong889/strongem起/em/div/div*/var li div classcol-md-3\n a hrefroute_detail.html?ridroute.rid\n img srcroute.rimage alt图片加载失败……\n div classhas_border\n h3route.routeIntroduce/h3\n div classprice网付价em/emstrongroute.price/strongem起/em/div\n /div\n /a\n /div;route_lis li;// alert(route.rid);// alert(li)}$(#myfavorite).html(route_lis);//定位到页面顶部window.scrollTo(0,0);})
}要让“我的收藏”界面像国内游一样展示总记录数和页数route_list.html div classpage_num_infi/i 共span idtotalPage12/span页span idtotalCount132/span条
/div展示结果在myfavorite.html代码中加入同样的语句,可以得到该用户的收藏数量和分页但是很奇怪样式没有改变经提醒可得知文件一开头并未引入该css文件故没有任何改变引入css文件后依旧没有变化getParameter.js文件也引入了当不是此故。后来找到问题所在css样式设计不包括在里面只能自己写设计样式div classpage_num_infi/i 共span idtotalPage5/span页span idtotalCount20/span条
/div.page_one .xinxi .left .page_num_inf i {float: left;width: 4px;background-color: #878787;height: 20px;margin-top: 5px;margin-right: 10px;
}
.page_one .xinxi .left .page_num_inf span {color: #ff4848;
}就是油盐不进是吧重启后样式设置又好了非得叛逆一下是吧收藏排行榜分析收藏排行榜默认排行方式是根据被收藏的次数降序排列所以默认展示的收藏排行榜要查询所有线路被收藏次数此外还有搜索框可以根据线路名称和价格区间进行查询名称采用的是模糊查询价格区间则是拼接查询语句进行判断。过程图画图工具写到dao不知道为啥逆时针转了90°可能一身逆骨无处发泄该来的还是来了orz后台代码FavoriteDaoImpl Override //分页查询Favoritepublic ListFavorite findByPage(int uid, int start, int pageSize) {
//Collections.emptyList()返回一个空的List使用前提是不会再对返回的list进行增加和删除操作ListFavorite list Collections.emptyList();try {String sql select * from tab_favorite where uid ? limit ? , ?;list template.query(sql, new BeanPropertyRowMapperFavorite(Favorite.class), uid, start, pageSize);} catch (Exception e) {}return list;}Override //找到收藏量top前几的routepublic ListFavorite findTopFavorite(int top) {ListFavorite list Collections.emptyList();try {String sql SELECT * FROM (SELECT rid,COUNT(rid) AS count FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC) as top LIMIT ?;list template.query(sql, new BeanPropertyRowMapperFavorite(Favorite.class), top);} catch (DataAccessException e) {e.printStackTrace();}return list;}Override //找到所有的Favorite(不重复)public ListRoute findRouteByRangePage(int start, int pageSize, String rname, int first, int last) {// select * from table_name limit 10;//检索前10行记录// String sql select * from tab_route where cid? and rname like ? limit ? , ?;//limit后的两个问号第一个表示从哪里开始第二个表示查询多少个记录//1.定义sql模板
// String sql SELECT * FROM (SELECT * FROM (SELECT rid,COUNT(rid) AS COUNT FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC)AS aa)AS bb,tab_route t WHERE t.rid bb.rid ;String sql select * from tab_route where 1 1 ;//StringBuilder可变字符序列、效率高、线程不安全StringBuilder sb new StringBuilder(sql);List params new ArrayList();//条件们//2.判断参数是否有值
// 加上!null.equals(rname)才不会报错否则查找不到对应内容if (rname ! null rname.length() 0 !null.equals(rname)) {sb.append( and rname like ? );params.add(% rname %);}if (last ! 0){sb.append( and price between ? and ?);params.add(first);params.add(last);}
// if (first ! 0) {
// sb.append( and t.price ? );
// //添加?对应的值
// params.add(first);
// }
// if (last ! 0) {
// sb.append( and t.price ? );
// //添加?对应的值
// params.add(last);
// }//分页//按收藏次数降序排列sb.append( order by count desc );//加入分页查询sb.append( limit ? , ? );//查询条件// sql sb.toString();//sql语句重新赋值拼接多条件查询params.add(start);params.add(pageSize);System.out.println(params);return template.query(sb.toString(), new BeanPropertyRowMapperRoute(Route.class), params.toArray());}Override //根据rid查询收藏次数public int findCountByRid(int rid) {String sql select count(*) from tab_favorite where rid ?;return template.queryForObject(sql, Integer.class, rid);}Override //不分页情况下的总数public int findCountByRangeWithOutPage(String rname, int first, int last) {
// String sql SELECT COUNT(*) FROM (SELECT * FROM (SELECT rid,COUNT(rid) AS COUNT FROM tab_favorite GROUP BY rid ORDER BY COUNT(rid) DESC)AS aa)AS bb,tab_route t WHERE t.rid bb.rid ;String sql select count(*) from tab_route where 1 1 ;StringBuilder sb new StringBuilder(sql);//条件们List params new ArrayList();//判断参数是否有值if(rname!null rname.length()0 !null.equals(rname)){sb.append( and rname like ? );params.add(%rname%);}if (last ! 0){sb.append( and price between ? and ?);params.add(first);params.add(last);}// if(first!0){
// sb.append( and t.price ? );
// //添加?对应的值
// params.add(first);
// }
// if(last!0){
// sb.append(and t.price ? );
// //添加?对应的值
// params.add(last);
// }//分页sql sb.toString();int count template.queryForObject(sql,Integer.class,params.toArray());System.out.println(符合条件的记录数count);return count;}前台代码favoriterank.html加上id前端代码和后端代码都基本写好的前提下数据组PageBean pb的获取出现问题错误f12检查发现无法读取*2Cannot read properties of null (reading name )无法读取空属性(读取“名称”)Cannot read properties of undefined (reading length)无法读取未定义的属性(读取“长度”)出现原因用户未登录自然无法获取用户名name和长度length解决方案用户登录即可如此前端就不会报错了。看看前端错误显示currentPage为null因为RouteServlet中获取当前页码只限定了非空在StringUtils中更改了符号从||变成了更正之前如果是每一个加个非判断name就是要短路或因为只有这样出现任意一个非空情况都会输出真正的数据库获取的currentPage在小梅同志的共同查看下终于发现后端集合pb无法获取上传的原因没有将查询语句放到拼接语句里就这么简单困了我好久好久可恶啊加上后成功啦
