JavaWeb - 黑马旅游网（4）：首页线路分类展示

项目课程链接：https://www.bilibili.com/video/BV1CE411E7h4
完整课程连接：https://www.bilibili.com/video/BV1uJ411k7wy

1 功能描述

接上篇黑马旅游网（3）：登录与退出，本篇博客将分析和实现旅游线路分类内容的查询和展示。此功能旨在控制 banner 顶部的展示内容。如以下H5页面所示：

2 功能分析

2.1 功能逻辑抽象

分类展示功能在逻辑上并不复杂：每当需要加载 <header> 标签中的内容时，都会向后端提交一个 GET 请求来获取分类数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内容。

查询旅游线路分类内的功能需要面向数据库中的另一张表 tab_category，为了区分不同类型的数据查询业务以及代码的维护性和扩展性。在开发时基于三层架构体系建立对应的 CategoryServlet 类、CategoryService 接口和实现类、CategoryDao 接口和实现类。

2.2 性能优化策略

不难发现，线路分类展示的内容在短时间内几乎不会发生改动。考虑引入 Redis 缓存数据，即降低数据库的负担，也提高了查询性能。

3 代码实现

3.2 后端

3.1.1 Servlet

在 CategoryServlet 类中定义查询所有线路分类内容的主体逻辑

public void findAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
    // 1.调用service查询所有categories
    List<Category> categories = service.findAll();
    // 2.序列化json，并回写客户端浏览器
    this.writeValue(categories, response);
}

3.1.2 Service

在 CategoryServiceImpl 类中定义 findAll() 方法，定义旅游线路分类内容的具体查询业务逻辑

public List<Category> findAll() {
    // 1.从redis中查询，使用 sorted set 实现排序查询
    Set<Tuple> categories_cache = jedis.zrangeWithScores("category", 0, -1);
    // 2.判断查询结果是否为空
    List<Category> categories;
    if (categories_cache == null || categories_cache.size() == 0) {     // 空
        System.out.println("从数据库中查询...");
        // 从数据库中查询
        categories = dao.findAll();
        // 根据cid排序，保证从数据库结果和redis结果一致
        categories.sort(Comparator.comparingInt(Category::getCid));
        // 将数据存储到redis中
        for (Category category : categories) {
            jedis.zadd("category", category.getCid(), category.getCname());
        }
    } else {    // 非空
        System.out.println("从redis中查询...");
        // 统一输出数据类型，将从redis中拿到的字符串转为List<Category>形式
        categories = new ArrayList<>();
        for (Tuple tuple : categories_cache) {
            Category category = new Category();
            category.setCid((int) tuple.getScore());
            category.setCname(tuple.getElement());
            categories.add(category);
        }
    }
    return categories;
}

3.1.3 Dao

在 CategoryDaoImpl 类中定义 findAll() 方法，操作数据库查询 tab_category 表中的所有内容

public List<Category> findAll() {
    String sql = "SELECT * FROM tab_category";
    return template.query(sql, new BeanPropertyRowMapper<>(Category.class));
}

3.2 前端

后端程序执行顺利的话，返回的响应结果可以使用 FireFox 浏览器的自动 json 解析功能观察到以下效果。

前端在加载 <header> 内容时便向后端提交异步请求。在 header.html 的 <script> 标签中定义以下 jQuery 代码：

/**
 * 查询分类数据信息
 */
$.get("category/findAll", {}, function (data) {
    // data: [{cid: 1, cname: 国内游}, {CategoryBean}, {CategoryBean}]
    let lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
    // 遍历data数组，拼接字符串（<li>...</li>）
    for (let i = 0; i < data.length; i ++) {
        lis += '<li><a href="route_list.html?cid=' + data[i]["cid"] + '">' + data[i]["cname"] + '</a></li>';
    }
    // 拼接收藏排行榜<li><a href="favoriterank.html">收藏排行榜</a></li>
    lis += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
    // 将lis字符串设置到ul的html内容中
    $("#category").html(lis);
});

其中 首页 和 收藏排行榜 是固定的，所以添加在 H5 字符串中的首尾，而其他内容通过循环遍历解析后的 json 数据按照一定规律加入字符串。

部分代码并未完全展示，完整代码可以参考我的 GitHub 仓库