进行css等静态资源加载的时候 需要由thymeleaf来接管 所以要在每个html文件中引入thymeleaf的命名空间

因为引用css样式是一个url连接 所以用@{}来对url进行取值

<link th:href="@{/css/bootstrap.min.css}"

必要的时候 可以清除一下thymeleaf的缓存

spring.thymeleaf.cache=false
  • 设置首页
  • 可以通过创建controller类 然后返回到index.html
  • 可以创建在java类路径下创建config目录 创建myconfig类 实现WebMvcconfig接口 重写接口的方法来定制首页的url
@Configuration
public class Myconfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
    }
}
第一个括号填定制的url定制 第二个括号填 定制的页面
  • 默认情况下 只要类路径下由index.html,视图解析器就会自动加载为首页

使用th:if 判断返回的消息是否显示

<!--判断msg是不是为空  空的话 就不用显示-->
<span  style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" ></span>

登录拦截器的设置

在java类路径下的config包下创建Interecptor类 继承HandlerInterceptor接口 重写public boolean preHandle(xxxx)方法

public class Interceptor  implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("user");
        if (user == null){
            request.setAttribute("msg","权限不足");
            response.sendRedirect("");
            return false;
        }else {
        return true;
        }

    }
}

然后在config下的Myconfig配置类中注册它

@Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new Interceptor()).addPathPatterns("/**").excludePathPatterns("/index.html","/","/login","/css/**","/js/**","/img/**");
    }

addPathPatterns:拦截哪些路径下的请求

excludePathPatterns:除了哪些路径下的请求

展示用户列表

工共部分提取

  • 首先 将页面的公共部分提出(基本上就是导航栏和侧边栏) 以实现代码的复用

找到公共部分 使用==th:fragment=“xxxx”==标签 进行标记 xxxx即自定义名称 ,尽量是见名知意

<nav class="col-md-2 d-none d-md-block bg-light sidebar"  th:fragment="sidebar">  侧边栏
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> //导航栏

注意:提出时 将


标签折叠 以免提出时 内容有出入

  • 将提出的页面 存放在一个新的html文件中 以便使用
  • 在需要使用的地方(一般都是和提取代码重复的地方)插入

使用==th:replace="~{comments::sidebar}“==标签 进行公共部分的替换

<div th:replace="~{comments::sidebar}"></div>

注意:使用==~==符号来进行取值 {文件夹的路径::fragment标签的名字}

展示用户

  • 将后台的信息传入 使用th:each标签进行遍历
th:each="emp:${emps}"

emp:遍历后每一项的名字 emps:后端传的集合名字

  • 判断输出
    如果有需要判断输出的内容 使用三目运算符
<td th:text="${emp.getGender()==0?'男':'女'}"></td>

取出的值等于0 结果是男 否则是女

  • 日期格式转换
    使用#data.formate()工具类
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}"></td>
  • 侧边栏高亮

springboot在后台怎么修改 前端传来的double类型为空_侧边栏

使用active属性 实现侧边栏高亮显示

思考?如何在我们点哪一个的时候哪一个高亮

  • 在每一个公共部分替换的标签中 传递一个参数==(active=‘xxx’)==
<div th:replace="~{comments::topbar(active='list')}"></div>

注意:使用单引号

  • 在存放公共部分的页面中 进行三目运算的判断
<a th:class="${active=='main'?'nav-link active':'nav-link'}"></a><a th:class="${active=='list'?'nav-link active':'nav-link'}" ></a>

这样的话 当我们点击哪个页面 那个页面就会实现高亮显示

新增用户

  • 找一个form表单 将用户列表页复制 并将其中的内容换成from表单
  • springboot默认的日期格式是:yyyy/MM/dd
  • 如果想要切换格式为:yyyy-MM-dd 需要在配置文件中设置
spring.mvc.format.date=yyyy-MM-dd

修改用户

与新增用户功能共用一个页面 当我们点击编辑按钮时 会跳到修改页面 并携带这个修改用户的id

<a th:href="@{/toupdate/{id}(id=${emp.getId()})}">    <button class="btn btn-sm btn-primary" >编辑</button></a>

前面是restful风格的传参 后面括号里是表明id的值

然后编写controller 接收参数 并跳转 @PathVariable这个注解是来表明restful风格传的参数 就是这个参数

@GetMapping("/toupdate/{id}")    public  String toupdate(@PathVariable("id") Integer id,Model model){        Employee employee = employeeDao.getEmployee(id);        model.addAttribute("emp",employee);        Collection<Department> departments = departmentDao.getDepartments();        model.addAttribute("dept",departments);        return "update";

将修改页面默认显示的值改成这个用户的值

th:value="${emp.getLastName()}"

对应的框填入对应的emp.getxxx()

th:value="${emp.getEmail()}"th:value="${emp.getGender()=='0'}"th:value="${emp.getGender()=='1'}"部门框比较特殊 需要显示的应该是这个人部门编号对应的部门名称th:selected="${emp.getDepartment().getId()==department.getId()}"日期格式也需要进行调整 springboot默认的格式是yyyy/MM/ddth:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd')}"

删除功能

删除功能不需要新的页面 在本来的页面即可完成

思路:前台传参 后台接受 然后执行删除操作后 跳转到新的页面

th:href="@{/delete/{id}(id=${emp.getId()})}"
@GetMapping("/delete/{id}")    public String delete(@PathVariable("id") Integer id){        employeeDao.detelById(id);        return "redirect:/emps";    }

错误页面

404 500 这些错误页面 我们只需要在temleate路径下 创建error文件 将文件名为404 和500的页面放进去即可。