当前位置:   article > 正文

Java web - 黑马旅游网(加使用文档总结)_黑马程序员 旅游网站 使用文档总结

黑马程序员 旅游网站 使用文档总结

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;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

dao层
在这里插入图片描述

public class RouteDaoImpl implements RouteDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public int findTotalCount(int cid) {
        String sql = "select count(*) from tab_route where cid = ?";
        return template.queryForObject(sql,Integer.class,cid);
    }

    @Override
    public 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);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

service层

public class RouteServiceImpl implements RouteService {
    private RouteDao routeDao = new RouteDaoImpl();
    @Override
    public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
        //封装PageBean
        PageBean<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;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

里面调用了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);

    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

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,结束位置 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+')"><a href="javascript:void(0)">'+i+'</a></li>';

                    }else{
                        //创建页码的li
                        li = '<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;
                    //判断当前页码是否等于i
                    if(pb.currentPage == i){

                        li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';

                    }else{
                        //创建页码的li
                        li = '<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="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);
            });

        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196

在这里插入图片描述
这个是直接执行函数里面有个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个
具体的代码逻辑注释已经写好,z
这个就是把当前页数设置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.下页和末页完善了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/在线问答5/article/detail/872782
推荐阅读
相关标签
  

闽ICP备14008679号