day---04
1.SpringMVC调用流程
1.1 组件说明
1.1.0 Servlet作用
在这里插入图片描述
1.1.1 前端控制器 (Servlet机制)
作用: SpringMVC中控制用户的请求的转发…/响应的规则
1.1.2 处理器映射器
铺垫: 404什么错误 请求资源没有找到.
作用: 标识用户的请求路径/后端执行的方法的映射关系.
数据结构: Map
工作过程: 当tomcat服务器启动时,带动SpringMVC的组件运行.将所有的@RequestMapping注解进行扫描. 之后将请求路径当做key.注解所标识的方法当做value保存到 处理器映射器中.方法用户请求之后匹配方法.
1.1.3 处理器适配器
作用: SpringMVC中内部有很多处理器(工人).都由适配器进行统一的管理(包工头).如果用户需要执行某个业务的方法,都会先由处理器适配器挑选合适的处理器去执行业务逻辑.
理解: 装修的时候, 先铺地板 电工 水暖工… 装修公司(包工头)
1.1.4 处理器
说明: 将来的程序从Controller层中进行执行时,是由处理器完成的. 返回特定的数据 ModelAndView对象
返回值说明: ModelAndView对象 包含2部分知识 Model数据(服务器返回给页面的数据) 和View数据(服务器返回页面逻辑名称)
1.1.5 视图解析器(view)
作用: 将用户返回的页面的逻辑名称,动态拼接 前缀+后缀 该页面就是给用户展现的页面.
例子: /WEB-INF/ajax.jsp
1.1.6 视图渲染
说明: 将返回值中的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
//设定异步操作 如果涉及到ajax嵌套问题 则设置同步调用.
})
2.京淘环境搭建
要求: 1.代码必须跟上 2.项目部署阶段 问题集中式爆发(虚拟机/Linux命令) 学会接受
3.前后端调用业务流程 业务问题 听懂流程 看懂代码即可 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 创建项目
在这里插入图片描述
3.1.2 编辑POM.xml文件
定义父级工程pom.xml文件, 注意打包方式/跳过测试类打包/新jar包添加.
4.0.0
com.jt
jt
1.0-SNAPSHOT
pom
org.springframework.boot
spring-boot-starter-parent
2.4.3
1.8
true
org.springframework.boot
spring-boot-starter-data-jdbc
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-devtools
runtime
true
mysql
mysql-connector-java
runtime
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-test
test
com.baomidou
mybatis-plus-boot-starter
3.4.2
javax.servlet
javax.servlet-api
javax.servlet
jstl
org.apache.tomcat.embed
tomcat-embed-jasper
org.apache.httpcomponents
httpclient
org.springframework.boot
spring-boot-starter-aop
redis.clients
jedis
org.springframework.data
spring-data-redis
3.2.2 jt_common导入src属性
说明: 将课前资料中的jt-common的src文件 导入.
在这里插入图片描述
3.3 创建jt_manage
3.3.1 创建项目
在这里插入图片描述
3.3.2 添加继承/依赖/插件
4.0.0
jt_manage
war
jt
com.jt
1.0-SNAPSHOT
com.jt
jt_common
1.0-SNAPSHOT
org.springframework.boot
spring-boot-maven-plugin
org.projectlombok
lombok
3.3.4 修改YML配置
修改数据源配置信息
在这里插入图片描述
3.3.5 修改启动项配置
在这里插入图片描述
3.4 关于默认页面跳转说明
问题说明: 当用户通过网址http://localhost:8091会默认的跳转一个页面 页面名称 index.html/index.jsp…
说明: 当什么都没有写的时候,会动态的配置默认的规则 发起index请求.
根据index请求 动态拼接视图解析器的前缀和后缀. /WEB-INF/views/index.jsp
在这里插入图片描述
3.5 关于页面结构分析
3.5.1 页面布局
- 商品新增
- 新增
- 修改
- 商品新增
- 页面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 = ''; //title: 选项卡标题 //content : 选项卡中展现的页面信息 //closable: 选项卡是否可以关闭. $('#tt').tabs('add',{ title:title, content:content, closable:true }); 3.6 通用页面跳转 3.6.1 业务需求说明 根据规范: 请求应该访问后端服务器,之后跳转到指定的页面中. 如果每次都是通过后端方法实现页面的跳转,很繁琐,能否优化?
- 新增商品
- 查询商品
- 规格参数
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) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。4.3.2 JSON格式
1).对象格式
在这里插入图片描述
2).数组格式
在这里插入图片描述
3).嵌套格式
在这里插入图片描述
案例:{“id”:“100”,
“name”:“tomcat猫”,
“hobbys”: [“敲代码”,“打游戏”],
“food”:[{“name”:“番茄炒蛋”,“price”:“15”},{“name”:“黄焖鸡米饭”,“price”:“30”}]
}
4.3 关于表格数据展现说明
4.3.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.3.2 封装VO对象 EasyUITable
说明: 在jt-manage中定义vo包, 代码格式如下@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {private Long total; //定义记录总数 private List- rows; //定义记录
}
请求路径: 在这里插入图片描述
4.3.3 编辑表格页面
如果表格页面中添加了分页的组件,则请求时会自动的携带分页的参数 page=当前页,rows=展现条数商品ID 商品标题 叶子类目 卖点 价格 库存数量 条形码 状态 创建日期 更新日期 4.3.4 编辑ItemController
package com.jt.controller;import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.RestController;@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.3.5 编辑ItemService
package com.jt.service;import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.jt.mapper.ItemMapper;
import java.util.List;
@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- pageList = itemMapper.findItemByPage(startIndex,rows); return new EasyUITable(total,pageList); //3.尝试使用MP的分页 进行查询 }
}
4.3.6 编辑ItemMapper
package com.jt.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.Item;
import org.apache.ibatis.annotations.Select;import java.util.List;
public interface ItemMapper extends BaseMapper{
/*要求 越火爆的商品 排序靠前 以更新时间倒叙排列*/ @Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}") List- findItemByPage(int startIndex, Integer rows);
}
4.3.7 页面效果展现
在这里插入图片描述