1.SpringBoot整合Web资源
1.1 创建项目
1.1.1 利用工具创建项目
1.1.2 新建web资源目录
添加web资源:将课前资料的web-inf目录添加到目录中
1.1.3 编辑pom.xml文件
添加依赖
<?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>springboot_jsp</name>
<description>Demo project for Spring Boot</description>
<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>
<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.2 springboot整合web
1.2.1 编辑YML配置文件
server:
port: 8090
servlet:
context-path: /
spring:
datasource:
#driver-class-name: com.mysql.jdbc.Driver 驱动,采用默认的方式
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的配置
mvc:
view:
prefix: /WEB-INF
suffix: .jsp
#Mybatis-plus整合
mybatis-plus:
#定义别名包 将实体包的路径
type-aliases-package: com.jt.pojo
#添加xml文件的映射
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
# 配置数据库日志
logging:
level:
#打印那个包下的日志
com.jt.mapper: debug
创建controller包和类
@Controller //执行视图解析器
//@RestController //一般适用于ajax 不走视图解析器 ,并且返回JSON数据
1.2.2 关于IDEA页面资源加载404问题
说明:由于IDEA加载动态web资源时,默认的运行环境可能配置有误,则导致页面资源无法加载!!!
解决方案:
1).选择编辑按钮
2).配置项目路径
注意:要保证目录名字正确,否则还是会出现404错误 并且好好检查自己的pom.xml文件
检查yml文件,查看是否正确
** 1.YML配置层级关系 key必须唯一 注意缩进**
1.2.3 编辑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.2.4 编辑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 跳转user.jsp页面
* 页面取值的方式:${userList}
*/
@RequestMapping("/findAll")
public String findAll(HttpServletRequest request) {
//1.从数据库中获取数据
List<User> userList = userMapper.selectList(null);
//2.将userList集合保存到域中,之后页面取值
//model.addAttribute("userList",userList);
//model调用的是request对象
request.setAttribute("userList",userList);
//返回 页面逻辑名称
return "userList";
}
}
拓展@RequestMapping 注解
@RequestMapping 有两种标注方式,一种是标注在类级别上,一种是标注在方法级别上。标注在方法上时,value 表示访问该方法的 URL 地址。标注在类上时,value 相当于一个命名空间,即访问该 Controller 下的任意方法都需要带上这个命名空间。
两种获取页面方式
1)第一种 :HttpServletRequest request
@RequestMapping("/findAll")
public String findAll(HttpServletRequest request) {
//1.从数据库中获取数据
List<User> userList = userMapper.selectList(null);
//2.将userList集合保存到域中,之后页面取值象
request.setAttribute("userList",userList);
//返回 页面逻辑名称
return "userList";
}
2)第二种:Model model
@RequestMapping("/findAll")
public String findAll(Model model) {
//1.从数据库中获取数据
List<User> userList = userMapper.selectList(null);
//2.将userList集合保存到域中,之后页面取值
model.addAttribute("userList",userList);
//model调用的是request对象
//返回 页面逻辑名称
return "userList";
}
运行程序,页面都返回
1.2.5 页面效果展现
1.3 Ajax复习
1.3.1 Ajax特点
特点:局部刷新,异步访问
问题:Ajax如何做到异步访问的呢?
因为有ajax引擎参与,使得请求由一个变为多个
1.3.2 跳转ajax页面
@RequestMapping("/ajax")
public String toAjax(){
return "userAjax";
}
1.3.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>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//1.$.get("url地址","添加参数","回调函数","返回值结果");
$.get("/findAjax",function(data){
alert("ajax执行成功!!!");
});
//2.$.post();
//3.$.getJSON();
//4.$.getScript();
})
</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.3.4 实现Ajax数据访问
//实现Ajax业务调用,返回页面列表数据
@RequestMapping("/findAjax")
@ResponseBody
public List<User> findAjax(){
return userMapper.selectList(null);
}
1.3.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>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//1.$.get("url地址","添加参数","回调函数","返回值结果");
$.get("/findAjax",function(data){
//data = [{user},{user},{user}]
//需求:将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>
https://jquery.cuishifeng.cn/jQuery.Ajax.html
2. 京淘项目架构图设计
2.1 分布式思想
2.1.1概念
将大型项目按照特定的规则进行拆分,目的:减少项目架构的耦合性。
分布式的由来
2.1.2单体项目存在的问题
说明:如果作为大型项目,将所有的功能模块都写到一起,如果将来其中的一个模块出现问题,则直接影响整个项目的运行。
2.1.3 按照功能业务拆分
说明:按照特定的模块进行拆分,之后各自独立的运行.相互之间不受影响.
2.1.3 按照层级拆分
2.2 分布式应用中的问题说明
问题:由于引入分布式思想.但是同时带来了一些问题,需要解决???