京淘项目Day04

1.关于项目打包/发布问题说明

1.1 利用maven工具项目打包

说明: 父级JT 其中包含了2个子级项目
jt-manager 依赖于jt-common.所以项目打包是有顺序的.

1.2 maven-install

1.项目打包

2.打包效果

3.打包位置
本地仓库中

target目录中:

1.3 SpringBoot项目发布

说明: springBoot项目中,内置了tomcat服务器. 所以发布项目时,只需要通过java命令让程序执行即可.
JAVA命令: java -jar xxxxx.jar/war
关闭tomcat服务器: ctrl + c

2.页面通用跳转

2.1 F12工具说明

2.2 页面请求

	<ul>
	         		<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>
	</ul>

   
   

   
   
1
2
3
4
5

2.3 关于RestFul风格说明

package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

<span class="token comment">/**
 * 面试问题:  你说说你是怎么用restFul的.
 * 用法1:  可以用来动态的接收url中的参数.之后完成业务调用
 * 方法2:  可以通过不同的请求类型来标识不同的业务需求.
 * 
 * 用法1: 动态获取url中的参数,简化了Controller中方法的个数.
 * 需求:利用一个请求方法.实现页面通用跳转
 * 页面url地址:
 * 	/page/item-add
 *  /page/item-list
 *  /page/item-param-list'
 * 思路: 只要能够获取url中的第二个参数就可以实现通用的页面跳转功能.
 * 如何获取url中的参数?????
 * 解决方案:  使用restFul风格
 * 语法:
 * 		1.参数与参数之间使用/分隔
 * 		2.参数使用{}形式包裹
 * 		3.定义参数使用特定的注解接收. @PathVariable
 * 
 * 
 * 用法2
 * 	说明:
 * 		利用restFul风格,可以简化用户url的写法.
 * 	例子:
 * 		利用同一个请求http://localhost:8091/item  实现CRUD操作
 * 	知识回顾:
 * 		http://localhost:8091/item/save?xxxx
 * 		http://localhost:8091/item/delete?xxxx
 * 		http://localhost:8091/item/update?xxxx
 *      http://localhost:8091/findItemxxxx
 *      多个页面请求  
 *      优化:
 *      http://localhost:8091/item?xxxx  
 *      type="GET"   查询操作
 *      type="POST"  新增操作
 *      type="PUT"   更新操作
 *      type="DELETE"删除操作
 */</span>

<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/page/{moduleName}"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> String <span class="token function">itemAdd</span><span class="token punctuation">(</span><span class="token annotation punctuation">@PathVariable</span> String moduleName<span class="token punctuation">)</span> <span class="token punctuation">{</span>

	<span class="token keyword">return</span> moduleName<span class="token punctuation">;</span>
<span class="token punctuation">}</span>


<span class="token comment">/*
 * //@RequestMapping(value = "/item", method = RequestMethod.GET)
 * 
 * @GetMapping("/item") public void getItem(Integer id) { //执行查询业务 }
 * 
 * @RequestMapping(value = "/item", method = RequestMethod.POST)
 * //@PostMapping("/item") public void saveItem(Item item) { //执行新增业务 }
 */</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68

3.页面表格数据展现

3.1 表格数据的入门案例

1.表格页面结构.

<h1>通过数据请求创建表格</h1>
		<div>
			定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
			<!--使用别人的工具API,必须满足人家的要求  -->
			<table class="easyui-datagrid" style="width:500px;height:300px" 
			data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:false,pagination:true"> 
				<thead> 
					<tr> 
						<th data-options="field:'code',width:100">Code</th> 
						<th data-options="field:'name',width:100">Name</th> 
						<th data-options="field:'price',width:100,align:'right'">Price</th>
					</tr> 
				</thead> 
			</table> 
		</div>
		<hr/>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.表数据返回值格式要求

{
	"total":2001,
	"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"}
	]
}

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

3.2 关于JSON串说明

3.2.1 JSON介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。

语法错误: JSON的实质就是字符串 json串 JS对象

3.2.2 Object格式

{“id”:“1”,“name”:“tomcat猫”}

3.2.3 Array格式

[“1”,“2”,“3”]

3.2.4 嵌套用法

**值（value）**可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

