1.SpringMVC调用流程
1.1 组件说明
1.1.0 Servlet作用
1.1.1 前端控制器 (Servlet机制)
DispatcherServlet 前端控制器 (Servlet机制)
作用: SpringMVC中控制用户的请求的转发…/响应的规则
1.1.2 处理器映射器
HandlerMapping 处理器映射器
铺垫: 404什么错误？ 请求资源没有找到. 作用: 标识用户的请求路径/后端执行的方法的映射关系. 数据结构: Map<String,Method> 工作过程: 当tomcat服务器启动时,带动SpringMVC的组件运行.将所有的@RequestMapping注解进行扫描. 之后将请求路径当做key.注解所标识的方法当做value保存到 处理器映射器中.方法用户请求之后匹配方法.
1.1.3 处理器适配器
HandlerAdaptor 处理器适配器
作用: SpringMVC中内部有很多处理器(工人).都由适配器进行统一的管理(包工头).如果用户需要执行某个业务的方法,都会先由处理器适配器挑选合适的处理器去执行业务逻辑.
理解: 装修的时候, 先铺地板 电工 水暖工… 装修公司(包工头)
1.1.4 处理器
Controller 处理器
说明: 将来的程序从Controller层中进行执行时,是由处理器完成的. 返回特定的数据 ModelAndView对象 返回值说明: ModelAndView对象 包含2部分知识 Model数据(服务器返回给页面的数据) 和View数据(服务器返回页面逻辑名称)
1.1.5 视图解析器(view)
ViewReslover 视图解析器(view)
作用: 将用户返回的页面的逻辑名称,动态拼接 前缀+后缀 该页面就是给用户展现的页面. 例子: /WEB-INF/ajax.jsp
1.1.6 视图渲染
View 视图渲染
说明: 将返回值中的model数据 动态的填充到页面中 (将数据存放到request对象中),之后在页面中通过request对象,key的方法动态获取数据.至此用可以看到展现的页面,同时可以从request对象中动态的获取想要的数据…
1.1.7 SpringMVC调用原理
1.2 关于常见Ajax业务说明
//2. $.ajax相关说明 最根本的ajax业务调用规则
// 函数(方法)式编程
$.ajax({
type: "get", //请求类型 $.getJSON
url: "/ajaxUser", //请求网址
data: {id:"2000",name:"tomcat猫"}, //传递的参数
dataType: "json", //定义服务器返回值类型 可以智能判断 可以省略不写
success: function(result){
//result是服务器返回的数据..
console.log(result)
},
error: function(result){
alert("服务器异常,请稍后")
},
async: true //false 同步
//设定异步操作 如果涉及到ajax嵌套问题 则设置同步调用.
})
jQuery.ajax(...)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数e
2.京淘环境搭建
要求: 1.代码必须跟上 2.项目部署阶段 问题集中式爆发(虚拟机/Linux命令) 学会接受 3.前后端调用业务流程 业务问题 听懂流程 看懂代码即可
2.1 传统架构存在问题
说明： 由于单体架构设计 将所有的模块都写到一起，如果将来某个模块发生了问题，则可能直接影响整个项目的运行。
架构设计的耦合性太高
2.2 分布式架构设计
2.2.1概念
说明： 按照特定的规则，将项目进行拆分
2.2.2 按照模块拆分
说明： 按照特定的模块将项目拆分为独立的个体，独享一台tomcat服务器
优点: 由于服务器都是单独部署,所以某台服务器的宕机，不会影响整个项目的运行！
2.2.3 按照层级拆分
说明：
-
由于大型项目开发人员较多，并且代码结构非常复杂。
-
为了减少开发的难度，将项目按照业务层级进行拆分。
2.3 关于分布式思想问题说明
2.3.1 问题说明
1.如果项目有多个 如何统一维护jar包文件? 继承 2.如果项目有多个 如何统一维护工具API? 依赖
2.3.2 京淘架构设计
3 京淘后台搭建
3.1 创建父级工程
3.1.1 创建Maven项目
3.1.2 编辑POM.xml文件
定义父级工程pom.xml文件, 注意打包方式/跳过测试类打包/新jar包添加
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.jt</groupId>
<artifactId>jt</artifactId>
<version>1.0-SNAPSHOT</version>
<!--打包方式 pom-->
<packaging>pom</packaging>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<java.version>1.8</java.version>
<!--跳过测试类打包-->
<skipTests>true</skipTests>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.4.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<!--添加jar包文件-->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--引入MybatisPlus配置 删除原有Mybatisjar包 不然造成冲突 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</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>
<!--添加httpClient jar包 -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
</dependency>
<!--引入dubbo配置 -->
<!--<dependency>
<groupId>com.alibaba.boot</groupId>
<artifactId>dubbo-spring-boot-starter</artifactId>
<version>0.2.0</version>
</dependency>-->
<!--添加Quartz的支持 -->
<!--<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-quartz</artifactId>
</dependency>-->
<!-- 引入aop支持 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<!--spring整合redis -->
<dependency>
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-redis</artifactId>
</dependency>
</dependencies>
</project>
3.2 创建jt-common
3.2.1 创建common项目
3.2.2 jt_common导入src属性
说明: 将资料中的jt-common的src文件 导入或者直接敲代码
京淘配置文件下载：
微信公众号：淡若清风丶
回复：jt配置文件
获取软件下载链接
BasePojo
//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
private Date created;
private Date updated;
}
Item
@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
@TableId(type=IdType.AUTO)
private Long id; //商品id
private String title; //商品标题
private String sellPoint; //商品卖点信息
private Long price; //商品价格 Long > dubbo
private Integer num; //商品数量
private String barcode; //条形码
private String image; //商品图片信息 1.jpg,2.jpg,3.jpg
private Long cid; //表示商品的分类id
private Integer status; //1正常，2下架
//为了满足页面调用需求,添加get方法
public String[] getImages(){
return image.split(",");
}
}
3.3 创建jt_manage
3.3.1 创建项目
3.3.2 添加继承/依赖/插件
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<!--1.定义父级-->
<parent>
<artifactId>jt</artifactId>
<groupId>com.jt</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>jt_manage</artifactId>
<!--打包方式-->
<packaging>war</packaging>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<!--2.添加依赖-->
<dependencies>
<dependency>
<groupId>com.jt</groupId>
<artifactId>jt_common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<!--3.配置build标签 业务系统必须添加build标签-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
3.3.3 导入静态资源文件
说明: 将资料中的文件jt-manage 的src文件导入.
京淘配置文件下载：
微信公众号：淡若清风丶
回复：jt配置文件
获取软件下载链接
3.3.4 修改YML配置
修改数据源配置信息
server:
port: 8091
servlet:
context-path: /
spring:
datasource:
#引入druid数据源,type切换数据源
# type: com.alibaba.druid.pool.DruidDataSource
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:
view:
prefix: /WEB-INF/views/
suffix: .jsp
#mybatis-plush配置
mybatis-plus:
type-aliases-package: com.jt.pojo
mapper-locations: classpath:/mybatis/mappers/*.xml
configuration:
map-underscore-to-camel-case: true
logging:
level:
com.jt.mapper: debug
3.3.5 修改启动项配置
3.4 关于默认页面跳转说明
问题说明: 当用户通过网址http://localhost:8091会默认的跳转一个页面 页面名称 index.html/index.jsp…
说明: 当什么都没有写的时候,会动态的配置默认的规则 发起index请求。
根据index请求 动态拼接视图解析器的前缀和后缀：/WEB-INF/views/index.jsp
3.5 关于页面结构分析
3.5.1 页面布局
easyui-layout
<body class="easyui-layout">
<!--region:对齐方式 title 标题名-->
<div data-options="region:'west',title:'菜单',split:true" style="width:10%;"></div>
<div data-options="region:'center',title:'首页'"></div>
</body>
3.5.2 树形结构规范
<!--ul无序列表 ol有序列表-->
<ul class="easyui-tree">
<li>
<span>商品新增</span>
<ul>
<li>新增</li>
<li>修改</li>
</ul>
</li>
</ul>
3.5.3 选项卡技术
页面标签
<li><a onclick="addTab('商品新增','/item-add')">商品新增</a></li>
页面JS:
var url2="https://map.baidu.com/search/%E5%8C%97%E4%BA%AC%E7%9F%B3%E6%99%AF%E5%B1%B1%E6%B8%B8%E4%B9%90%E5%9B%AD/@12936575.10359031,4826331.968205,16.56z?querytype=s&da_src=shareurl&wd=%E5%8C%97%E4%BA%AC%E7%9F%B3%E6%99%AF%E5%B1%B1%E6%B8%B8%E4%B9%90%E5%9B%AD&c=131&src=0&pn=0&sug=0&l=16&b=(12934842.424322959,4825537.372322239;12938307.78285766,4827126.564087762)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1"
//画中画效果
var content = '<iframe scrolling="auto" frameborder="0" src="'+url2+'" style="width:100%;height:100%;"></iframe>';
//title: 选项卡标题
//content : 选项卡中展现的页面信息
//closable: 选项卡是否可以关闭.
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
3.6 通用页面跳转
3.6.1 业务需求说明
根据规范：
-
请求应该访问后端服务器,之后跳转到指定的页面中.
-
如果每次都是通过后端方法实现页面的跳转,很繁琐,能否优化?
<!--data-options 规范的定义-->
<li data-options="attributes:{'url':'/page/item-add'}">新增商品</li>
<li data-options="attributes:{'url':'/page/item-list'}">查询商品</li>
<li data-options="attributes:{'url':'/page/item-param-list'}">规格参数</li>
3.6.2 编辑IndexController
package com.jt.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
/**
* /page/item-add' item-add.jsp
* /page/item-list item-list.jsp
* /page/item-param-list' item-param-list.jsp
* 需求: 能否利用一个方法实现通用的页面处理.
* 方法: restFul风格(一)
* 语法:
* 1.利用/方式进行参数分割
* 2.利用{}括号的形式动态接受参数
* 3.利用@PathVariable 动态接受参数
*
* 方法: restFul风格(二)
* 利用不同的请求类型,实现不同的业务功能
* 查询业务 GET
* 更新业务 PUT
* 删除业务 DELETE
* 新增业务 POST
*/
@RequestMapping("/page/{modelName}")
public String itemAdd(@PathVariable String modelName){
return modelName;
}
}
4.商品列表展现
4.1关于子类与父类私有属性的说明
子类继承父类，只能继承父类的共有的方法。
说明： 由于继承了父类的方法，JVM解析数据时，发现如果该子类中没有特定的属性，则动态的在编译期 生成该属性及方法。
4.2 表结构
编辑ItemPOJO对象
@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{ //子类继承父类 也实现了序列号接口
@TableId(type=IdType.AUTO)
private Long id; //商品id
private String title; //商品标题
private String sellPoint; //商品卖点信息
private Long price; //商品价格 Long > dubbo
private Integer num; //商品数量
private String barcode; //条形码
private String image; //商品图片信息 1.jpg,2.jpg,3.jpg
private Long cid; //表示商品的分类id
private Integer status; //1正常，2下架
//为了满足页面调用需求,添加get方法
public String[] getImages(){
return image.split(",");
}
}
4.3 关于JSON结构说明
4.3.1 什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON官网：www.json.org.cn/
4.3.2 JSON格式
1).对象格式
2).数组格式
3).嵌套格式
案例:
{"id":"100",
"name":"tomcat猫",
"hobbys": ["敲代码","打游戏"],
"food":[{"name":"番茄炒蛋","price":"15"},{"name":"黄焖鸡米饭","price":"30"}]
}
4.4 关于表格数据展现说明
4.4.1 表格数据JSON结构
{
"total":2000,
"rows":[
{"code":"A","name":"果汁","price":"20"},
{"code":"B","name":"汉堡","price":"30"},
{"code":"C","name":"鸡柳","price":"40"},
{"code":"D","name":"可乐","price":"50"},
{"code":"E","name":"薯条","price":"10"},
{"code":"F","name":"麦旋风","price":"20"},
{"code":"G","name":"套餐","price":"100"}
]
}
4.4.2 封装VO对象 EasyUITable
说明: 在jt-manage中定义vo包, 代码格式如下
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
private Long total; //定义记录总数
private List<Item> rows; //定义记录
}
4.4.3 编辑表格页面
如果表格页面中添加了分页的组件,则请求时会自动的携带分页的参数
- page=当前页
- rows=展现条数
<!--singleSelect 单选或多选、fitColumns 自适应、collapsible 边框线，pagination 是否分页、url AJAX的调用，请求地址、method 什么请求、pageSize 每页的行数、toolbar菜单栏-->
<table class="easyui-datagrid" id="itemList" title="商品列表"
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'id',width:60">商品ID</th>
<th data-options="field:'title',width:200">商品标题</th>
<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
<th data-options="field:'sellPoint',width:100">卖点</th>
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
<th data-options="field:'num',width:70,align:'right'">库存数量</th>
<th data-options="field:'barcode',width:100">条形码</th>
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
<th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
</tr>
</thead>
请求路径:
4.4.4 编辑ItemController
@RestController
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* 业务说明: 根据分页实现商品查询
* URL地址: http://localhost:8091/item/query?page=1&rows=20
* 参数: page/rows
* 返回值: EasyUITable
*/
@RequestMapping("/query")
public EasyUITable findItemByPage(Integer page, Integer rows){
return itemService.findItemByPage(page,rows);
}
}
4.4.5 编辑ItemService
public interface ItemService {
EasyUITable findItemByPage(Integer page, Integer rows);
}
实现类
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {
//1.获取记录总数
long total = itemMapper.selectCount(null);
//2.分页查询
//sql: select * from tb_item limit 起始位置,查询记录数
//第一页: select * from tb_item limit 0,20 0-19
//第二页: select * from tb_item limit 20,20 20-39
//第三页: select * from tb_item limit 40,20 40-59
int startIndex = (page-1) * rows;
List<Item> pageList = itemMapper.findItemByPage(startIndex,rows);
return new EasyUITable(total,pageList);
//3.尝试使用MP的分页 进行查询
}
}
4.4.6 编辑ItemMapper
public interface ItemMapper extends BaseMapper<Item>{
/*要求 越火爆的商品 排序靠前 以更新时间倒叙排列*/
/*先排序 在分页 order by updated desc */
@Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}")
List<Item> findItemByPage(int startIndex, Integer rows);
}
