springboot-项目实战:首页实现
1 在config层添加mvc配置类,并重写视图控制方法
addViewControllers方法中的内容代表 当请求是 "/" 或者是 "/index.html" 时跳转到 index.html 页面
MyMvcConfig.java
package com.lv.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("index"); registry.addViewController("/index.html").setViewName("index"); } }
2 修改index.html
修改两部分,一个是添加thymeleaf约束,另一个是将原来引入样式链接的语法改为thymeleaf语法
index.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Signin Template for Bootstrap</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <link th:href="@{/css/signin.css}" rel="stylesheet"> </head> <body class="text-center"> <form class="form-signin" action="dashboard.html"> <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> <label class="sr-only">Username</label> <input type="text" class="form-control" placeholder="Username" required="" autofocus=""> <label class="sr-only">Password</label> <input type="password" class="form-control" placeholder="Password" required=""> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <p class="mt-5 mb-3 text-muted">© 2017-2018</p> <a class="btn btn-sm">中文</a> <a class="btn btn-sm">English</a> </form> </body> </html>
3 启动项目,访问首页
成功显示主页,这个项目使用的是3.6.4版本的springboot,如果是旧版本,可能会显示失败,需要在application.properties中关闭thymeleaf缓存
application.properties
#关闭模板引擎的缓存 spring.thymeleaf.cache=false
4 修改其它的html页面
所有页面的静态资源都需要使用thymeleaf接管,所以其它页面也要修改,同样是修改两部分,添加thymeleaf约束和将原来引入样式链接的语法改为thymeleaf语法.下面只展示修改位置的代码,没有展示全部页面代码
404.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dashboard Template for Bootstrap</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <link th:href="@{/css/dashboard.css}" rel="stylesheet">
dashboard.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dashboard Template for Bootstrap</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <link th:href="@{/css/dashboard.css}" rel="stylesheet">
list.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Dashboard Template for Bootstrap</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> <link th:href="@{/css/dashboard.css}" rel="stylesheet">
5 修改项目的目录
因为thymeleaf语法中的 @{} 是万能匹配的,所以即便我们修改了项目的目录也可以成功导入,下面测试一下:
application.properties
#修改项目的目录 server.servlet.context-path=/lv
重启项目访问
访问 http://localhost:8080/lv/ 路径依旧可以显示样式,访问原来的路径会报404.
6 总结
- 所有静态资源都需要使用thymeleaf接管
- url 使用 @{}
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术