Java项目实战第7天：导航栏业务的实现

布满荆棘的人生 2023-03-04 09:27 1阅读 0赞

### 目录 ###

*   *   *  
     *  一、代码编写
     *  二、前端渲染
     *  最后

###  ###

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

感谢你的观看，谢谢你。

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

![format_png][]

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

其有如下特点：

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

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

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

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

## 一、代码编写 ##

**1前端发送请求**

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

![format_png 1][]

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

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

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

**2web层代码**

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

![format_png 2][]

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

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

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

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

**2service层代码**

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

![format_png 3][]

**①redis数据库**

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

使用起来非常方便，其封装过程就不再详细说明了。

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

**②初始化数据**

第一次查询数据的时候需要从MySQL中查询数据。

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

**③将数据存储到redis中**

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

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

**4Dao层代码**

![format_png 4][]

通过jdbcTemplate查询tab\_category表中的所有数据。

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

## 二、前端渲染 ##

**1数据格式**

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

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

![format_png 5][]

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

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

**2前端页面渲染**

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-giHOcQT3-1596426774790)(https://imgkr.cn-bj.ufileos.com/183bff76-c03e-4e8c-ace8-8ab1abe00336.png )\]

**①遍历数据**

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

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

**②页面拼接**

前端静态页面布局如下：

![format_png 6][]

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

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

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

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

## 最后 ##

谢谢你的观看。

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

[format_png]: /images/20230208/123aa40f10d44d759ec3d195aa423108.png
[format_png 1]: /images/20230208/71c554b792df49c78cf85a98ac0ebf1c.png
[format_png 2]: /images/20230208/cacc059a5f074b6caba7e8aa75a51102.png
[format_png 3]: /images/20230208/45bb50d43e2b4c51bd770d61366f3d90.png
[format_png 4]: /images/20230208/e444650b64ec4dfe8bbd2be48e169903.png
[format_png 5]: /images/20230208/5773c67e784d4e3aa5b6200197b6d709.png
[format_png 6]: /images/20230208/d694f989b46140f78f7b3eaade345804.png