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

感谢你的观看，谢谢你。

(相关资料图)

话不多说，开始今天的学习：

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

其有如下特点：

网站一加载，需要读取导航栏中的内容。

在多个页面中都会存在该导航栏，这种在购物网站上很常见。

导航栏数据是固定的，很少会变化，这不比用户注册和登录的数据。

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

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

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

一、代码编写

1前端发送请求

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

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

请求路径为：categoryServlet，其携带的methodName为queryAll。

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

2web层代码

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

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

二、前端渲染

1数据格式

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

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

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

在前端中对应的数据格式是json。

在数据库中对应的数据是一张数据表。

在Java中对应的数据是一个实体类，准确地说是一个装有多个实体类的集合。

2前端页面渲染

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

遍历数据

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

index是数据的索引。

element是当前索引位对应的元素。

element.cname即当前元素中cname这个key对应的value。

页面拼接

前端静态页面布局如下：

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

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

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

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

最后

谢谢你的观看。

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