【途牛旅游项目】05 - 导航功能，通过Redis缓存实现。

￡神魔★判官ぃ 2022-12-13 12:57 330阅读 0赞

文章目录

    • 导航实现
          1. 创建测试类，测试查询所有分类
          1. 查询所有分类的service
          1. 创建对应的javabean对象
          1. dao和对应映射
          1. 测试运行
          1. CategoryServlet
          1. 导航jsp页面`header.jsp`
          1. 显示效果
        1. 导航优化，实现Redis缓存管理导航
        • 2.1 创建属性文件`jedis.properties`，用来配置连接Redis的基本信息（键值对）
        • 2.2 创建Jedis工具类，连接redis，读取propties文件键值对配置
        • 2.3 修改`CategoryServlet `，通过Redis调用
        • 2.4 开启Redis服务器
        • 2.5 运行

最终效果：

导航实现

在这里插入图片描述

1. 创建测试类，测试查询所有分类

  1. //测试获取所有分类信息Category
  2. public class TestCategoryService { 
  3.     @Test
  4.     public void test01(){ 
  5.         //创建业务对象
  6.         CategoryService categoryService = new CategoryService();
  7.         //所有的分类
  8.         List<Category> categoryList=categoryService.findAll();
  9.         //显示
  10.         System.out.println(categoryList);
  11.     }
  12. }

2. 查询所有分类的service

  1. //分类业务
  2. public class CategoryService { 
  3.     private static CategoryDao categoryDao = GetDaoUtils.getMapper(CategoryDao.class);
  4.     public List<Category> findAll() { 
  6.         //查询所有的分类数据
  7.         List<Category> list =  categoryDao.findAll();
  8.         return list;
  9.     }
  10. }

3. 创建对应的javabean对象

  1. //分类信息Category
  2. public class Category { 
  3.     private int cid;//分类id
  4.     private String cname;//分类名称
  5.     //省略get/set方法
  6. }

4. dao和对应映射

CategoryDao

  1. public interface CategoryDao { 
  2.     //获取所有的分类，按照升序排序
  3.     //select * from tab_category order by cid asc;
  4.     List<Category> findAll();
  6.     //通过id查找Category
  7.     //select * from tab_category c where c.cid =1;
  8.     Category findOneByCid(int cid);
  9. }
  11. <mapper namespace="com.xgf.dao.CategoryDao">
  12.     <!-- 查找所有分类，按升序输出 -->
  13.     <select id="findAll" resultType="com.xgf.bean.Category">
  14.         select cid,cname from tab_category order by cid asc;
  15.     </select>
  17.     <!-- 通过id查找category -->
  18.     <select id="findOneByCid" parameterType="int" resultType="com.xgf.bean.Category">
  19.         select cid,cname from  tab_category c where c.cid =#{cid}
  20.     </select>
  21. </mapper>

5. 测试运行

运行结果：
Preparing: select cid,cname from tab_category order by cid asc;
Parameters:
Total: 8
[Category{cid=1, cname=‘门票’}, Category{cid=2, cname=‘酒店’}, Category{cid=3, cname=‘香港车票’}, Category{cid=4, cname=‘处境游’}, Category{cid=5, cname=‘国内游’}, Category{cid=6, cname=‘港澳游’}, Category{cid=7, cname=‘抱团定制’}, Category{cid=8, cname=‘全球自由行’}]

6. CategoryServlet

  1. @WebServlet("/categoryServlet")
  2. public class CategoryServlet extends HttpServlet { 
  3.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  4.             doGet(request,response);
  5.     }
  7.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  8.         //业务类
  9.         CategoryService categoryService = new CategoryService();
  10.         //获取所有的分类
  11.         List<Category> categoryList=categoryService.findAll();
  13.         //以json格式显示在页面上
  14.         Msg msg = new Msg();
  15.         msg.setCode(200);    //响应码
  16.         msg.setData(categoryList);    //数据
  17.         String json = new ObjectMapper().writeValueAsString(info);    //转换为json数据格式
  18.         response.getWriter().println(json);    //响应到浏览器
  19.     }
  20. }