{"id":"100",
  "name":"tomcat",
  "hobby":["花钱","挣钱","敲代码挣钱","敲代码玩游戏",["人间兵器","赤色要塞","吞食天地","霸王的大陆"]]}

 
 

 
 
1
2
3

3.3 表格数据展现VO对象封装

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
<span class="token keyword">private</span> Long total<span class="token punctuation">;</span>
<span class="token keyword">private</span> List<span class="token generics function"><span class="token punctuation">&lt;</span>Item<span class="token punctuation">&gt;</span></span>	rows<span class="token punctuation">;</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

4.商品列表展现

4.1 商品列表表格页面展现

根据UI框架,搭建表格页面 .注意url地址及返回值数据格式要求.
说明:表格属性 url地址发起ajax请求. 由于分页原因.所以会动态的添加分页的参数. page=1&rows=20

<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>
</table>

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.2 编辑商品POJO对象

package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

import lombok.Data;
import lombok.experimental.Accessors;

@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下架

<span class="token comment">//为了满足页面调用需求,添加get方法</span>
<span class="token keyword">public</span> String<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token function">getImages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	
	<span class="token keyword">return</span> image<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

4.3 编辑ItemController

@RestController	//返回值数据都是JSON串.
@RequestMapping("/item")
public class ItemController {
<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> ItemService itemService<span class="token punctuation">;</span>

<span class="token comment">/**
 * 业务: 根据分页要求展现商品列表.要求将最新最热门的商品首先给用户展现.
 * url: url:'/item/query
 * 参数: page=1&amp;rows=20   page当前页    rows 记录数
 * 返回值: EasyUITable
 * 编码习惯: mapper-service-controller-页面js   手敲  自下而上的开发
 * 课堂代码格式:
 * 			url-controller-service-mapper      结构代码自动生成  自上而下开发
 * 			
 */</span>
<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/query"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> EasyUITable <span class="token function">findItemByPage</span><span class="token punctuation">(</span>Integer page<span class="token punctuation">,</span>Integer rows<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	
	<span class="token comment">//1.调用业务层,获取商品分页信息</span>
	<span class="token keyword">return</span> itemService<span class="token punctuation">.</span><span class="token function">findItemByPage</span><span class="token punctuation">(</span>page<span class="token punctuation">,</span> rows<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

4.4 编辑ItemService

package com.jt.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.jt.mapper.ItemMapper;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;

@Service
public class ItemServiceImpl implements ItemService {

<span class="token annotation punctuation">@Autowired</span>
<span class="token keyword">private</span> ItemMapper itemMapper<span class="token punctuation">;</span>

<span class="token comment">/**
 * 执行步骤:1.手动编辑sql    2.利用MP机制 动态生成
 * SELECT * FROM tb_item LIMIT 起始位置,查询记录数
/*第一页 java中数组运算 一般都是含头不含尾
  SELECT * FROM tb_item LIMIT 0,20;
/*第二页
  SELECT * FROM tb_item LIMIT 20,20;
/*第三页
  SELECT * FROM tb_item LIMIT 40,20;
*第N页
  SELECT * FROM tb_item LIMIT (n-1)ROWS,ROWS;
 */</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> EasyUITable <span class="token function">findItemByPage</span><span class="token punctuation">(</span>Integer page<span class="token punctuation">,</span> Integer rows<span class="token punctuation">)</span> <span class="token punctuation">{</span>
	
	<span class="token comment">//参数1.记录总数   参数2: rows 当前页的记录数</span>
	<span class="token keyword">long</span> total <span class="token operator">=</span> itemMapper<span class="token punctuation">.</span><span class="token function">selectCount</span><span class="token punctuation">(</span>null<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">int</span> startIndex <span class="token operator">=</span> <span class="token punctuation">(</span>page <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> rows<span class="token punctuation">;</span>
	List<span class="token generics function"><span class="token punctuation">&lt;</span>Item<span class="token punctuation">&gt;</span></span> itemList <span class="token operator">=</span> 
			itemMapper<span class="token punctuation">.</span><span class="token function">findItemByPage</span><span class="token punctuation">(</span>startIndex<span class="token punctuation">,</span>rows<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">EasyUITable</span><span class="token punctuation">(</span>total<span class="token punctuation">,</span>itemList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

4.5 编辑ItemMapper

package com.jt.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Select;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.Item;

public interface ItemMapper extends BaseMapper<Item>{

<span class="token comment">//利用注解执行sql.</span>
<span class="token annotation punctuation">@Select</span><span class="token punctuation">(</span><span class="token string">"SELECT * FROM tb_item  ORDER BY updated DESC LIMIT #{startIndex},#{rows}"</span><span class="token punctuation">)</span>
List<span class="token generics function"><span class="token punctuation">&lt;</span>Item<span class="token punctuation">&gt;</span></span> <span class="token function">findItemByPage</span><span class="token punctuation">(</span>Integer startIndex<span class="token punctuation">,</span> Integer rows<span class="token punctuation">)</span><span class="token punctuation">;</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

4.6 页面效果展现

4.7 利用MP方式实现分页查询

核心配置: MybatisPlus中的分页需要添加配置类.

4.7.1 编辑ItemService

//利用MP方式进行分页查询
	//Page参数问题:  参数1: 第几页    参数2:size 每页多少天
	@Override
	public EasyUITable findItemByPage(Integer page, Integer rows) {
		QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
		queryWrapper.orderByDesc("updated");
		IPage<Item> iPage = new Page<>(page, rows);
		//根据分页模型执行分页操作,并将结果返回给分页对象.
		iPage = itemMapper.selectPage(iPage, queryWrapper);
	Long total <span class="token operator">=</span> iPage<span class="token punctuation">.</span><span class="token function">getTotal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//由分页工具动态获取</span>
	List<span class="token generics function"><span class="token punctuation">&lt;</span>Item<span class="token punctuation">&gt;</span></span> itemList <span class="token operator">=</span> iPage<span class="token punctuation">.</span><span class="token function">getRecords</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取当前分页的信息</span>
	<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">EasyUITable</span><span class="token punctuation">(</span>total<span class="token punctuation">,</span> itemList<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

4.7.2 编辑分页配置类

@Configuration 	//标识我是一个配置类
public class MybatisPlusConfig {
<span class="token comment">//将分页的拦截器交给spring容器管理.</span>
<span class="token annotation punctuation">@Bean</span>
<span class="token keyword">public</span> PaginationInterceptor <span class="token function">paginationInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	
	<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">PaginationInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

5.商品列表数据格式化

5.0 页面JS如何引入

1.页面包含信息

<jsp:include page="/commons/common-js.jsp"></jsp:include>

 
 

 
 
1

2.页面引入JS

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 自己实现业务逻辑 -->
<script type="text/javascript" src="/js/common.js"></script>

 
 

 
 
1
2
3
4
5
6
7
8
9
10

5.1 格式化价格

1.查看页面信息

<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>

 
 

 
 
1

2.检查格式化JS

formatPrice : function(val,row){
		return (val/100).toFixed(2);
	},

 
 

 
 
1
2
3

5.2 格式化状态

1.页面状态标识

 <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>

 
 

 
 
1

2.页面格式化操作

// 格式化商品的状态
	formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            return '<span style="color:green;">上架</span>';
        } else if(val == 2){
        	return '<span style="color:red;">下架</span>';
        } else {
        	return '未知';
        }
    },

 
 

 
 
1
2
3
4
5
6
7
8
9
10

6 格式化商品分类目录

6.1 业务需求说明

商品列表展现时,需要在商品分类目录中展现具体的名称.而不是分类的ID值. 560代表的是手机信息

6.2 编辑页面ajax

//格式化名称
    findItemCatName : function(val,row){
    	var name;
    	$.ajax({
    		type:"post",
    		url:"/item/cat/queryItemName",
    		data:{itemCatId:val},
    		cache:true,    //缓存
    		async:false,    //表示同步   默认的是异步的true
    		dataType:"text",//表示返回值参数类型
    		success:function(data){
        		name = data;
        	}
    	});
    	return name;
	},

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.3 标识POJO对象

@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
	@TableId(type = IdType.AUTO)
	private Long id;
	private Long parentId;	//父级ID
	private String name;	//分类名称
	private Integer status; //状态信息1正常，2删除'
	private Integer sortOrder; //排序号
	private Boolean isParent;  //是否为父级. true/fase
}

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

作业

1. 将商品分类信息查询完成.
2. 准备IDEA软件   8G  (试运行) 回滚

 
 

 
 
1
2

                                </div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/qq_16804847/article/details/107706310&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-ff98e99283.css" rel="stylesheet">
                            </div>