后端需要掌握的前端细节（我愿称为小前端）

后端需要掌握的前端细节（我愿称为小前端）

1. SpringBoot对静态资源的管理

在WebMvcAutoConfiguration类中寻找addResourceHandlers方法(SpringBoot2.7.0)

public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");//有自动配置，则走这条路径
    } else {
        this.addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");//webjars的方法获取（一般不用）
        
        this.addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
            registration.addResourceLocations(this.resourceProperties.getStaticLocations());
            if (this.servletContext != null) {
                ServletContextResource resource = new ServletContextResource(this.servletContext, "/");
                registration.addResourceLocations(new Resource[]{resource});
            }
        });
    }
}

在WebProperties中可以看到路径

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = new String[]{"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"};

即在这些目录下的资源会被映射到/**下->在resource/public中的1.js资源可以直接通过localhost:8080/1.js访问

同名情况下，靠前的先识别。

需要注意的是：如果在yml中配置了响应的路径，会修改原配置，这部分内容留个坑。（自动配置部分代码）

// todo

 servlet:
    context-path: /api   #  会修改静态资源配置

webjar:通过maven的方式引入jquery(不用)

localhost:8080/webjars/1.js

首页定制

index.html可以放到上方资源目录直接访问localhost:8080到首页

2. Thymeleaf模板殷切

  1. 引入：

    在2.7 的 SpringBoot项目中直接引入：

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

  2. 查看

        public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";

  3. 后端使用：

    @Controller
//thymeleaf实现路由不要用RestController
public class TestController {
    
    @GetMapping("test")
    public String Test(){
        return "test";
    }//thymeleaf
}

  4. 前端使用：

    1. 命名空间
    <html lang="en" xmlns:th="http://www.thymeleaf.org" 
				xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    1. 常用标签

    image-20221112223956911

  5. 基本用法：

```html
<input id="sex" type="text" th:value="${sex}"/>

<p><span th:text="${sex}"></span></p>

<a><span th:text="${msg}"></span></a>

<a th:href="@{'/news/newdetails/'+${news.newsId}}">测试</a>

<div th:each="user:${users}" th:text="${user}"></div>

<span th:text="${sex eq 0} ? '男' : '女'">性别</span>

<div th:switch="${name}">
  <div th:case="'zs'">
      //TODO 代码块
  </div>
  <div th:case="'ls'">
      //TODO 代码块
  </div>
</div>

```

补充一个小细节：
IDEA无法格式化json字符串
网传Sava Action没啥屁用，是因为IDEA没有识别.json文件，所以不能用Ctrl+Alt+L来直接格式化，识别后文件图标下方应该带有{}，如图image-20221112233948078

只需要在Setting中按添加如下设置，具体为什么IDEA没有这个配置，我也母鸡呀。

image-20221112234145786

​

posted @ 2022-11-14 23:51  volta_lemmon  阅读(65)  评论(0)    收藏  举报