7. 导航jsp页面header.jsp

  • 通过ajax发送get请求
  • jquery的for循环
  • html()函数修改界面
  • js中字符串拼接，建议最外层用单引号，防止拼接字符串遇到双引号需要通过\转译
  • js中的字符串拼接变量的方式 ' + 变量名 + '
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <html>
  6. <body>
  7. <!-- 头部 start -->
  8. <header id="header">
  9.     <div class="top_banner">
  10.         <img src="images/top_banner.jpg" alt="头部导航栏">
  11.     </div>
  12.     <div class="shortcut">
  13.         <!-- 登录状态 -->
  14.         <div class="login" style="margin-left: -100px">
  15.             <%--            将session中的用户数据取出来 --%>
  16.             <%--            判断用户对象是否为空  如果是提示请登录，否则显示用户信息--%>
  17.             <!-- 登录显示 -->
  18.             <c:if test="${user != null}">
  19.                 <span>欢迎使用，${user.username}</span>
  20.                 <a href="myfavorite.jsp" class="collection">我的收藏</a>
  21.                 <a href="${pageContext.request.contextPath}/loginOutServlet">退出</a>
  22.             </c:if>
  23.             <!-- 未登录显示 -->
  24.             <c:if test="${user == null}">
  25.                 <span>您还没有登录</span>
  26.                 <a href="login.jsp">登录</a>
  27.                 <a href="register.jsp">注册</a>
  28.             </c:if>
  30.         </div>
  31.     </div>
  32.     <div class="header_wrap">
  33.         <div class="topbar">
  34.             <div class="logo">
  35.                 <a href="/"><img src="images/logo.jpg" alt=""></a>
  36.             </div>
  37.             <div class="search">
  38.                 <input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
  39.                 <a href="javascript:;" class="search-button">搜索</a>
  40.             </div>
  41.             <div class="hottel">
  42.                 <div class="hot_pic">
  43.                     <img src="images/hot_tel.jpg" alt="">
  44.                 </div>
  45.                 <div class="hot_tel">
  46.                     <p class="hot_time">客服热线(9:00-6:00)</p>
  47.                     <p class="hot_num">400-000-0000</p>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52. </header>
  54. <!-- 头部 end -->
  55. <!-- 首页导航 -->
  56. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  57. <script type="text/javascript"> //页面加载成功之后执行该函数 $(function () { //ajax提交 这个data就是服务器返回的数据Msg $.get("categoryServlet", function (data) { if (data.code == 200) { var list = data.data;//获取分类数据 //变量lis用于拼接导航的显示内容（分类） var lis = ""; //拼接第一项首页 lis += '<li class="nav-active"><a href="index.jsp">首页</a></li>' //循环所有的分类，加入到lis中 for (var i = 0; i < list.length; i++) { //在js中，建议在最外行用单引号，避免生成转译的\ list[i].cname获取分类名 var li = '<li><a href="route_list.html">' + list[i].cname + '</a></li>' //拼接 lis += li } //拼接最后一项 收藏排行榜 lis += ' <li><a href="favoriterank.html">收藏排行榜</a></li>' //将其显示在页面的ul中 // $("#nav").html(lis) $("#nav").html(lis) } }, "json"); }) </script>
  58. <div class="navitem">
  59.     <ul class="nav" id="nav">
  60.         <%--   这里填入脚本查询分类li    --%>
  61.     </ul>
  62. </div>
  63. </body>
  64. </html>

8. 显示效果

在这里插入图片描述

2. 导航优化，实现Redis缓存管理导航

用Redis优化的原因和好处：
  分类的数据在每一次页面加载后都会重新请求数据库来加载，这种经常访问对数据库的压力比较大，而且类似分类的数据不会经常产生变化，所有可以使用redis来缓存这个数据。

