黑马旅游网（二）

1.实现的功能和用到的技术
- 1.1实现的功能
- 1.2用到或者涉及到的技术
2. 根据文档配置环境
3.简单的对项目进行解释
- 3.1简单通俗的讲解后端
- 3.2简单通俗的讲解前端：
- 3.3以分页详细通俗的解释
- - 3.3.1数据库分析
  - 3.3.2后端分析
  - 3.3.3前端分析
  - 3.3.4 整体讲解步骤，
4.简单的优化

1.实现的功能和用到的技术

1.1实现的功能

用户相关：用户注册+用户登陆+用户退出+用户激活
路线相关：分页查询+旅游线路的详细信息+用户收藏

1.2用到或者涉及到的技术

html+css+jq+Maven+redis+mysql+java+bootstarp+ajax

2. 根据文档配置环境

git 地址： https://gitee.com/dengweikenan/travle
文档基本都讲解了配置pom，我连接的基本和详解相似，只是我的mysql驱动的
所以需要修改
我用的是8085端口，也需要自己改

基本修改的就这些

3.简单的对项目进行解释

3.1简单通俗的讲解后端

domain层：就是封装类，把信息一个个的封装成类。
dao层：就是提取数据库存的信息，里面的接口就是简单的介绍下功能，然后类实现它的方法，写接口的目的在于更加模块化开发，增加耦合度。然后根据domain封装的类，把查询的数据存到类里面。
service层：根据需求对dao层取到的东西进行整理。
util层：一些封装的工具
servlet层：把后端数据转成json传到前端。

3.2简单通俗的讲解前端：

前端主要的功能就是把后端提取到的数据通过ajax动态的显示在页面上。

3.3以分页详细通俗的解释

主要讲解国内游的分页实现：
这个其实是第一阶段的内容，我主要以第一阶段的进行详细的讲解：
只实现分页，并未实现搜索，

根据图片所示：
我们要进行分页，首先需要知道总的记录数，总页数，当前页，每页展示的条数。然后把查到的数据用List集合储存，通过servlet传到前端，再由前端进行数据拼接显示。

3.3.1数据库分析

主要用到：

3.3.2后端分析

