Springboot 系列 (1) - 在 Spring Boot 项目里使用 JSP/JSTL 模版和 JQuery+Bootstrap 静态资源

注：本系列文章以 Spring Boot 项目为主，开始阅读之前，读者应该已经掌握了 Java 基础知识、Web 基础知识、Spring 框架、Spring MVC 和 Spring Boot 基础知识。另外，本系列文章中的所有实例都是使用 IntelliJ IDEA + Apache Maven 配置和编译的，所以还需要对 IntelliJ IDEA 和 Apache Maven 有基本的了解。

Spring Boot 推荐使用 Thymeleaf 作为其默认视图模板引擎，对于习惯使用 JSP 的老手来说，放弃熟悉的 JSP，还是有点可惜。Spring 作为一个整合大师，可以通过配置来现实使用 JSP 模版。

本文将结合实例讲讲如何在 Spring Boot 项目里使用 JSP、JSTL、JQuery、Bootstrap。

Spring Boot： https://spring.io/projects/spring-boot/
JSP (Java Server Pages)： https://www.cnblogs.com/tkuang/p/16027760.html
JSTL (Java server pages standarded tag library，即JSP标准标签库): https://tomcat.apache.org/taglibs/standard/
JQuery: https://jquery.com/
Bootstrap: https://getbootstrap.com/

1. 开发环境

    Windows版本：Windows 10 Home (20H2)
    IntelliJ IDEA (https://www.jetbrains.com/idea/download/)：Community Edition for Windows 2020.1.4
    Apache Maven (https://maven.apache.org/)：3.8.1

    注：Spring 开发环境的搭建，可以参考 “ Spring基础知识（1）- Spring简介、Spring体系结构和开发环境配置 ”。

2. 创建 Spring Boot 项目

    1) 运行 IDEA 创建项目

        点击菜单 New 创建 Project：

        New Project -> Project Type: Maven -> Project SDK: 1.8 -> Check "Create from archtype" -> select "org.apache.maven.archtypes:maven-archtype-quickstart" -> Next

            Name: SpringbootExample
            GroupId: com.example
            ArtifactId: SpringbootExample

        -> Finish

    2) 生成的项目目录结构

        |-- src
        |   |-- main
        |   |     |-- java
        |   |       |-- com
        |   |            |-- example
        |   |                   |-- App.java
        |   |-- test
        |        |-- java
        |               |-- com
        |                    |-- example
        |                           |-- AppTest.java
        |-- pom.xml

    3) Spring Boot Web 配置

        参考 “ Springboot基础知识（08）- spring-boot-starter-web（Web启动器）” 的 “3. 配置 Spring Boot Web” 部分，完成 Spring Boot Web 配置。

        (1) 配置后的 pom.xml

 1             <?xml version="1.0" encoding="UTF-8"?>
 2 
 3             <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4                 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 5                 <modelVersion>4.0.0</modelVersion>
 6 
 7                 <groupId>com.example</groupId>
 8                 <artifactId>SpringbootExample</artifactId>
 9                 <version>1.0-SNAPSHOT</version>
10 
11                 <name>SpringbootExample</name>
12                 <!-- FIXME change it to the project's website -->
13                 <url>http://www.example.com</url>
14 
15                 <properties>
16                     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
17                     <maven.compiler.source>1.8</maven.compiler.source>
18                     <maven.compiler.target>1.8</maven.compiler.target>
19                 </properties>
20 
21                 <packaging>jar</packaging>
22 
23                 <parent>
24                     <groupId>org.springframework.boot</groupId>
25                     <artifactId>spring-boot-starter-parent</artifactId>
26                     <version>2.6.6</version>
27                     <relativePath/> <!-- lookup parent from repository -->
28                 </parent>
29 
30                 <dependencies>
31                     <dependency>
32                         <groupId>junit</groupId>
33                         <artifactId>junit</artifactId>
34                         <version>4.11</version>
35                         <scope>test</scope>
36                     </dependency>
37                     <dependency>
38                         <groupId>org.springframework.boot</groupId>
39                         <artifactId>spring-boot-starter-web</artifactId>
40                     </dependency>
41                     <!-- 打包 war 时，要把tomcat依赖注释掉 -->
42                     <dependency>
43                         <groupId>org.springframework.boot</groupId>
44                         <artifactId>spring-boot-starter-tomcat</artifactId>
45                         <scope>provided</scope>
46                     </dependency>
47                     <dependency>
48                         <groupId>org.springframework.boot</groupId>
49                         <artifactId>spring-boot-starter-test</artifactId>
50                         <scope>test</scope>
51                     </dependency>
52                 </dependencies>
53 
54                 <build>
55                     ...
56                 </build>
57             </project>

　　　　在IDE中项目列表 -> SpringbootExample -> 点击鼠标右键 -> Maven -> Reload Project

(2) 修改 src/main/java/com/example/App.java 文件

 1             package com.example;
 2 
 3             import org.springframework.boot.SpringApplication;
 4             import org.springframework.boot.autoconfigure.SpringBootApplication;
 5 
 6             @SpringBootApplication
 7             public class App {
 8                 public static void main(String[] args) {
 9                     SpringApplication.run(App.class, args);
10                     System.out.println("Spring boot example project");
11                 }
12             }