Redis缓存流程
在这里插入图片描述
  查询数据先从Redis查询，如果是第一次查询，从Redis缓存没查到，查数据库，然后将数据保存到Redis缓存中，以后每次查询都是直接从Redis缓存中取数据，减少数据库的压力。

2.1 创建属性文件jedis.properties，用来配置连接Redis的基本信息（键值对）

  1. maxTotal=100
  2. maxIdle=15
  3. url=localhost
  4. port=6379

2.2 创建Jedis工具类，连接redis，读取propties文件键值对配置

  1. public class JedisUtils { 
  2.     //单例模式 静态代码块只执行一次，因为创建会很消耗性能
  3.     private static JedisPool pool;
  4.     //静态代码在项目中，如果被使用只会加载一次
  5.     static { 
  7.         //读src下的文件用类加载器的方式
  8.         InputStream inputStream= JedisUtils.class.getClassLoader().getResourceAsStream("jedis.properties");
  10.         //.properties文件专门的读取工具
  11.         Properties properties = new Properties();
  12.         try { 
  13.             //将流中的数据读成map
  14.             properties.load(inputStream);
  15.         } catch (IOException e) { 
  16.             e.printStackTrace();
  17.         }
  18.         // 1:创建连接池的配置对象
  19.         JedisPoolConfig config = new JedisPoolConfig();
  20.         //设置最大链接数
  21.         config.setMaxTotal(Integer.parseInt(properties.getProperty("maxTotal")));
  22.         //设置空闲连接数 "3"
  23.         config.setMaxIdle(Integer.parseInt(properties.getProperty("maxIdle")));
  24.         //2:创建连接池
  25.          pool = new JedisPool(config, properties.getProperty("url"), Integer.parseInt(properties.getProperty("port")));
  26.     }
  27.     public static Jedis getJedis() { 
  28. // 3:从连接池中获取一个连接
  29.         Jedis jedis = pool.getResource();//获取一个连接
  30.         return jedis;
  31.     }
  33.     public static void close(Jedis jedis) { 
  34.         if(jedis!=null){ 
  35.             jedis.close();
  36.         }
  37.     }
  38. }

2.3 修改CategoryServlet，通过Redis调用

  1. //通过redis实现分类缓存
  2. @WebServlet("/categoryServlet")
  3. public class CategoryServlet extends HttpServlet { 
  4.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  5.         doGet(request,response);
  6.     }
  8.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
  10.         //访问redis 较快,但是第一次是没有数据的
  11.         //访问service，获取json，将json保存到redis
  12.         Jedis jedis = JedisUtils.getJedis();
  13.         String json = jedis.get("category_list");
  15.         if (json != null) { 
  16.             System.out.println("redis cache");
  17.             response.getWriter().println(json);
  19.         } else { 
  20.             System.out.println("mysql data");
  21.             //创建业务对象
  22.             CategoryService categoryService = new CategoryService();
  23.             //所有的分类
  24.             List<Category> categoryList=categoryService.findAll();
  25.             //显示
  26.             Msg msg = new Msg();
  27.             msg.setCode(200);
  28.             msg.setData(categoryList);
  29.             json = new ObjectMapper().writeValueAsString(msg);
  30.             //将数据保存到redis
  31.             jedis.set("category_list",json);
  32.             response.getWriter().println(json);
  33.         }
  34.         //关闭连接
  35.         JedisUtils.close(jedis);
  36.     }
  37. }

2.4 开启Redis服务器

在这里插入图片描述

2.5 运行

在这里插入图片描述

运行结果：第一次查询
从 mysql data 中读取数据
Preparing: select cid,cname from tab_category order by cid asc;
Parameters:
Total: 8
刷新页面第二次/n次查询：（不查询MySQL数据库，不发送sql语句）
从 redis cache 中读取数据

通过Redis的可视化工具查看分类数据

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读