首先从数据库提取数据，首先用来封装类的文件domain下的PageBean这个类，`

/*** 分页对象*/
public class PageBean<T> {private int totalCount;//总记录数private int totalPage;//总页数private int currentPage;//当前页码private int pageSize;//每页显示的条数private List<T> list;//每页显示的数据集合public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getPageSize() {return pageSize;}public void setPageSize(int pageSize) {this.pageSize = pageSize;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}
}

dao层

public class RouteDaoImpl implements RouteDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int findTotalCount(int cid) {String sql = "select count(*) from tab_route where cid = ?";return template.queryForObject(sql,Integer.class,cid);}@Overridepublic List<Route> findByPage(int cid, int start, int pageSize) {String sql = "select * from tab_route where cid = ? limit ? , ?";return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);}
}

Route类就是把tab_route数据库进行的封装类。

service层

public class RouteServiceImpl implements RouteService {private RouteDao routeDao = new RouteDaoImpl();@Overridepublic PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {//封装PageBeanPageBean<Route> pb = new PageBean<Route>();//设置当前页码pb.setCurrentPage(currentPage);//设置每页显示条数pb.setPageSize(pageSize);//设置总记录数int totalCount = routeDao.findTotalCount(cid);pb.setTotalCount(totalCount);//设置当前页显示的数据集合int start = (currentPage - 1) * pageSize;//开始的记录数List<Route> list = routeDao.findByPage(cid,start,pageSize);pb.setList(list);//设置总页数 = 总记录数/每页显示条数int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;pb.setTotalPage(totalPage);return pb;}
}

里面调用了dao层的方法，返回的pb拥有当前页码，每页显示条数，
总记录数，当前页显示的数据集合，设置总页数

service层：

    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.接受前端传过来的参数String currentPageStr = request.getParameter("currentPage");String pageSizeStr = request.getParameter("pageSize");String cidStr = request.getParameter("cid");int cid = 0;//类别id//2.处理参数if(cidStr != null && cidStr.length() > 0){cid = Integer.parseInt(cidStr);}int currentPage = 0;//当前页码，如果不传递，则默认为第一页if(currentPageStr != null && currentPageStr.length() > 0){currentPage = Integer.parseInt(currentPageStr);}else{currentPage = 1;}int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录if(pageSizeStr != null && pageSizeStr.length() > 0){pageSize = Integer.parseInt(pageSizeStr);}else{pageSize = 5;}//3. 调用service查询PageBean对象PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);//4. 将pageBean对象序列化为json，返回writeValue(pb,response);}

writeValue是封装的方法。
最后把pb用ajax传到前端动态的显示在页面上
整体来说后端做的工作就是接受前端发送的参数，然后进行查询出信息，用json的格式返回给前端

3.3.3前端分析

主要是对route_list.html进行分析
主要对js进行讲解：

$(function () {var search = location.search;//alert(search);//?id=5// 切割字符串，拿到第二个值var cid = search.split("=")[1];//当页码加载完成后，调用load方法，发送ajax请求加载数据load(cid);});function load(cid ,currentPage){//发送ajax请求，请求route/pageQuery,传递cid$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {console.log(pb)//解析pagebean数据，展示到页面上//1.分页工具条数据展示//1.1 展示总页码和总记录数$("#totalPage").html(pb.totalPage);$("#totalCount").html(pb.totalCount);/*<li><a href="">首页</a></li><li class="threeword"><a href="#">上一页</a></li><li class="curPage"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="threeword"><a href="javascript:;">下一页</a></li><li class="threeword"><a href="javascript:;">末页</a></li>*/var lis = "";var fristPage = '<li οnclick="javascipt:load('+cid+')"><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+')" 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,结束位置 endvar 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;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}var nextNum =  pb.currentPage + 1;if(nextNum >= 103){nextNum = 103;}var nextPage = '<li  οnclick="javascipt:load('+cid+','+nextNum+')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';var lastPage = '<li οnclick="javascipt:load('+cid+','+pb.totalPage+')"><a href="javascript:void(0)">末页</a></li>';lis += nextPage;lis += lastPage;/* for (var i = 1; i <= pb.totalPage ; i++) {var li;//判断当前页码是否等于iif(pb.currentPage == i){li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}else{//创建页码的lili = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';}//拼接字符串lis += li;}*///将lis内容设置到 ul$("#pageNum").html(lis);/*<li><div class="img"><img src="data:images/04-search_03.jpg" alt=""></div><div class="text1"><p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p><br/><p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p></div><div class="price"><p class="price_num"><span>&yen;</span><span>299</span><span>起</span></p><p><a href="route_detail.html">查看详情</a></p></div></li>*///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>&yen;</span>\n' +'                                <span>'+route.price+'</span>\n' +'                                <span>起</span>\n' +'                            </p>\n' +'                            <p><a href="route_detail.html">查看详情</a></p>\n' +'                        </div>\n' +'                    </li>';route_lis += li;}$("#route").html(route_lis);//定位到页面顶部window.scrollTo(0,0);});}

这个是直接执行函数里面有个load方法直接执行了
详细讲解load里面的内容：
第一部分：
通过ajax把cid和currentPage传到后端，然后获取后端发送到前端的pb，
把总页码和总记录数显示到页面上

这个就是页面的，对应HTML就是
通过id动态生成的
第二部分：这个是原来的html页面我现在要动态生成这个页面。

如代码所示：
····首先第一部分
动态设置上一页和首页
···首页：只传了cid ，根据RouteServlet可以得到currentPage = 1 ，pageSize等于5，所以查询到的是首页的

···上一页：把currentPage-1，然后就查询到了上一页。

一共展示10个页码，能够达到前5后4的效果
2.如果前边不够5个，后边补齐10个
3.如果后边不足4个，前边补齐10个
具体的代码逻辑注释已经写好，
这个就是把当前页数设置class
下一页和末页我也优化了
页面展示

这是我获取到的pb，然后根据List动态加到页面上。

然后添加到ul里面
每一次点击就可以在后端把数据分类好。然后动态显示到页面上。

3.3.4 整体讲解步骤，

当前页为第2页
传的cid 和 2

发送ajax 路径为route/pageQuery对应
···RouteServlet
然后调用service层RouteServiceImpl的pageQuery方法

里面调用的是dao层的RouteDaoImpl里的findTotalCount，findByPage方法
然后查询到数据。

4.简单的优化

1.登陆时需要验证码
2.修复了一些bug
3.下页和末页完善了

Java web - 黑马旅游网（加使用文档总结）相关推荐

【毕设课设】【毕设课设】JAVA web健身房管理系统（源码+文档+数据库）
1) 数据库说明 (1)本系统使用数据库为MySql5.5.40,使用时向数据库导入文件gym-mysql.sql. (2)可登陆的管理员登录账号:20190001,密码为:123123; 2) 程 ...
signature=95eea087473d092a96a2e8a1766b9911,黑马旅游网初始项目文件！WEB阶段
[实例简介] 黑马旅游网初始项目文件!需要2018 IDEA开发的教程视频可以看我主页也有链接 [实例截图] [核心代码] 93854a9c-563e-4583-bb57-7bb9bea149b7 └ ...
基于JAVA悦途旅游网计算机毕业设计源码+系统+数据库+lw文档+部署
基于JAVA悦途旅游网计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA悦途旅游网计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈: 项目架构:B/S架构开发语言:Java ...
java计算机毕业设计全域旅游Web平台源代码+数据库+系统+lw文档
java计算机毕业设计全域旅游Web平台源代码+数据库+系统+lw文档 java计算机毕业设计全域旅游Web平台源代码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语言:Java ...
计算机毕业设计Java悦途旅游网(系统+程序+mysql数据库+Lw文档）
计算机毕业设计Java悦途旅游网(系统+程序+mysql数据库+Lw文档) 计算机毕业设计Java悦途旅游网(系统+程序+mysql数据库+Lw文档) 最新计算机专业原创毕业设计参考选题都有源码+数据 ...
基于Java web的旅游网站（源码+文档）
源码编号:B-E57点击查看(分类规则) 项目类型:Java web项目/Java EE项目(非开源) 项目名称:基于java web的旅游网站 [travel] 当前版本:V1.0.0版本用户类型 ...
黑马旅游网项目详细思路和完整代码整理 -附源码
黑马旅游网项目详细思路和完整代码整理前言由于新冠病毒的原因,无法上学.百无聊赖下自己开始看视频学习,跟着视频做完了这个项目来检验学习成果,顺便写篇博客来记录一下. 话不多说,开始正题. 文档及其源 ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

Java web - 黑马旅游网（加使用文档总结）