专栏首页零基础自学Java【JavaWeb】106:导航栏的实现

【JavaWeb】106:导航栏的实现

今天是刘小爱自学Java的第106天。

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

很多网站首页都会有一个导航栏,对应不同的模块,方便用户快速找到想要的内容。

其有如下特点:

  • 网站一加载,需要读取导航栏中的内容。
  • 在多个页面中都会存在该导航栏,这种在购物网站上很常见。
  • 导航栏数据是固定的,很少会变化,这不比用户注册和登录的数据。

其就造成了需要频繁地查询MySQL的问题。

为了提高查询效率,引入缓存技术,也就是前几天刚学的redis数据库。

今天的学习核心点也就是对redis数据库使用的一个学习和回顾。

一、代码编写

1前端发送请求

首先第一步,肯定要先有请求,服务器再根据请求做出对应的处理:

使用jQuery的页面加载事件,网站页面一刷新,就向数据库查询导航栏数据。

请求路径为:categoryServlet,其携带的methodName为queryAll。

所以在服务器中要有一个CategoryServlet来接受该请求,同时在queryAll方法中处做出对应的处理。

2web层代码

创建一个CategoryServlet来接受该请求:

因为请求中是没有其它参数数据的,所以只需要响应数据即可。

需要响应的数据格式是json,前两天的代码编写都是在web层中将数据转换成json。

其实也可以将其放入service层中,完成数据转换了返回给web层。

这样的话web层代码也就显得非常简洁。

2service层代码

service处理具体的业务逻辑,其中就涉及到缓存的处理:

①redis数据库

直接使用jedisUtils这个工具类就可以完成对redis数据库的操作。

使用非常方便,其封装过程就不再详述了。

通过jedis的get方法创建一个key值为Category_List的数据。

②初始化数据

第一次查询数据的时候因为redis还没有数据,所以需要从MySQL中查询数据。

查询的数据是一个List集合,也就是很多个Category对象,将其数据格式转换成json。

③将数据存储到redis中

通过set()方法将json数据存储到redis中。

这样设置后就不用每次都去mysql中查询数据了,直接去redis中查询数据。

4Dao层代码

通过jdbcTemplate查询tab_category表中的所有数据。

一行数据对应一个Category对象,那查询整张表也就是对应多个Category对象的集合。

二、前端渲染

1数据格式

后台响应数据给前端后,通过console.log()输出其结果,在控制台上可以查看。

在浏览器中按F12即可打开控制台:

这三者之间是互相有联系的:

  • 在前端中对应的数据格式是json。
  • 在数据库中对应的数据是一张数据表。
  • 在Java中对应的数据是一个实体类,准确地说是一个装有多个实体类的集合。

2前端页面渲染

在获取后台响应的数据之后,前端需要将其动态渲染到页面中:

①遍历数据

使用jQuery中的each方法可以遍历响应的数据,其中:

  • index是数据的索引。
  • element是当前索引位对应的元素。
  • element.cname即当前元素中cname这个key对应的value。

②页面拼接

前端静态页面布局如下:

但是静态页面将数据给写死了,所以要将遍历后的数据动态拼接到前端页面中。

其中首页和收藏排行榜这两个标签是固定的,所以只动态拼接中间8行。

③通过选择器将内容渲染到对应标签

使用jQuery中的html方法即可以完成,这里使用的选择器是类选择器。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】107:分页查询功能

    在每个显示页码的地方绑定一个点击事件,其对应的函数即为getPageData()。

    刘小爱
  • 【JavaWeb】111:详情页面的实现

    对于我们后台开发来说,打交道最多的肯定就是动态数据了。所以有业务需求时,不妨先分析页面中的数据与数据库中的表关系。

    刘小爱
  • 【微服务】164:商品微服务需要提供的接口

    因为涉及到一个分页查询,所以service层的代码较为复杂,当时详细编写并讲解过其代码实现,在此不再赘述。

    刘小爱
  • SpringBoot系列教程之Redis集群环境配置

    之前介绍的几篇redis的博文都是基于单机的redis基础上进行演示说明的,然而在实际的生产环境中,使用redis集群的可能性应该是大于单机版的redis的,那...

    一灰灰blog
  • Redis系列:Linux下部署Redis 6.x 版本

    主要原因是从 redis-6.x 开始的多线程代码依赖C标准库中的新增类型 _Atomic 。但是注意 gcc 从 4.9 版本才开始正式和完整地支持 stda...

    java乐园
  • Linux Centos7 安装 redis 教程

    9.把配置文件移动到 /root/myredis 目录 目录可以自定义可以为/root/myredis

    Little JAVA
  • python连接并使用redis

    Redis是一个强大的非关系型数据库,在python中同样可以使用redis,在python中称之为redis-py,分为2.0和3.0版本,下面均为3.0版本...

    申霖
  • 结合MTA来走出打造app性能数据监控平台的最后一公里

    App前期的工作主要以业务开发为主,在开发阶段,我们比较关注的是如何能个快速迭代开发,当这个紧锣密鼓的阶段结束之后,大多数App会走向稳定运营的阶段了,那么在业...

    brzhang
  • CentOS 7 源码编译安装 Redis

    https://segmentfault.com/a/1190000003084917

    晓晨
  • Linux系统上安装JDK、Tomcat以及Redis

    首先检查Linux系统上是否有JDK,一般Linux系统会有默认的openJDK,将其卸载掉。

    Java阿呆

扫码关注云+社区

领取腾讯云代金券