文章目录
一、前台
1.清理缓存
如果遇到改了前端代码，页面展示没有变，一直改都不会发生变化，这是可以清理一下网页的缓存（快捷键：ctrl+shift+delete键）！！！！
2.分页功能
在做我的订单的功能的时候，分页功能没实现，一直以为是后端将数据全部发给前端，前端进行分页，其实是后端就行分页，再将分页的数据传给前端页面进行展示。这一点一定要注意！！！！
（1）前台代码
<script>
$(function () {
/* var search = location.search;
//alert(search);//?id=5
// 切割字符串，拿到第二个值
var cid = search.split("=")[1];*/
//获取cid的参数值
var cid = getParameter("cid");
//获取rname的参数值
var rname = getParameter("rname");
//判断rname如果不为null或者""
if(rname){
//url解码
rname = window.decodeURIComponent(rname);
}
//当页码加载完成后，调用load方法，发送ajax请求加载数据
load(cid,null,rname);
});
function load(cid,currentPage,rname){
//发送ajax请求，请求route/pageQuery,传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
//解析pagebean数据，展示到页面上
// alert(currentPage);
// alert(pb.currentPage);
//1.分页工具条数据展示
//1.1 展示总页码和总记录数
$("#totalPage").html(pb.totalPage);
//alert(pb.totalPage);
$("#totalCount").html(pb.totalCount);
var lis = "";
var fristPage = '<li οnclick="javascipt:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum = pb.currentPage - 1;
if(beforeNum <= 0){
beforeNum = 1;
}
var beforePage = '<li οnclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis += fristPage;
lis += beforePage;
//1.2 展示分页页码
/*
1.一共展示10个页码，能够达到前5后4的效果
2.如果前边不够5个，后边补齐10个
3.如果后边不足4个，前边补齐10个
*/
// 定义开始位置begin,结束位置 end
var begin; // 开始位置
var end ; // 结束位置
//1.要显示10个页码
if(pb.totalPage < 10){
//总页码不够10页
begin = 1;
end = pb.totalPage;
}else{
//总页码超过10页
begin = pb.currentPage - 5 ;
end = pb.currentPage + 4 ;
//2.如果前边不够5个，后边补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//3.如果后边不足4个，前边补齐10个
if(end > pb.totalPage){
end = pb.totalPage;
begin = end - 9 ;
}
}
for (var i = begin; i <= end ; i++) {
var li;
//判断当前页码是否等于i
if(pb.currentPage == i){
li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}else{
//创建页码的li
li = '<li οnclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}
//拼接字符串
lis += li;
}
var lastPage = '<li class="threeword" οnclick="javascipt:load('+cid+','+pb.totalPage+',\''+rname+'\')"><a href="javascript:void(0)">末页</a></li>';
//计算下一页的页码
var nextNum = pb.currentPage + 1;
if(nextNum>pb.totalPage){
nextNum = pb.totalPage;
}
var nextPage = '<li οnclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
//var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
lis += nextPage;
lis += lastPage;
//将lis内容设置到 ul
$("#pageNum").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 = '<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="host_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
route_lis += li;
}
$("#route").html(route_lis);
//定位到页面顶部
window.scrollTo(0,0);
});
}
</script>
这段代码里面需要注意的一点就是拼字符串的时候，一定要注意！！！很容易出错，用双引号之后，里面就用单引号来连接。onclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
这里面的ranme前面的转义字符也不要忘记！！！！
（2）后台代码
HotelDaoImpl
@Override
public List<Hotel> findByPage( int start, int pageSize) {
//String sql = "select * from tab_route where cid = ? and rname like ? limit ? , ?";
String sql = " select * from tab_route where 1 = 1 and cid = 2";
//1.定义sql模板
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();//条件们
sb.append(" limit ? , ? ");//分页条件
sql = sb.toString();
params.add(start);
params.add(pageSize);
return template.query(sql,new BeanPropertyRowMapper<Hotel>(Hotel.class),params.toArray());
}
@Override
public int findTotalCount() {
//String sql = "select count(*) from tab_route where cid = ?";
//1.定义sql模板
String sql = "select count(*) from tab_route where cid = 2 ";
return template.queryForObject(sql,Integer.class);
}
@Override
public Hotel findByRid(int rid){
Hotel user = null;
try {
//1.定义sql
String sql = "select * from tab_route where cid=2 and rid= ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<Hotel>(Hotel.class), rid);
} catch (Exception e) {
}
return user;
}
HotelServiceImpl
@Override
public PageBean<Hotel> pageQuery(int currentPage, int pageSize) {
//封装PageBean
PageBean<Hotel> pb = new PageBean<Hotel>();
//设置当前页码
pb.setCurrentPage(currentPage);
//设置每页显示条数
pb.setPageSize(pageSize);
//设置总记录数
int totalCount = hotelDao.findTotalCount();
pb.setTotalCount(totalCount);
//设置当前页显示的数据集合
int start = (currentPage - 1) * pageSize;//开始的记录数
List<Hotel> list = hotelDao.findByPage(start,pageSize);
pb.setList(list);
//设置总页数 = 总记录数/每页显示条数
int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
pb.setTotalPage(totalPage);
return pb;
}
这里注意拼sql语句用where 1 = 1，而且拼的时候注意在后面多加空格！！！！
二、后台
（我是参照的其他人的前端页面写的，这三个功能基本都是增删改操作，做完一个另外两个是一样的，那我只讲第一个）
1.前台页面
（1）post和get请求
用这两种方式都可以发送到后端，之前一直以为是有区别的。
$.get("user/addUser",$(this).serialize(),function(data){ });
$.post("user/addUser",$(this).serialize(),function(data){ });
（2）name属性
一定要注意写这个属性，这是后端能结收到前端发来的数据关键属性，如果没有这个属性，可能接收不到数据！！！
<div class="form-group draggable">
<label class="col-sm-3 control-label" >酒店名：</label>
<div class="col-sm-9">
<input type="text" name="rname" id="rname" class="form-control" placeholder="请输入酒店名">
</div>
</div>
（3）数据回显
数据回显就是values这个属性，还有就是给它设置值，可参考 jq （DOM操作-内容操作），还有注意加values的属性！
<div class="form-group draggable">
<label class="col-sm-3 control-label" >酒店名：</label>
<div class="col-sm-9">
<input type="text" name="rname" id="rname" value="" class="form-control" placeholder="请输入酒店名">
</div>
</div>
<script>
$(function () {
//获取cid的参数值
var rid = getParameter("rid");
$.get("hotel/findHotel",{rid:rid},function (data) {
alert(data);
$("#rname").val(data.rname);
$("#price").val(data.price);
$("#routeIntroduce").val(data.routeIntroduce);
$("#rflag").val(data.rflag);
$("#rdate").val(data.rdate);
$("#telephone").val(data.telephone);
$("#isThemeTour").val(data.isThemeTour);
});
});
</script>
这里的rid是展示全部数据那里就将rid穿过来的！！！！href="hotel_update.html?rid='+route.rid 注意这个字段！！
'<td><a class="btn btn-default btn-sm" href="hotel_update.html?rid='+route.rid+'">修改</a> <a class="btn btn-default btn-sm" href="javascript:deleteUser('+route.rid+');">删除</a></td>'
2.后端代码
（1）数据封装
//1.获取数据
Map<String, String[]> map = request.getParameterMap();
//2.封装对象
Hotel hotel = new Hotel();
try {
BeanUtils.populate(hotel,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
（2）注意事项
后端的出错大多来自sql语句的错误，字段不匹配和字段名不对。还有就是查询语句，查询为null，如果不进行try…catch就会报错，这一点需要注意！！！！！
@Override
public Hotel findByRid(int rid){
Hotel user = null;
try {
//1.定义sql
String sql = "select * from tab_route where cid=2 and rid= ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<Hotel>(Hotel.class), rid);
} catch (Exception e) {
}
return user;
}
总结
链接：全部代码
提取码：uaoo
（前端的样式太多传不上，有需要可找我）
