共计 7937 个字符,预计需要花费 20 分钟才能阅读完成。
1.SpringBoot 整合 Web 资源
1.1 创立我的项目
1.1.1 利用工具创立我的项目
1.1.2 编辑 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/*.xml | |
#开启驼峰映射 | |
configuration: | |
map-underscore-to-camel-case: true | |
# 配置数据库日志 | |
logging: | |
level: | |
#打印哪个包下的日志信息. | |
com.jt.mapper: debug |
1.2.2 对于 IDEA 页面资源加载 404 问题
阐明: 因为 IDEA 加载动静 web 资源时, 默认的运行环境可能配置有误, 则导致页面资源无奈加载!!!
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 跳转到 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.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 等如何治理?
正文完