当前位置：首页 > news >正文

springboot访问静态页面，并加载css、js样式

news 来源：原创 2024/5/3 4:28:56

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>