(3) 创建 src/main/java/com/example/ServletInitializer.java 文件

 1             package com.example;
 2 
 3             import org.springframework.boot.builder.SpringApplicationBuilder;
 4             import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
 5 
 6             public class ServletInitializer extends SpringBootServletInitializer {
 7 
 8                 @Override
 9                 protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
10                     return application.sources(App.class);
11                 }
12 
13             }

(4) 创建 src/main/java/com/example/controller/IndexController.java 文件

 1             package com.example.controller;
 2 
 3             import org.springframework.stereotype.Controller;
 4             import org.springframework.web.bind.annotation.RequestMapping;
 5             import org.springframework.web.bind.annotation.ResponseBody;
 6 
 7             @Controller
 8             public class IndexController {
 9                 @ResponseBody
10                 @RequestMapping("/test")
11                 public String test() {
12                     return "Test Page";
13                 }
14             }

(5) 创建 src/main/resources/application.properties 文件

1             spring.main.banner-mode=off
2 
3             # Web server
4             server.display-name=SpringbootExample-Test
5             server.address=localhost
6             server.port=9090

        (6) 运行

            Edit Configurations

                Click "+" add new configuration -> Select "Maven"

                    Command line: clean spring-boot:run
                    Name: SpringbootExample [clean,spring-boot:run]

                -> Apply / OK

            Click Run "SpringbootExample [clean,spring-boot:run]"

                ...

                Spring boot example project

            访问 http://localhost:9090/test

                Test Page

3. 导入 Servlet、JSP、JSTL 依赖包

访问 http://www.mvnrepository.com/，查询 Servlet、JSP、JSTL

修改 pom.xml：

 1         <project ... >
 2 
 3             <dependencies>
 4                 ...
 5 
 6                 <!-- 引入Spring Boot 内嵌 Tomcat 对 JSP 的解析所需的依赖包 --> 
 7                 <dependency> 
 8                     <groupId>org.apache.tomcat.embed</groupId> 
 9                     <artifactId>tomcat-embed-jasper</artifactId> 
10                 </dependency>
11 
12                 <!-- Servlet 依赖的两个包 --> 
13                 <dependency>
14                     <groupId>javax.servlet</groupId>
15                     <artifactId>javax.servlet-api</artifactId>
16                 </dependency>
17                 <dependency> 
18                     <groupId>javax.servlet.jsp</groupId> 
19                     <artifactId>javax.servlet.jsp-api</artifactId> 
20                 </dependency> 
21 
22                 <!-- JSTL 依赖包 --> 
23                 <dependency> 
24                     <groupId>javax.servlet</groupId> 
25                     <artifactId>jstl</artifactId> 
26                 </dependency> 
27      
28                 ...
29             </dependencies>
30 
31         </project>

在IDE中项目列表 -> SpringbootExample -> 点击鼠标右键 -> Maven -> Reload Project

4. 配置 JSP/JSTL 模版

1) 在 pom.xml 的 Build 里添加 <resource> 配置

 1         <project ... >
 2             ...
 3 
 4             <build>
 5                 <resources>
 6                     <resource>
 7                         <directory>src/main/webapp</directory>
 8                         <targetPath>META-INF/resources</targetPath>
 9                         <includes>
10                             <include>**/*.*</include>
11                         </includes>
12                     </resource>
13                     <resource>
14                         <directory>src/main/resources</directory>
15                         <includes>
16                         <include>**/*.*</include>
17                         </includes>
18                     </resource>
19                 </resources>
20                 
21                 ...
22             </build>
23         </project>

        注：源文件位置 src/main/webapp，指定编译到 META-INF/resources，指定要把哪些文件编译进去，** 表示 webapp 目录及子目录，*.* 表示所有文件。

    2) 创建 src/main/resources/application.properties 文件

        # 配置 SpringMVC 视图解析器
        spring.mvc.view.prefix=/WEB-INF/jsp/
        spring.mvc.view.suffix=.jsp

注：其中：/WEB-INF/jsp/ 表示为 src/main/webapp/WEB-INF/jsp/ 目录，在 /WEB-INF/ 目录下的 JSP 模板文件处于保护状态，即禁止通过 http 链接直接访问模板文件。

3) 创建 src/main/webapp/WEB-INF/jsp/demo.jsp 文件

 1         <%@ page contentType="text/html;charset=UTF-8" language="java"%>
 2         <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 3         <html>
 4         <head>
 5             <title>Demo</title>
 6         </head>
 7         <body>
 8             <h4>Demo Page</h4>
 9 
