亿级并发|day03-京淘后台搭建

0 前期准备

静态资源文件：
链接:https://pan.baidu.com/s/18SIxxCr-JHmWDKHqQmKRcw
密码:u1mk

easy-ui：
链接:https://pan.baidu.com/s/1dTTAyFlKnDxN0ZqGxcbfDQ
密码:t4bq

1 EasyUI学习

1.1 介绍

• easyui是一种基于jQuery的用户界面插件集合。
• easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
• 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
• easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。

1.2 EasyUI下载

1.3 导入静态资源文件

说明：将上面下载的静态资源文件导入项目中，注意不要替换web.xml

之后，导入上面的easy-ui进行测试

1.4 EasyUI案例

前提：

<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI的js主文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!--国际化的js文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!--引入easyUI的样式  -->
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

1. 拖拽

<div class="easyui-draggable">拖动DIV</div>

2. 进度条

<div id="p" class="easyui-progressbar" style="width:400px;"></div>

3. 弹出框

$("#win1").window({
				title:"弹出框",
				width:400,
				height:400,
				modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
			})
		})

2 京淘后台搭建

2.1 跳转后台首页

@Controller
public class IndexController {
	
	@RequestMapping("/index")
	public String index(){
		
		return "index";
	}
}

2.2 实现页面通用跳转

1. 需求：
   根据页面跳转的规则，实现一个通用的Controller方法，实现页面的通用跳转。

2. 问题：
   1./page/item-add
   2./page/item-list
   由于用户需要跳转的页面很多，每次请求都需要编辑Controller中的方法注解，以实现页面的跳转。如果用户有100个url需要匹配100个Controller，如何解决？

@RequestMapping("/page/item-add")
	public String item_add(){
		
		return "item-add";
	}

3. 解决策略：
   使用使用RestFul结构实现页面通用跳转。

2.3 RestFul实现页面跳转

/**
	 * url:
	 * 	/page/item-add
	 * 	/page/item-update
	 * 
	 * 要求:
	 * 	 1.参数的位置必须固定
	 *   2.如果有多个参数时使用"/"分割
	 *   3.需要接收的参数使用{}包装,
	 *     使用@PathVariable注解接收参数
	 * 用法:
	 * 	 @RequestMapping("/page/{aaa}")
	 * 	 @PathVariable(value="aaa")String moduleName
	 * 	 如果参数接收名称不一致.可以使用
	 *   @PathVariable(value="aaa")方法获取数据
	 * @return
	 */					
					///page/item-add
	@RequestMapping("/page/{moduleName}")
	public String item_add(@PathVariable String moduleName){
		
		return moduleName;
	}

RestFul优点：

扫描二维码关注公众号，回复： 3706365 查看本文章

• 可以将参数直接拼接到url中，节省代码。
• 如果使用RestFul结构，可以不同特定的参数封装。
• 参数获取灵活。

3 PowerDesigner

3.1 PD介绍

PowerDesigner最初由Xiao-Yun Wang（王晓昀）在SDP Technologies公司开发完成。PowerDesigner是Sybase的企业建模和设计解决方案，采用模型驱动方法，将业务与IT结合起来，可帮助部署有效的企业体系架构，并为研发生命周期管理提供强大的分析与设计技术。
PowerDesigner独具匠心地将多种标准数据建模技术（UML、业务流程建模以及市场领先的数据建模）集成一体，并与 .NET、WorkSpace、PowerBuilder、Java™、Eclipse 等主流开发平台集成起来，从而为传统的软件开发周期管理提供业务分析和规范的数据库设计解决方案。此外，它支持60多种关系数据库管理系统（RDBMS）/版本。PowerDesigner运行在Microsoft Windows平台上，并提供了Eclipse插件。
Power Designer 是Sybase公司的CASE工具集，使用它可以方便地对管理信息系统进行分析设计，他几乎包括了数据库模型设计的全过程。利用Power Designer可以制作数据流程图、概念数据模型、物理数据模型，还可以为数据仓库制作结构模型，也能对团队设计模型进行控制。他可以与许多流行的软件开发工具，例如PowerBuilder、Delphi、VB等相配合使开发时间缩短和使系统设计更优化。

总结
PD可以以图形化界面的形式展现表与表之间的关联关系，可以根据不同的数据库版本，自动生成建库建表的语句。

汉化破解

4 商品信息查询

4.1 EasyUI-表格数据

1. 表格定义

<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',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>

2. 表格数据格式

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

总结

