①创建一个新的Maven Web 项目,命名为SpringBoot_jsptest

SpringBoot添加JSP支持_springboot

SpringBoot添加JSP支持_springboot_02

建成之后会如上图所示,报错是因为没有加入jsp的支持。

② 按照Maven规范,在src/main/下新建一个名为resource的文件夹,并在下面新建static以及templates文件夹

修改pom.xml文件:

        1、在url标签后面加入parent元素:

 

<!--   
 spring-boot-starter-parent是Spring Boot的核心启动器,
 包含了自动配置、日志和YAML等大量默认的配置,大大简化了我们的开发。
 引入之后相关的starter引入就不需要添加version配置,
     spring boot会自动选择最合适的版本进行添加。
               -->
            <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.0.0.RELEASE</version>
 <relativePath/> 
     </parent>

        2、添加一些依赖

      

<!-- 添加spring-boot-starter-web模块依赖 -->
   <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>

 <!-- 添加 servlet 依赖. -->
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>javax.servlet-api</artifactId>
 <scope>provided</scope>
 </dependency>
     
 <!-- 添加 JSTL(JSP Standard Tag Library,JSP标准标签库) -->
 <dependency>
 <groupId>javax.servlet</groupId>
 <artifactId>jstl</artifactId>
 </dependency>

 <!--添加 tomcat 的支持.-->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-tomcat</artifactId>
 <scope>provided</scope>
 </dependency>

 <!-- Jasper是tomcat中使用的JSP引擎,运用tomcat-embed-jasper可以将项目与tomcat分开 -->
 <dependency>
 <groupId>org.apache.tomcat.embed</groupId>
 <artifactId>tomcat-embed-jasper</artifactId>
 <scope>provided</scope> </dependency>

③ 在resources下创建application.properties配置文件

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp


④创建控制器


package com.ysh.jsptest.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import com.ysh.jsptest.domain.Dog;
@Controller
public class IndexController {

 @RequestMapping("/")
 public String index(Model model){
 // 保存一个username到model
 model.addAttribute("username", "badao");
 // 模拟数据库数据保存到List集合
 List<Dog> dogs = new ArrayList<>();
 dogs.add(new Dog(1, "巴扎黑1", "1.jpg",109.00,"ysh"));
 dogs.add(new Dog(2, "巴扎黑2", "2.jpg",108.00,"badao"));
 dogs.add(new Dog(3, "巴扎黑3", "3.jpg",58.00,"liumang"));
 dogs.add(new Dog(4, "巴扎黑4", "4.jpg",108.00,"qi"));
 dogs.add(new Dog(5, "巴扎黑5", "5.jpg",79.00,"zhi"));
 // 保存数据到model
 model.addAttribute("dogs", dogs);
 return "index";
 }
}

⑤ 创建JSP页面

application.properties文件中指定的文件路径是/WEB/jsp/,这是web开发中最常用的方式

在webapp/WEB-INF/下新建一个jsp目录,并重新建一个index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css"/> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
 <!-- .panel-heading 面板头信息。 -->
 <div class="panel-heading">
 <!-- .panel-title 面板标题。 -->
 <h3 class="panel-title">Spring Boot添加JSP示例</h3>
 </div>
</div>
<div class="container">
 <div class="row">
 <div class="col-md-4">
 <h3>欢迎[<font color="red">${requestScope.username }</font>]</h3>
 </div>
 </div>
 <div class="col-md-12">
 <div class="panel panel-primary">
 <div class="panel-heading">
      <h3 class="panel-title">狗狗信息列表</h3>
   </div>
   <div class="panel-body">
 <!-- table-responsive:响应式表格,在一个表展示所有的数据,当不够显示的时候可以左右滑动浏览-->
 <div class="table table-responsive">
 <!--
                  .table-bordered 类为表格和其中的每个单元格增加边框。
                  .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
                 -->
 <table class="table table-bordered table-hover">
 <thead>
 <th class="text-center">狗狗照片</th ><th class="text-center">狗狗名字</th>
 <th class="text-center">狗狗价格</th ><th class="text-center">狗狗主人</th>
 </thead>
 <tbody class="text-center">
 <c:forEach items="${requestScope.dogs}" var="dog">
 <tr>
 <td> <img src="images/${dog.image}" height="60"/></td>
 <td>${dog.name}</td>
 <td>${dog.price}</td>
 <td>${dog.owner}</td>
 </tr>
 </c:forEach>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
</div>
</body>
</html>

⑥创建APP类

package com.ysh.jsptest;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//@SpringBootApplication指定这是一个 spring boot的应用程序.
@SpringBootApplication
public class App 
{
    public static void main( String[] args )
    {
     // SpringApplication 用于从main方法启动Spring应用的类。
        SpringApplication.run(App.class, args);
    }
}

⑦运行应用,打开浏览器输入:http://localhost:8080/

SpringBoot添加JSP支持_tomcat_03