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页面的名字。
@Controller
public 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.*;
@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、在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>