• 必须使用特定的表格类型：easyui-datagrid
• options=“url:‘datagrid_data.json’”
• 回传数据必须有特定的格式要求

{
		Total: 数据库查询记录总数,
		rows:[{code:’a’,name:’手机’,price:200},{},{},{}…..]
}

json串中的属性，必须与页面中属性保持一致，方可实现数据自动回显。

4.2 定义POJO对象

4.3 后台表格页面分析

1. 页面请求路径，其中包含分页的参数。
   

2. 页面js

data-options="singleSelect:false,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar"

4.4 定义表格回显格式

表格回显格式

根据json格式定义VO对象

4.5 编辑Controller

@Controller
@RequestMapping("/item")
public class ItemController {
	
	@Autowired
	private ItemService itemService;
	
	//根据分页实现商品列表查询  /item/query?page=1&rows=20
	@RequestMapping("/query")
	@ResponseBody
	public EasyUIResult findItemByPage(int page,int rows){
		
		return itemService.findItemByPage(page,rows);
	}
}

4.6 编辑service

@Service
public class ItemServiceImpl implements ItemService {
	
	@Autowired
	private ItemMapper itemMapper;

	
	@Override
	public EasyUIResult findItemByPage(int page, int rows) {
		//1.获取商品记录总数
		int total = itemMapper.findItemCount();
		
		/**
		 * 2.实现分页查询
		 * sql:SELECT * FROM tb_item LIMIT 起始记录数,每页记录数
		 * 第一页  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,20
		 */
		int start = (page - 1) * rows;
		List<Item> itemList = 
				itemMapper.findItemByPage(start,rows);
		return new EasyUIResult(total, itemList);
	}
}

4.7 编辑Mapper接口/映射文件

mapper接口

public interface ItemMapper {
	/**
	 * @Select  @Update  @Delete @Insert
	 */
	@Select("select count(*) from tb_item")
	int findItemCount();
	
	/**
	 * 规定:mybatis中要求,只能单值传参.
	 * 思路:将多值转化为单值
	 * 		1.封装pojo对象
	 * 		2.封装集合数据 array  List Map
	 * 
	 		@Param("start")int start
	 		表示将参数封装为Map集合
	 * @param start
	 * @param rows
	 * @return
	 */
	List<Item> findItemByPage(@Param("start")int start, 
			@Param("rows")int rows);
}

映射文件

<mapper namespace="com.jt.manage.mapper.ItemMapper">
	<!--
		ctrl + shift +y  小写
		ctrl + shift +x  大写
	  -->
	<select id="findItemByPage" resultType="Item">
		select * from tb_item order by updated desc limit #{start},#{rows}
	</select>
</mapper>

5 商品数据格式转换

5.1 格式化价格

分析

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

说明
该配置表示将回传的价格进行格式化。

5.2 格式化时间

5.3 格式化商品分类目录

问题描述
因为在数据库中商品分类目录保存的是商品分类的id号，如果直接以id的形式展现给客户颇为不合理，需要将id转化为商品分类名称。

1. 编辑页面js

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

5.4 编辑后台controller

/**
	 * 根据商品分类id查询商品分类名称  iso-8859-1
	 * 
	 * 使用@ResponseBody注解时,
	 * 	  如果回传数据是String 则默认的解析规则ISO-8859-1
	 * 	  如果回传的数据是对象 则采用UTF-8格式编码
	 * 
	 * 原因:
	 * 	public class StringHttpMessageConverter extends AbstractHttpMessageConverter<String> {

		public static final Charset DEFAULT_CHARSET = Charset.forName("ISO-8859-1");
		
		public abstract class AbstractJackson2HttpMessageConverter extends AbstractHttpMessageConverter<Object>
		implements GenericHttpMessageConverter<Object> {
		public static final Charset DEFAULT_CHARSET = Charset.forName("UTF-8");
	 * @param itemId
	 * @return
	 */
	@RequestMapping(value="/cat/queryItemName",produces="text/html;charset=UTF-8")
	@ResponseBody
	public String findItemCatById(Long itemId){
		
		return itemService.findItemCatById(itemId);
	}

5.5 编辑service

@Override
public String findItemCatById(Long itemId) {
	
	return itemMapper.findItemCatById(itemId);
}

5.6 编辑Mapper

@Select("select name from tb_item_cat where id = #{itemId}")
String findItemCatById(Long itemId);

6 完整项目代码

链接:https://pan.baidu.com/s/1qerRCYQ5E1BDnvqTVpMGoQ
密码:7630