一、创建Web项目
在项目的pox.xml中,引入spring-boot-starter-web
依赖。
<!--web相关依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency></pre>
二、引入静态资源
项目结构
项目结构.png对于代码类,项目类路径classpath:/ = src\main\java\
对于静态资源,项目类路径classpath:/ = src\main\resources\
1.通过pom.xml依赖配置形式引入框架资源(Bootstrap.js)
webjars:表示以jar包的方式引入静态资源。
到webjars官网查找所需引入的静态资源及版本号,拷贝对应的<dependency>标签的内容到本项目的 pom.xml文件中进行引入,maven自动下载对应的jar包。
应用场景:常规的主流的前端框架。
资源访问方式: http://localhost/webjars/ = classpath:/META-INF/resources/webjars/
2.在系统默认的静态资源路径下加入自定义的静态资源(html、css 、js)
SpringBoot默认在检索完所有的Controller的@RequestMapping("/……")
后,如果都找不到映射处理,则默认会去以下路径寻找静态资源进行匹配:
- classpath:/META-INF/resources/
- classpath:/resources/
- classpath:/static/
- classpath:/public/
- /:当前项目的根目录下
应用场景: 自定义的静态资源。
资源访问方式: http://localhost/ = classpath:/resources/
拓展:自定义静态资源目录的路径:
找到项目配置文件\src\main\resources\application.properties,通过属性spring.resources.static-locations进行设置,将会覆盖以上默认的静态资源路径。
例如:spring.resources.static-locations = classpath:/private/,classpath:/public/
(备注:spring.resources.static-locations 属性实质是一个数组,若要配置多个路径,使用
,
号分割。)
3.为项目设置欢迎页index.html
在resources的static目录下新建index.html作为项目的欢迎入口(当用户访问根目录时,自动跳转到此index.html页面)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎访问本系统!</h1>
</body>
</html>
4.为项目设置自定义的叶签图标favicon.ico
SpringBoot默认在所有静态资源下查找favicon.ico
文件,若找到则自动替换。
三、使用模板引擎把前端页面融合到项目
由于SpringBoot项目是内置Tomcat,并且项目最终会编译打包成jar包形式运行,因此对JSP支持并不友好。SpringBoot项目更推荐使用模板引擎的方式进行页面开发。
Web开发中的模板引擎是为了使[用户界面]与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
分类:主流的有三种类型,分别为:“置换型”模板引擎 、“解释型”模板引擎和“编译型”模板引擎。
模板引擎原理图.jpg1.引入Thymeleaf依赖
在项目的pox.xml中,引入spring-boot-starter-Thymeleaf
依赖。
<!--web:thymeleaf模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--若要使用Thymeleaf3.0版本,则需要在<properties>中追加设置Thymeleaf版本号和Thymeleaf布局组件支持程序的版本号 -->
<properties>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf.layout-dialect.version>2.1.1</thymeleaf.layout-dialect.version>
</properties>
2.把静态资源引入到项目中
使用Thymeleaf模板引擎后,默认有如下设置:
-
模板文件的编码格式:UTF-8
-
模板文件的格式类型:text/html
-
模板文件的默认路径:classpath:/templates/
-
模板文件的默认后缀:.html
如果要修改Thymeleaf的配置,可以修改项目的配置文件application.properties
# Enable template caching. spring.thymeleaf.cache=true # Check that the templates location exists. spring.thymeleaf.check-template-location=true # Content-Type value. spring.thymeleaf.servlet.content-type=text/html # Enable MVC Thymeleaf view resolution. spring.thymeleaf.enabled=true # Template encoding. spring.thymeleaf.encoding=UTF-8 # Comma-separated list of view names that should be excluded from resolution. spring.thymeleaf.excluded-view-names= # Template mode to be applied to templates. See also StandardTemplateModeHandlers. spring.thymeleaf.mode=HTML # Prefix that gets prepended to view names when building a URL. spring.thymeleaf.prefix=classpath:/templates/ # Suffix that gets appended to view names when building a URL. spring.thymeleaf.suffix=.html
因此,我们只需把前端开发好的页面及相关静态资源拷贝到resources\templates\
目录下即可,页面内容将由Thymeleaf模板引擎自动渲染,生成最终的.html。
注意:
resources\resources\
和resources\templates\
下虽然都是放html文件,但是它们之间有本质区别。
resources\resources\
下放的是静态资源,用于<mark style="box-sizing: border-box; background: rgb(255, 255, 0); color: rgb(0, 0, 0);">Request直接访问使用</mark>;
resources\templates\
下放的是模板文件,<mark style="box-sizing: border-box; background: rgb(255, 255, 0); color: rgb(0, 0, 0);">只有Controller能访问</mark>。
例如:登录成功后跳转login_sucess.html
在resources\templates\
目录下新建login_sucess.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org"用于告诉编辑器,追加thymeleaf语法提示! -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
恭喜,您登录成功!
</body>
</html>
3.控制器中增加直接访问的路由
为了方便测试,我们先直接在UserController控制器中增加路由请求处理,使得我们通过路由地址直接就能访问到·登录成功页面·。
import org.springframework.stereotype.Controller;
@Controller
public class UserController {
@Autowired
private IUserService userService;
@RequestMapping("/user/login_sucess")
public String login_sucess(){
return "login_sucess";
}
}
测试:访问http://localhost/user/login_sucess ,查看是否返回login_sucess.html页面内容。
网友评论