①创建一个新的Maven Web 项目,命名为SpringBoot_jsptest
建成之后会如上图所示,报错是因为没有加入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/