1.SpringBoot整合Web资源
1.1 创建项目
1.1.1 利用工具创建项目
1.1.2 新建web资源目录
说明:将课前资料中的web-inf目录添加到web资源
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>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.2 SpringBoot整合web
1.2.1 编辑YML配置文件
server:
port: 8090
servlet:
context-path: /
spring:
datasource:
#driver-class-name: com.mysql.cj.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: #引入mvn配置
view:
prefix: /WEB-INF/ # /默认代表根目录 src/main/webapp
suffix: .jsp
#Mybatisplus整合
mybatis-plus:
#定义别名包 将实体对象的包路径进行封装.
type-aliases-package: com.jt.pojo
#添加xml文件的依赖
mapper-locations: classpath:/mybatis/mappers
@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.2.4 页面效果展现
1.3 Ajax复习
1.3.1 Ajax特点
特点:局部刷新,异步访问.
问题: Ajax如何做到异步的?? 答:因为有ajax引擎参与,使得请求由一个变为多个
1.3.2 跳转ajax页面
//跳转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>
<!-- 引入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.3.4 实现Ajax数据访问
//实现ajax业务调用,返回页面列表数据.
@RequestMapping("/findAjax")
@ResponseBody
public List<User> findAjax(){
return userMapper.selectList(null);
}
1.3.4 编辑页面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>
2. 京淘项目架构图设计
2.1 分布式思想
2.1.1 概念
说明:将大型项目按照特定的规则进行拆分.目的:减少项目架构的耦合性. (化整为零 拆)
2.1.2单体项目存在的问题
说明:如果作为大型项目,将所有的功能模块都写到一起,如果将来其中的一个模块出现问题,则直接影响整个项目的运行.
2.1.3 按照功能业务拆分
说明:按照特定的模块进行拆分,之后各自独立的运行.相互之间不受影响.
2.1.3 按照层级拆分
2.2 分布式应用中的问题说明
问题:由于引入分布式思想.但是同时带来了一些问题,需要解决???
2.2.1 分布式系统中的jar包如何管理?
2.2.2 分布式系统中的工具API等如何管理?
