1.SpringBoot整合web资源
1.1 创立动静web资源
1.2 我的项目构造
1.3 增加资源/jar包
1).增加资源
2).增加jar包文件
<!--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>1.4 增加YML配置文件
server:
port: 8090
servlet:
context-path: / #我的项目根目录公布
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
username: root
password: root
mvc: #引入mvn配置
view:
prefix: /WEB-INF/ # /默认代表根目录 src/main/webapp
suffix: .jsp
# Spring整合Mybatis-plus配置
mybatis-plus:
type-aliases-package: com.jt.pojo
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
# 打印Mybatissql语句
logging:
level:
com.jt.mapper: debug1.5 入门案例
需要: 用户通过http://localhost:8090/findAll 获取全副userList汇合,并且在userList.jsp页面中进行表格数据展示
1.5.2 动静web资源404报错阐明
阐明:IDEA默认条件下工作目录抉择不正确的,须要手动配置一下,留神工作目录编辑
1.5.2 编辑UserController
第三阶段: pojo–>Mapper—–>Service——>Controller——->页面及JS 自下而上的开发方式
第四阶段 pojo—>Controller—>Service—–>Mapper 自上而下的开发方式
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
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.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/findAll")
public String findAll(Model model){
List<User> userList = userService.findAll();
model.addAttribute("userList", userList);
return "userList";
}
}1.5.3 编辑UserService
package com.jt.service;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.selectList(null);
}
}1.5.4 页面成果展示
1.6 异步实现业务调用
1.6.1 Ajax为什么能够异步呢?工作原理是?
阐明:
1).Ajax两头有ajax引擎的参加.ajax引擎本质就是一种代理的思维
2).因为须要实现异步的操作,所以申请必然是屡次申请.屡次响应.
1.6.2 导入jQuery.JS
1.6.3 Ajax申请流程
如果须要发动Ajax申请时,个别须要发动2个申请.
1个是用来跳转页面的 http://localhost:8090/toAjax
1个是用来申请数据的 http://localhost:8090/findAjax
1.6.4 编辑页面
<%@ 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>
<!-- 引入函数类库 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//1.让页面全副加载实现 函数式编程
$(function(){
//1.$.get(url地址,传递的参数,回调函数,返回值类型)
//$.post() $.getJSON $.ajax
$.ajax({
url:"/findAjax", //url地址
method:"get", //参数类型
data:{id:1,name:"tomcat"},//申请参数
success: function(data){
//console.log(data);
for(let user of data){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
let tr="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
$("#table1").append(tr);
}
},
error: function(data){
alert("申请失败");
},
cache: true,//缓存默认true
async: true,//同步异步默认异步true
})
//对于参数写法 2种
//1.JSON格局{id:1,name:"tomcat"}
//2.字符串拼接 id=1&name="tomcat"
// $.get("/findAjax",{id:1},function(data){
//console.log(data);
//循环遍历形式3 of
//for(let user of data){
//let id = user.id;
//let name = user.name;
//let age = user.age;
//let sex = user.sex;
//let tr="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>" //$("#table1").append(tr);
// }
//循环遍历形式2 in
//for(let index in data){
//let user=data[index];
//let id=user.id;
//let name=user.name;
//let age=user.age;
//let sex=user.sex;
//console.log(user);
//}
//循环遍历形式1 for
//for(let i=0;i<data.length;i++){
//let user=data[i];
//let id=user.id;
//let name=user.name;
//let age=user.age;
//let sex=user.sex;
//console.log(id+":"+name+":"+age+":"+sex);
//}
//})
})
</script>
</head>
<body>
<table id="table1" 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>
</tr>
</table>
</body>
</html>1.6.5 编辑UserController
//跳转到ajax.jsp页面中
@RequestMapping("toAjax")
public String toAjax(){
return "ajax";
}
/**
* 接管ajax申请: /findAjax
* 返回值: List<User>
*/
@RequestMapping("/findAjax")
@ResponseBody //1.将返回值后果转化为JSON数据返回 2.代表ajax申请完结
public List<User> findAjax(){
return userService.findAll();
}
发表回复