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;@Controllerpublic 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;@Servicepublic 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(); }