在线问答5

这个屌丝很懒，什么也没留下！

热门标签

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

作者：在线问答5 | 2024-07-24 03:49:47

踩

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

黑马旅游网（二）

1.实现的功能和用到的技术
- 1.1实现的功能
- 1.2用到或者涉及到的技术
2. 根据文档配置环境
3.简单的对项目进行解释
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;
    }
}
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个
具体的代码逻辑注释已经写好，
这个就是把当前页数设置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

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