1、添加thyme leaf模板依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
2、将静态资源分别放入spring boot相应目录下，一般static放资源，templates放html页面
3、添加controller，使页面可以在服务启动后通过地址栏访问，
这里注意：下面任意一项不对都会运行异常
1、一定要用@Controller注解，不能用@Restcontroller；
2、因为是通过地址栏访问，所以使用@GetMapping注解，注解后的内容可随意写，访问时的地址就是：“http://localhost:8080/自己写的GetMapping后的内容”
3、return“ ”里面填的字符串一定要是自己放入templates里的html页面的名字。
@Controllerpublic class LoginController {// 跳转登录页面@GetMapping("/index")public String login () {// response.sendRedirect("index");// response.sendRedirect("index.html");// return "../resources/templates/index.html";return "index";}
4、添加配置类，加载css和js样式，其他方法的css，js引入可参考
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.*;@Configurationpublic class WebConfig extends WebMvcAutoConfiguration implements WebMvcConfigurer {@Overridepublic void addInterceptors(InterceptorRegistry registry){// registry.addInterceptor( new LoginInterceptor()).addPathPatterns("/adimin/**");}//加载静态页面的css和js文件//参考链接：/u_15236724/5369362@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}}
5、在html页面修改引入的静态资源的相对路径：
虽然href或src内的内容idea会标识不认识，但地址是没有问题。
在idea里
src="/js/jquery.min.js"也就是地址src="/static/js/jquery.min.js"
如果加了/static反而无法加载资源。
需要更多的样式加载方式可参考
<!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>
