博主最近在做一个个人的博客网站,准备用 thymeleaf 实现一个动态加载一二级文章分类的功能,效果如下:
后台实体类代码如下:
/** * @author 曲健磊 * @date 2019-08-22 20:28:18 * @description 一级分类实体类 */ public class CateVO { /** * 一级分类id */ private Integer cate1Id; /** * 一级分类名称 */ private String cate1Name; /** * 该一级分类下的二级分类列表 */ private List<Cate2> cate2List; // 省略set get方法 } /** * @author 曲健磊 * @date 2019-08-15 20:18:44 * @description 二级分类实体类 */ public class Cate2 { /** * 二级分类id */ private Integer id; /** * 二级分类名称 */ private String cateName; }
Controller 层的代码如下:
@Controller @RequestMapping("/") public class IndexController { @Autowired private CateService cateService; /** * 我配置的项目端口号是:80 * 所以,当用户在浏览器上输入:127.0.0.1:80 或 127.0.0.1 时请求会进到这个方法里 */ @GetMapping("/") public String defaultWebPage(HttpServletRequest request){ // 1.模拟获取所有的一级分类以及每个一级分类下的所有二级分类 List<CateVO> allCateList = new ArrayList<CateVO>(); // 1.1.一级分类 CateVO cateVO1 = new CateVO(); cateVO1.setCate1Id(1); cateVO1.setCate1Name("大数据"); // 1.2.该一级分类下的二级分类列表 List<Cate2> cate2_1List = new ArrayList<Cate2>(); // 1.2.1.第一个二级分类 Cate2 cate2_1_1 = new Cate2(); cate2_1_1.setId(1); cate2_1_1.setCateName("Hadoop"); // 1.2.2.第二个二级分类 Cate2 cate2_1_2 = new Cate2(); cate2_1_2.setId(1); cate2_1_2.setCateName("Spark"); cate2_1List.add(cate2_1_1); cate2_1List.add(cate2_1_2); // 1.3.把所有的二级分类添加到该一级分类下 cateVO1.setCate2List(cate2_1List); // 1.4.把所有的一级分类放入列表中,多个的话以此类推(通常都是直接查数据库的) allCateList.add(cateVO1); // 2.将一级分类列表放入 request 域中。 request.setAttribute("cateList", allCateList); // 3.返回 index.html 页面 return "index"; } }
前台 html 的代码如下(简化):
<!DOCTYPE HTML> <!-- thymeleaf的引用 --> <html xmlns:th="http://www.thymeleaf.org"> <head> <!-- 引用的css,js --> </head> <!-- 页面主体 --> <body> <ul> <!-- 这一级是一级的分类 --> <li th:each="cate1:${cateList}"><a th:text="${cate1.cate1Name}"></a> <!-- 这是一级下的二级分类列表 --> <ul> <li th:each="cate2:${cate1.cate2List}"><a th:text="${cate2.cateName}"></a></li> </ul> </li> </ul> </body> </html>
内容版权声明:除非注明,否则皆为本站原创文章。