1.SpringBoot整合jsp
1.1创建项目
注意：项目打包方式
由于jsp是动态的web资源，所以SpringBoot项目在整合了jsp以后要打war包。
1.2 手动加webapp文件夹目录
1.3手动将课前资料中的WEB-INF资源CV过来
1.4 修改pom文件
参考之前项目中pom文件中的配置，将，，, 这几个标签中的内容CV过来.
此外，还有 servlet依赖 ，jstl依赖，使jsp页面生效的依赖，这3个依赖也要加上。（见最下面）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.jt</groupId>
<artifactId>springboot_jsp</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<!--parent标签作用: 定义了SpringBoot中所有关联项目的版本号信息.-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<java.version>1.8</java.version>
<!--项目打包时,跳过测试类打包-->
<skipTests>true</skipTests>
</properties>
<!--开箱即用:SpringBoot项目只需要引入少量的jar包及配置,即可拥有其功能.
spring-boot-starter 拥有开箱即用的能力.
maven项目中依赖具有传递性.
A 依赖 B 依赖 C项目 导入A bc会自动依赖
-->
<dependencies>
<!--直接依赖web springMVC配置-->
<dependency>
<groupId>org.springframework.boot</groupId>
<!--springBoot-start SpringBoot启动项 -->
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--SpringBoot重构了测试方式 可以在测试类中 直接引入依赖对象-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--支持热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!--引入插件lombok 自动的set/get/构造方法插件 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--引入数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--springBoot数据库连接 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--spring整合mybatis-plus 只导入MP包,删除mybatis包 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.2.0</version>
</dependency>
<!--springBoot整合JSP添加依赖 -->
<!--servlet依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</dependency>
<!--jstl依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<!--使jsp页面生效 -->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
</dependencies>
<!--在项目打包部署时生效,如果不添加build,则程序发布时不然会报
项目中没有main方法.
-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
1.5 编辑YML文件
要想访问WEB-INF目录下的.jsp资源，需要在yml文件中加入这几行配置
1.7 关于IDEA页面资源加载404问题
老师提出的需求：用户输入：http://localhost:8090/findAll 跳转到userList.jsp页面中，并且展现user表中全部的数据。
1.7.1编辑个userList.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>您好Springboot</title>
</head>
<body>
<table border="1px" width="65%" align="center">
<tr>
<td colspan="6" align="center"><h3>学生信息</h3></td>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th></th>
</tr>
<!-- ${userList}表示从域中取值. request域 Session域 -->
<c:forEach items="${userList}" var="u">
<tr>
<th>${u.id}</th>
<th>${u.name}</th>
<th>${u.age}</th>
<th>${u.sex}</th>
</tr>
</c:forEach>
</table>
</body>
</html>
1.7.2编辑个UserController
package com.jt.controller;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
@Controller //执行视图解析器代理.
//@RestController //一般适用于ajax 不走视图解析器. 并且返回JSON数据.
public class UserController {
@Autowired
private UserMapper userMapper;
/**
* 需求1: 请求路径localhost:8090/findAll 跳转到userList.jsp页面中
* 页面取值方式: ${userList}
*/
@RequestMapping("/findAll")
public String findAll(Model model){ //model是SpringMVC中提供操作request对象的API
//1.从数据库中获取的数据
List<User> userList = userMapper.selectList(null);
//2.将userList集合保存到域中,之后页面取值
model.addAttribute("userList",userList);
//model调用的是request对象
//返回页面逻辑名称
return "userList";
}
}
1.7.3修改IDEA启动项的配置
说明:由于IDEA加载动态web资源时,默认的运行环境可能配置有误,则导致页面资源无法加载!!!
解决方案:
1).选择编辑按钮
2).配置项目路径
1.7.4页面效果展现
以上时传统Web应用中，客户端发送同步请求到服务器端，然后再接收服务器端响应的过程。
下面，通过用Ajax技术，实现客户端发异步请求到服务器端，再从服务器获取响应的过程方法。
1.8基于Ajax技术，客户端发送异步请求，去访问WEBINF目录下的userAjax.jsp页面
1.8.1Ajax特点
特点:局部刷新,异步访问.
问题: Ajax如何做到异步的??
答:因为有ajax引擎参与,使得请求由一个变为多个
1.8.2在controller中写一个方法toAjax
由于服务器要向客户端返回的内容分2方面：
1.从数据库中查出来的数据
2.要把这些数据放到的那个页面模板
客户端通过访问：http：//localhost：8090/ajax，就可以先看到个页面，不至于很烦躁
在此过程中，在页面js中还悄悄地包含着一个请求，/findAjax，就对应着controller中返回数据库查询结果的那个方法。
所以客户端只需要访问http：//localhost：8090/ajax，最终就能即得到页面模板，也能得到数据。
并且服务器中的view会调用视图解析器把“页面模板”和“数据”完美地结合在一起。
客户端就很满意。
目的是：服务器告诉客户端，通过“/ajax”这个url就可以访问到userAjax.jsp这个页面----先给个页面模板
//跳转ajax页面
@RequestMapping("/ajax")
public String toAjax(){
return "userAjax";
}
1.8.3编辑UserAjax.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入JS函数类库 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//让页面加载完成之后执行
$(function(){
//1.$.get("url地址","添加参数","回调函数","返回值结果类型 text/html/json....一般ajax会自动匹配.");
$.get("/findAjax",function(data){
alert("ajax执行成功!!!!");
//将数据封装到页面中!!!
});
//2.$.post();
//3.$.getJSON();
//4.$.getScript();
//5.$.ajax();
})
</script>
<title>您好Springboot</title>
</head>
<body>
<table border="1px" width="65%" align="center">
<tr>
<td colspan="6" align="center"><h3>学生信息</h3></td>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th></th>
</tr>
</table>
</body>
</html>
1.8.4实现Ajax数据访问
悄悄地把从数据库查询的数据也返回给客户端-----返回数据（在js文件中的第38行的$.ajax({})异步请求中，请求了数据）
//实现ajax业务调用,返回页面列表数据.
@RequestMapping("/findAjax")
@ResponseBody
public List<User> findAjax(){
return userMapper.selectList(null);
}
1.8.5编辑页面js
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入JS函数类库 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//让页面加载完成之后执行
$(function(){
//1.$.get("url地址","添加参数","回调函数","返回值结果类型 text/html/json....一般ajax会自动匹配.");
$.get("/findAjax",function(data){
//data = [{user},{user},{user}] es6~jsp中冲突
//需求: 将userList集合信息动态的添加到table中.
var trs = null;
$(data).each(function(index){
//index代表循环遍历的下标从0开始
var user = data[index];
var id = user.id;
var name = user.name;
var age = user.age;
var sex = user.sex;
//最终需要在table中展现
trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
});
//将结果追加到table中即可.
$("#tab1").append(trs);
});
//2.$.post();
//3.$.getJSON();
//4.$.getScript();
//5.$.ajax(); 说明
$.ajax({
type: "get",
url: "/findAjax2",
//data: {"id":"1","name":"tomcat"},
data: "id=1&name=tomcat",
success: function(data){
alert("ajax调用成功!!!");
alert(data);
},
async : true,
error : function(data){
alert("服务器异常,请稍后重试!!!!");
}
});
})
</script>
<title>您好Springboot</title>
</head>
<body>
<table id="tab1" border="1px" width="65%" align="center">
<tr>
<td colspan="6" align="center"><h3>学生信息</h3></td>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th></th>
</tr>
</table>
</body>
</html>
1.8.6实现Ajax异步请求的5种方式
- 这个是最根本的方式，其他的都是这种方式的衍生和变种。
$.ajax({
type: “get”,
url: “/findAjax2”,
data: {“id”:“1”,“name”:“tomcat”},
success: function(data){ alert(“ajax调用成功!!!”); alert(data); }, //控制 服务器成功的返回了数据，客户端这边要怎么做
async : true, //控制 发同步请求 / 异步请求
error : function(data){ alert(“服务器异常,请稍后重试!!!”);} //控制 万一服务器端数据响应失败了，要怎么做。
}); - $.get();
- $.post();
- $.getJSON();
- $.getScript();
注意：
es6与jsp冲突。
在jsp中如果写个$ ，它会不知道我写的到底是es6的写法，还是el表达式。
而在html中，就不存在这种情况。
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
