springboot+redis+thymeleaf实现集合的数据在前端显示

大家好，我是讯享网，很高兴认识大家。

一，前言

关于redis缓存实现在前端的一个问题：

这几天在各大博客论坛上疯狂的找thymeleaf显示从redis获取缓存显示数据，都快找遍了全网也没搜到关于这方面单独的知识，自己钻研了一两天，研究了一下redis的部分原理，由于redis存取数据有好多种，且每一种存入redis数据库里的数据格式还不一样，所以redis获取的数据不能直接放在modle上，这样会导致前端模板引擎遍历不出数据，导致前端遍历时报错，所以需要先将redis中获取的数据进行强转强转为JSON格式，再将JSON强转为LIST集合的方式实现，所以我总结了一点经验，在下面分享给大家

二，项目展示

1.运行样式展示

用springboot+redis+thymeleaf+mybatisplus实现（具体代码往下看）

讯享网

（当前为毕业设计，等毕业答辩完成，将进行开源）

2.项目需要的依赖

<!-- redis连接池--> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-pool2</artifactId> </dependency> <!-- redis依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!--thymeleaf模板--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <version>2.7.3</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-java8time</artifactId> </dependency> <!--Web依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--mybatis-plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.0.5</version> </dependency> <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.10</version> <scope>provided</scope> </dependency>

讯享网

3.controller代码（业务层就不展示了直接在控制层实现）

讯享网/
 * @author: sqxjj
 * @Project: JavaLaity
 * @Pcakage: com.gong.school_card.pccontroller.UserController
 * @Date: 2022年09月14日 16:36
 * @Description:
 */
@Controller
public class UserController {


    //业务层注入
    @Resource  
    private StudentServicesImpl studentServices;

    @Resource  
    private StringRedisTemplate stringRedisTemplate;

    //删除学生记录
    @RequestMapping("/RecycleBin")
    public String RecycleBin(Model model) {
        /
         * 回收站
         * 推荐使用ListOperations进行存储list集合 这样获取出来比较方便
         */

       //开始存入redis数据
       ListOperations<String, Student> listOps = redisTemplate.opsForList();

       //获取数据库的数据
        List<Student> list = studentMapper.selectList(null);

       /将集合list存入redis 
         ！！！请注意 如果在传值过程时 数据库查无数据 将不会执行存储 
         数据的方法，会强制结束进程，存储时请确保您的sql语句可以查询出数据*/
        listOps.leftPushAll("student", list);

       //获取redis中的数据
        List<String> students = stringRedisTemplate.opsForList().range("user", 0, -1);

       //获取出来的students集合不可直接放入接口中 需要进行以下操作
       //将其获取的数据进行强制类型转换成json格式
         List<Student> o = (List<Student>) JSONObject.toJSON(students); 

       //再将json格式转换成字符串  
         String jsonString = o.toString();

       //最后将其转换成list集合 
       /student是我写的一个实体类 用来存放我接收redis的数据  注意这个实体类要跟您mapper 
          里的实体类相互对应，最好是用一个进行存储*/
         List<Student> list = JSON.parseArray(jsonString, Student.class);

       //现在可以直接放入modle中  前端会正常接收并显示了
        model.addAttribute("select", list);

       //studentlist是我的一个html文件 下面会贴出来我的前端界面与我的student实体类代码
        return "studentlist";
    }



}

student实体类这是用来临时存放redis数据的地方

/ * @author: sqxjj * @Project: JavaLaity * @Pcakage: com.gong.school_card.pojo.Student * @Date: 2022年09月11日 14:30 * @Description: */ @Data @AllArgsConstructor @NoArgsConstructor public class Student implements Serializable { //学生id @TableId(value = "studentid", type = IdType.AUTO) private Integer studentid; //学生姓名 private String name; //学生专业 private String magor; //学生性别 private Integer sex; //学生电话 private String phone; @TableLogic//逻辑删除注解 private Integer deleted; @Version //乐观锁version private Integer version; //字段填充内容 @TableField(fill = FieldFill.INSERT) @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") private Date createTime; @TableField(fill = FieldFill.INSERT_UPDATE) private Date updateTime; private String idcard; //多表查询 // private Card card; // private Record record; }

前端studentlist.html代码

讯享网<div class="container-fluid"> <div class="row"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <div class="table-responsive"> <table class="table table-striped table-sm"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>电话</th> <th>专业</th> <th>删除时间</th> </tr> </thead> <tbody> <tr th:each="item:${select}"> <td th:text="${item.getStudentid()}"></td> <td th:text="${item.getName()}"></td> <td th:text="${item.getSex()==0?'女':'男'}"></td> <td th:text="${item.getPhone()}"></td> <td th:text="${item.getMagor()}"></td> <td th:text="${item.getUpdateTime}"></td> <td> <a class="btn btn-sm btn-danger" th:href="@{/recession/}+${item.getStudentid()}" onclick="dd()">撤销删除</a> </td> </tr> </tbody> </table> </div> </main> </div> </div>

控制台日志

上述代码只能，仅可以实现简单的存取操作

控制台的查询缓存与数据库来自业务层，判断redis有无数据的代码没贴上 , 上面这个只是一个精简版，需要全部的代码请私聊