SpringBoot前端页面设置

最新推荐文章于 2024-07-01 20:00:05 发布

Amazing66

最新推荐文章于 2024-07-01 20:00:05 发布

阅读量4.3k

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/Amazing66/article/details/118912984

版权

SpringBoot 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

进行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>

侧边栏高亮

在这里插入图片描述

使用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";    }