京淘项目实战开发-04 [springmvc调用流程、京淘环境搭建]

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官网:http://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);
}

4.4.7 页面效果展现

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值