10             <c:if test="${not empty msg}">
11                 <p>Message: ${msg}</p>
12             </c:if>
13 
14         </body>
15         </html>

        注：使用 taglib 导入 JSTL core 库。

    4) 修改 src/main/java/com/example/controller/IndexController.java 文件

 1             package com.example.controller;
 2 
 3             import org.springframework.ui.Model;
 4             import org.springframework.stereotype.Controller;
 5             import org.springframework.web.bind.annotation.RequestMapping;
 6             import org.springframework.web.bind.annotation.ResponseBody;
 7 
 8             @Controller
 9             public class IndexController {
10  
11                 @ResponseBody
12                 @RequestMapping("/test")
13                 public String test() {
14                     return "Test Page";
15                 }
16 
17                 @RequestMapping("/demo")
18                 public String demo(Model model) {
19                     model.addAttribute("msg", "Spring Boot 集成 JSP 模板");
20                     return "demo";
21                 }
22 
23             }

    访问：http://localhost:9090/demo

        Demo Page

        Message: Spring Boot 集成 JSP 模板

5. 配置静态资源(jQuery, Bootstrap)

 1         <%@ page contentType="text/html;charset=UTF-8" language="java"%>
 2         <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 3         <html>
 4         <head>
 5             <title>Demo</title>
 6             <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap-4.2.1-dist/css/bootstrap.min.css">
 7             <script language="javascript" src="${pageContext.request.contextPath}/lib/jquery/jquery-3.6.0.min.js"></script>
 8             <script language="javascript" src="${pageContext.request.contextPath}/lib/bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
 9         </head>
10         <body>
11             <h4>Demo Page</h4>
12 
13             <c:if test="${not empty msg}">
14                 <div class="alert alert-info" role="alert">Message: ${msg}</div>
15             </c:if>
16             
17             <div class="alert alert-success" role="alert" id="message"></div>
18 
19             <script type="text/javascript">
20                 $(document).ready(function(){
21                     console.log("jQuery is running");
22 
23                     $("#message").html("jQuery is running");
24                 });
25             </script>
26         </body>
27         </html>

        注：console.log() 输出信息，可以在浏览器上按 F12 键查看，${pageContext.request.contextPath} 是取得当前站点的 http 根路径。

    访问：http://localhost:9090/demo

        Demo Page

        Message: Spring Boot 集成 JSP 模板

        jQuery is running

6. 使用 spring-boot-maven-plugin 插件运行打包

1) 修改 pom.xml

 1         <project ... >
 2             ...
 3 
 4             <build>
 5                 <finalName>SpringbootExample</finalName>
 6                 <plugins>
 7                     <plugin>
 8                         <groupId>org.springframework.boot</groupId>
 9                         <artifactId>spring-boot-maven-plugin</artifactId>
10                         <configuration>
11                             <mainClass>com.example.App</mainClass>
12                             <layout>JAR</layout>
13                         </configuration>
14                         <executions>
15                         <execution>
16                             <goals>
17                             <goal>repackage</goal>
18                             </goals>
19                         </execution>
20                         </executions>
21                     </plugin>
22                 </plugins>
23                 ...
24             </build>
25         </project>

        layout 属性用来指定打成 jar 还是 war 文件，可用的值包括：ZIP 、JAR 、WAR、 NONE

        在IDE中项目列表 -> SpringbootExample -> 点击鼠标右键 -> Maven -> Reload Project

    2) 打包 jar

        菜单 View -> Tool Windows -> Maven -> SpringbootExample -> Lifecycle -> Clean & Package

        jar 包生成在目录 target/ 里

            SpringbootExample.jar
            SpringbootExample.jar.original

        注：SpringbootExample.jar 包含依赖包，可以直接运行。 SpringbootExample.jar.original 里不包含依赖的包（要手动配置依赖环境），运行前要把文件名上的 “.original” 去掉。

        点击 IDEA 底部 Terminal 标签页，执行如下命令。

        $ java -jar target/SpringbootExample.jar

            ...

            Spring boot example project

        访问 http://localhost:9090/test

            Test Page

    3) 打包 war

        把 pom.xml 里 <packaging>jar</packaging> 改成 <packaging>war</packaging>, spring-boot-maven-plugin 的 layout 属性改成 WAR，并把 spring-boot-starter-tomcat 依赖注释掉。

        菜单 View -> Tool Windows -> Maven -> SpringbootExample -> Lifecycle -> Clean & Package

        war 包生成在目录 target/ 里

            SpringbootExample.war
            SpringbootExample.war.original

        把 SpringbootExample.war 放到独立运行的 Tomcat 的 webapp 目录下，假设 Tomcat 运行在 8080 端口。

        访问 http://localhost:8080/SpringbootExample/Test

            Test Page

7. Springboot 相关的网站

    Spring：https://spring.io/
    Spring Initializr： https://start.spring.io/

    Maven：https://maven.apache.org/
    Maven Repository：https://mvnrepository.com/

    Java Standard Edition 8 API：https://docs.oracle.com/javase/8/docs/api/
    Tomcat：https://tomcat.apache.org/
    JMeter：https://jmeter.apache.org/

--------------------------------------

示例代码：https://gitee.com/slksm/public-codes/tree/master/demos/springboot-series/SpringbootExample

posted @ 2022-04-24 20:46 垄山小站阅读(1530) 评论(0) 收藏举报

刷新页面返回顶部