Spring Boot入门 (十九) 之 CURD实验员工列表的公共页抽取以及公共代码的抽取

最新推荐文章于 2022-07-21 20:30:04 发布

一口木桶饭

最新推荐文章于 2022-07-21 20:30:04 发布

阅读量248

点赞数

分类专栏： spring boot 文章标签： spring boot

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104939137

版权

spring boot 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

1.员工列表页

前边我们实现了登录功能,并且登陆进去进去了后台管理页面
下面我们要实现的是,点击Customers就出来员工列表也就是list.html
在这里插入图片描述

我们先找到Customers的位置,并把他的href跳转改了

由于我们使用的是restfulCURD,所以可以这么写

记得在HTML里边写上thymeleaf的约束头

下边我们要写controller来实现路由
我们先把list.html放到emps包里边方便管理
在这里插入图片描述
然后新建EmployeeController.java类,

package com.zhanshen.springbootweb.controller;


import com.zhanshen.springbootweb.dao.EmployeeDao;
import com.zhanshen.springbootweb.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Collection;

@Controller
public class EmployeeController {

    /**
     * 这个是员工的Dao层,查询所有员工,之前的代码我们引入了,里边有查询的方法
     */
    @Autowired
    EmployeeDao employeeDao;

    //查询所有员工
    @GetMapping("/emps")
    public String list(Model model) {

        /**
         * 查询得到所有的员工,然后传入Model ,用于把查询得到的查询所有的数据放到请求域中,最后返回到list.html里边
         */
        Collection<Employee> employees = employeeDao.getAll();

        model.addAttribute("emps", employees);
        return "emps/list";
    }
}

这样就可以跳转到list页面
在这里插入图片描述

2.公共代码片段的抽取

我们会发现list的侧导航栏和头部导航栏的内容是一样的,所以我们可以让他们去共用一套代码
在这里插入图片描述这里的头部和侧栏都是公用的,我们找到他们的代码
,先来看头部的栏目
代码是body里边的一个叫做<nav>标签的导航栏

通过th:fragment="xxx"可以把它作为公共的模板,然后我们在其他地方引入

利用th:insert"~{模板名 :: 模块名}"来引入
在这里插入图片描述
会发现,我们的div里边就是我们引入的模块
当然我们发现,我们在原来的nav标签上边又套了一层div这并不是很友好,所以我们还有其他的两种写法,这三种写法分别如下

th:insert"~{模板名:: 模块名}"
th:replace"~{模板名:: 模块名}"
th:include"~{模板名:: 模块名}"
第一个的用法我们看到了就是在你所写的标签里边插入,这样会多出一层标签,下面两个用法如下

<footer th:fragment="copy">
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<body>
...
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body>

我们比较效果如下

<body>
...
<div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>
</body>

发现第二个是我们想要的,把他所在的标签做替换,第三个则是把要包含的标签去掉,取里边的内容
于是我们换成第二个就好了
在这里插入图片描述
这样nav就引入进来了
我们也把左侧的导航栏引入进来

除了用th:fragment外我们还可以直接用选择器,如下:

设置id为leftbar
然后
这样既可

一口木桶饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot入门 (十九) 之 CURD实验员工列表的公共页抽取以及公共代码的抽取

1.员工列表页前边我们实现了登录功能,并且登陆进去进去了后台管理页面下面我们要实现的是,点击Customers就出来员工列表也就是list.html我们先找到Customers的位置,并把他的href跳转改了由于我们使用的是restfulCURD,所以可以这么写记得在HTML里边写上thymeleaf的约束头下边我们要写controller来实现路由我们先把list.htm...
复制链接

扫一扫