springboot accesses static pages and loads css and js styles

1. Add thyme leaf template dependency

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

2. Put the static resources into the corresponding directory of spring boot. Generally, static resources are placed, and templates are placed in html pages.

3. Add a controller so that the page can be accessed through the address bar after the service is started.

Note here: If any of the following items are incorrect, it will run abnormally

1. Must be annotated with @Controller, not @Restcontroller;

2. Because it is accessed through the address bar, the @GetMapping annotation is used. The content after the annotation can be written freely. The address when accessing is: "http:// localhost:8080/The content after GetMapping written by myself "

3. The string filled in return " " must be the name of the html page you put in the templates.


@Controller
public class LoginController {

//  跳转登录页面
    @GetMapping("/index")
    public String login ()  {
//        response.sendRedirect("index");
//        response.sendRedirect("index.html");
//        return "../resources/templates/index.html";

          return "index";
    }

4. Add configuration classes, load css and js styles, and refer to the introduction of css and js in other methods

package com.example.springboot.config;


import org.aopalliance.intercept.Interceptor;
import org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class WebConfig extends WebMvcAutoConfiguration implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry){
//        registry.addInterceptor( new LoginInterceptor()).addPathPatterns("/adimin/**");


    }

    //加载静态页面的css和js文件
    //参考链接：https://blog.51cto.com/u_15236724/5369362
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }

}

5. Modify the relative path of the imported static resource on the html page:

Although the content idea in href or src will be identified as unknown, but the address is no problem.

in idea

src="/js/jquery.min.js" is the address src="/static/js/jquery.min.js"

If /static is added, resources cannot be loaded.

For more style loading methods, please refer to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册登录界面Ⅱ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/login.css">
    <!-- login1.css 渐变纯色背景
    <link rel="stlesheet" href="./css/login1.css"> -->
    <!-- prefixfree 省去浏览器适应前缀 -->

<script src="/js/prefixfree.min.js"></script>
</head>
<body>
<div class="container">
  <div class="welcome">
    <div class="pinkbox">
      <!-- 注册 -->
      <div class="signup nodisplay">
        <h1>Register</h1>
        <form id="regi" autocomplete="off">
          <input type="text" placeholder="用户名" v-model="username">
          <input type="email" placeholder="手机号" v-model="phoneNum">
          <input type="email" placeholder="邮箱" v-model="email">
          <input type="password" placeholder="密码"  v-model="password">
          <input type="password" placeholder="确认密码" v-model="confirmPassword">
          <button type="submit" class="button register" @click="signup()">注册</button>
        </form>
      </div>

      <!-- 登录 -->
      <div class="signin">
        <h1>Sign In</h1>
        <form id="login_inf" class="more-padding" autocomplete="off">
          <input type="text" placeholder="手机号或邮箱"  v-model="phoneNum" id="phoneNum">
          <input type="password" placeholder="密码"  v-model="password" id="password">
          
          <div class="identity">
            <input type="text" placeholder="验证码" v-model="identityNum" id="identityNum">
            <button type="button" class=" button">sent</button>
          </div>
          
          <div class="checkbox">
            <input type="checkbox" id="remember" /><label for="remember">记住密码</label>
          </div>
          <button type="submit" class="buttom sumbit" @click="login()">登录</button>
        </form>
      </div>
    </div>

    <div class="leftbox">
      <h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
      <p class="desc">Pick your perfect <span>bouquet</span></p>
      <img class="flower smaller" src="/img/login1.png" alt="picture" />
      <p class="account">Have an account?</p>
      <button class="button" id="signin">Login</button>
    </div>

    <div class="rightbox">
      <h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
      <p class="desc">Pick your perfect <span>bouquet</span></p>
      <img class="flower" src="/img/login2.png"  alt="picture"/>
      <p class="account">Don't have an account?</p>
      <button class="button" id="signup">Sign Up</button>
    </div>
  </div>
</div>   

<!-- partial -->
  <script src="/js/vue.js" type="text/javascript"></script>
  <script src="/js/jquery.min.js" type="text/javascript"></script>
  <script src="/js/axios.min.js" type="text/javascript"></script>
  <script src="/js/login-script.js" type="text/javascript"></script>  <!--样式动态js引入-->

</body>
</html>