Springboot2模块系列：thymeleaf（前后端结合）

最新推荐文章于 2023-03-12 19:02:26 发布

天然玩家

最新推荐文章于 2023-03-12 19:02:26 发布

阅读量283

点赞数 1

分类专栏： # Spring 文章标签：前端后端 springboot

本文链接：https://blog.csdn.net/Xin_101/article/details/103475527

版权

Spring 专栏收录该内容

100 篇文章 6 订阅

订阅专栏

1 pom.xml

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>

2 html,css路径配置

package com.sb.config;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.context.annotation.Configuration;

@Configuration 
public class ConfigurerAdapter implements WebMvcConfigurer{
    @Override 
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        registry.addResourceHandler("/**")
        .addResourceLocations("classpath:/resources/")
        .addResourceLocations("classpath:/static/")
        .addResourceLocations("classpath:/css");
    }
}

3 文件路径

css
resources/static/css
resources/static/css/peopleInfos.css

.infos{text-align: center;} 
.loginInfos{
    border: 2px solid #3f65b7;
    text-align: center;
    margin: auto;
}

html
resources/templates
resources/templates/sys/index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>测试websocket</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/static/css/peopleInfos.css}"/>
    <!-- <style>
      .infos table{border:2px solid #3f65b7}
    </style> -->
  </head>
  <body>
  <h2>Bazinga</h2>
  <div class="infos">
    <table class="loginInfos">
      <tr>
        <td>姓名</td>
        <td>密码</td>
      </tr>
      <tr>
        <td th:text="${loginInfos.username}"></td>
        <td th:text="${loginInfos.password}"></td>
      </tr>
      
    </table>
  </div>
  <div class="peopleInfos">
    <table border="4" align="center">
      <tr>
        <td>姓名</td>
        <td>地址</td>
      </tr>
      <tr th:each="i:${peopleInfos}">
        <td th:text="${i.name}"></td>
        <td th:text="${i.address}"></td>
      </tr>
    </table>
  </div> 
  </body>
</html>

4 控制器

package com.sb.controller;

import com.sb.po.PeopleInfos;
import com.sb.service.PeopleInfosService;
import java.util.Map;
import java.util.HashMap;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.stereotype.Controller;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@Controller
@RequestMapping("/api/ui")
public class UIController{
    @Autowired 
    private PeopleInfosService peopleInfosService;
    static Logger logger = LoggerFactory.getLogger(RedisOpController.class);
    @RequestMapping(value="/login", method=RequestMethod.GET)
    public String loginSys(){
        return "sys/login";
    }

    @RequestMapping(value="/index", method=RequestMethod.POST)
    public String indexSys(@RequestParam("userName") String username, @RequestParam("passWord") String password, Model model){
        Map<String, String> loginInfos = new HashMap();
        loginInfos.put("username", username);
        loginInfos.put("password", password);
        logger.info("username:{}, password:{}", username, password);
        model.addAttribute("loginInfos", loginInfos);
        model.addAttribute("peopleInfos", peopleInfosService.getAllPeopleInfos());
        return "sys/index";
    }
}

5 小结

序号	描述
1	渲染templates中的html需要使用插件:thymeleaf
2	拦截html及css文件需要配置拦截路径,实现WebMvcConfigurer方法
3	html引用css需要使用th:href="@{/static/css/peopleInfos.css}"
4	使用th需要使用xmlns:th=“http://www.thymeleaf.org”
5	后端数据传动到前端,使用model传递,html解析可直接通过点运算`.`获取数据,使用each遍历list
6	表格整体居中使用margin:auto