04---项目后端业务实现

我会带着你远行 2023-03-01 12:42 47阅读 0赞

> 需要项目资料的私信留言，留下邮箱或者发邮件到 daniel-work@qq.com（备注好哪个项目资料）

### 文章目录 ###

*  一、京淘后端页面介绍
 *   *  1.1 页面跳转说明
     *   *  1.1.1 系统首页跳转说明
     *  1.2 EasyUI介绍
     *   *  1.2.1 页面布局
         *  1.2.2 树形结构
         *  1.2.3 选项卡技术
     *  1.3 通用页面跳转实现
     *   *  1.3.1 页面结构说明
         *  1.3.2 编辑IndexController
     *  1.4 EasyUI表格数据展现
     *   *  1.4.1 POJO对象说明
         *  1.4.2 EasyUI表格数据入门案例
         *  1.4.3 定义EasyUITrable VO对象
     *  1.5 JSON复习
     *   *  1.5.1 什么是JSON
         *  1.5.2 Object格式
         *  1.5.3 Array格式
         *  1.5.4 "复杂"格式 (嵌套格式)
 *  二、项目商品列表展现
 *   *  2.1 业务分析
     *   *  2.1.1 页面分析
         *  2.1.2 参数分析
         *  2.1.3 编辑ItemController
         *  2.1.4 编辑UserService
         *  2.1.5 编辑UserMapper
         *  2.1.6 页面效果展现
     *  2.2 Mybatis-plus分页实现
     *   *  2.2.1编辑配置类
         *  2.2.2 编辑ItemService
 *  三、商品分类信息展现
 *   *  3.1 格式化价格
     *   *  3.1.1 页面结构标识
         *  3.1.2 查看common.js
     *  3.2 格式化时间
     *   *  3.2.1 页面标识
         *  3.2.2 编辑common.js
     *  3.3 格式化商品分类目录
     *   *  3.3.1 业务说明
         *  3.3.2 页面标识
         *  3.3.3 编辑ItemCat POJO
         *  3.3.4 编辑ItemCatController
         *  3.3.5 编辑ItemCatService
         *  3.3.6 页面效果展现
         *  3.3.7 关于ajax嵌套问题说明

# 一、京淘后端页面介绍 #

## 1.1 页面跳转说明 ##

### 1.1.1 系统首页跳转说明 ###

问题:`http://localhost:8091/` 回车之后可以展现正常的页面信息. 如何跳转的页面,跳转的是哪个页面???  
![在这里插入图片描述][20200725222758480.png]  
`http://localhost:8091/`\------`template`\-----`添加index请求`\----->`/WEB-INF/views/index.jsp`  
**说明：** 如果将来想通过默认的访问路径跳转首页,则将页面名称改为index.之后配置视图解析器的前后缀即可.

## 1.2 EasyUI介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]

### 1.2.1 页面布局 ###

### 1.2.2 树形结构 ###

### 1.2.3 选项卡技术 ###

## 1.3 通用页面跳转实现 ##

### 1.3.1 页面结构说明 ###

如果需要跳转页面,需要页面中发起ajax请求.之后在Controller中需要接收改请求.  
想法：能否利用一个Controller方法,实现通用页面跳转.

### 1.3.2 编辑IndexController ###

@Controller
    public class IndexController { 
    	
    	/** * 1.url地址:/page/item-add * /page/item-list * /page/item-param-list * 需求:使用一个方法实现页面跳转 * * 实现: RestFul风格 * 语法: * 1.使用/方式分割参数. * 2.使用{}包裹参数 * 3.在参数方法中 动态接收参数时使用特定注解@PathVariable * 注解: @PathVariable * name/value 表示接收参数的名称 * required 改参数是否必须 默认true * restFul风格2: * 思路:利用通用的url地址,实现不同的业务调用 * 例子1: http://www.jt.com/user?id=1 查询 GET * 例子2: http://www.jt.com/user?id=1 删除 DELETE * 例子3: http://www.jt.com/user?id=1&name=xxx 更新 PUT * 例子4: http://www.jt.com/user 新增操作 POST * * @RequestMapping(value = "/user",method = RequestMethod.POST) @PostMapping("/user") * * 总结: * 一般在工作中有2种用法. * 作用1: 动态获取url路径中的参数 * 作用2: 以统一的url地址,不同的请求类型,实现不同业务的调用. * 一般都会添加请求类型进行标识.为了安全. */
    	
    	@RequestMapping("/page/{moduleName}")
    	public String moduleName(@PathVariable String moduleName) { 
    		
    		return moduleName;
    	}
    	
    	/* * //@RequestMapping(value = "/user",method = RequestMethod.POST) * * @PostMapping("/user") public String insertUser(User user) { //入库 } * * @RequestMapping(value = "/user",method = RequestMethod.GET) public User * selectUser(int id) { //入库 } */
    }

## 1.4 EasyUI表格数据展现 ##

### 1.4.1 POJO对象说明 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

### 1.4.2 EasyUI表格数据入门案例 ###

（1）页面表格设计

<div>
    	定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
    	<table class="easyui-datagrid" style="width:500px;height:300px" 
    	data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,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>

（2）表格数据返回值格式

{ 
    	"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"}
    	]
    }

### 1.4.3 定义EasyUITrable VO对象 ###

真理：学习任何的UI框架 按照指定的格式返回数据即可.  
说明：改对象只要的作用于页面数据进行交互.,并且返回值的json串要求是指定的格式.

@Data
    @NoArgsConstructor
    @AllArgsConstructor
    @Accessors(chain = true)
    public class EasyUITable { 
    	private Integer total;
    	private List<Item> rows;
    }

## 1.5 JSON复习 ##

### 1.5.1 什么是JSON ###

JSON(JavaScript Object Notation, JS 对象简谱) **是一种轻量级的数据交换格式**。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

### 1.5.2 Object格式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]

例子:  { "id":"1","name":"tomcat猫"}

### 1.5.3 Array格式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]

例子:  ["100","A","B"]

### 1.5.4 "复杂"格式 (嵌套格式) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]

例子:["1","2","3",true,false,["吃","喝",{ "id":"101","hobbys":["打游戏","敲代码","看美女"]}]]

# 二、项目商品列表展现 #

## 2.1 业务分析 ##

### 2.1.1 页面分析 ###

说明：`url：/item/query` 当js解析改行代码,发起get类型的ajax请求.

### 2.1.2 参数分析 ###

![在这里插入图片描述][20200725224738490.png]  
返回值: VO对象 EasyUITable.

### 2.1.3 编辑ItemController ###

package com.jt.controller;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.jt.pojo.EasyUITable;
    import com.jt.service.ItemService;
    
    @RestController	//返回数据时不需要经过视图解析器.
    @RequestMapping("/item")
    public class ItemController { 
    	
    	@Autowired
    	private ItemService itemService;
    	
    	/** * 业务: 展现商品列表数据,以EasyUI表格数据展现 * url地址: http://localhost:8091/item/query?page=1&rows=20 * 参数: page=1&rows=20 * 返回值: EasyUITable VO对象 */
    	@RequestMapping("/query")
    	public EasyUITable findItemByPage(Integer page,Integer rows) { 
    		return itemService.findItemByPage(page,rows);
    	}
    }

### 2.1.4 编辑UserService ###

@Service
    public class ItemServiceImpl implements ItemService { 
    
    	@Autowired
    	private ItemMapper itemMapper;
    
    	/** * 分页sql: select xxxxx,xxxx from tb_item limit 起始位置,查询记录数 * 查询第一页: 规则:含头不尾特点 * select xxxxx,xxxx from tb_item limit 0,20 0-19 * select xxxxx,xxxx from tb_item limit 20,20 20-39 * select xxxxx,xxxx from tb_item limit 40,20 40-59 * 等差数列第N项: (page-1)*rows */
    	@Override
    	public EasyUITable findItemByPage(Integer page, Integer rows) { 
    		//1.获取记录总数
    		int total = itemMapper.selectCount(null);
    		
    		//2.查询分页后的结果
    		int start = (page-1) * rows;
    		List<Item> itemList = itemMapper.selectItemByPage(start,rows);
    
    		return new EasyUITable(total, itemList);
    	}
    }

### 2.1.5 编辑UserMapper ###

public interface ItemMapper extends BaseMapper<Item>{ 
    	@Select("select * from tb_item order by updated desc LIMIT #{start},#{rows}")
    	List<Item> selectItemByPage(Integer start, Integer rows);
    }

### 2.1.6 页面效果展现 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]

## 2.2 Mybatis-plus分页实现 ##

### 2.2.1编辑配置类 ###

//表示配置类 .xml 配置文件
    @Configuration	
    public class MybatisPlusConfig { 
    	
    	//一般和bean注解联用 ,表示将返回的对象实例化之后,交给spring容器管理
    	@Bean
    	public PaginationInterceptor paginationInterceptor() { 
    		
    		return new PaginationInterceptor();
    	}
    }

### 2.2.2 编辑ItemService ###

/** * 利用MP的方式查询数据记录 * current:查询第几页 * size: 每页记录数 */
    @Override
    public EasyUITable findItemByPage(Integer page, Integer rows) { 
    	//1.定义分页对象
    	Page<Item> mpPage = new Page<>(page, rows);
    	//2.定义条件构造器
    	QueryWrapper<Item> queryWrapper = new QueryWrapper<Item>();
    	//3.要求:按照更新时间,进行排序 降序排列.
    	queryWrapper.orderByDesc("updated");
    	//执行分页操作,之后封装Page对象数据
    	mpPage = itemMapper.selectPage(mpPage, queryWrapper);
    	
    	int total = (int) mpPage.getTotal();
    	List<Item> items = mpPage.getRecords(); //获取当前分页记录
    	return new EasyUITable(total, items);
    }

# 三、商品分类信息展现 #

## 3.1 格式化价格 ##

### 3.1.1 页面结构标识 ###

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

### 3.1.2 查看common.js ###

// 格式化价格 数据库价格/100 保留2位小数
    formatPrice : function(val,row){ 
    	return (val/100).toFixed(2);
    },

## 3.2 格式化时间 ##

### 3.2.1 页面标识 ###

### 3.2.2 编辑common.js ###

// 格式化时间
    formatDateTime : function(val,row){ 
    	var now = new Date(val);
       	return now.format("yyyy-MM-dd hh:mm:ss");
    },

## 3.3 格式化商品分类目录 ##

### 3.3.1 业务说明 ###

**说明：** 当用户展现商品分类信息时,应该展现的是具体商品分类名称,而不是编号.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]

### 3.3.2 页面标识 ###

页面JS

//格式化名称 根据商品分类ID查询名称
     findItemCatName : function(val,row){ 
       	var name;
       	$.ajax({ 
       		type:"get",   //查询一般为get请求
       		url:"/item/cat/queryItemName",
       		data:{ itemCatId:val},	//参数信息
       		cache:true,    //缓存
       		async:false,    //表示同步 默认的是异步的true
       		dataType:"text",//表示返回值参数类型
       		success:function(data){ 
           		name = data;
           	}
       	});
       	return name;
    },

### 3.3.3 编辑ItemCat POJO ###

//!!!! POJO等实体对象,一般都使用包装类型,
    @Data
    @Accessors(chain = true)
    @TableName("tb_item_cat") //关联商品分类表
    public class ItemCat  extends BasePojo{ 
    	@TableId(type = IdType.AUTO) //主键自增
    	private Long id;
    	private Long parentId;
    	private String name;
    	private Integer status;	//1正常，2删除
    	private Integer sortOrder;	//排序号
    	private Boolean	isParent;   //0 false !0 真 
    	
    }

### 3.3.4 编辑ItemCatController ###

**说明：** 根据ItemCat的Id查询商品分类名称.

package com.jt.controller;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.jt.pojo.ItemCat;
    import com.jt.service.ItemCatService;
    
    @RestController
    @RequestMapping("/item/cat")
    public class ItemCatController { 
    	
    	@Autowired
    	private ItemCatService itemCatService;
    
    	/** * 业务:查询商品分类名称 根据id * url地址: http://localhost:8091/item/cat/queryItemName?itemCatId=3 * 参数: itemCatId=3 * 返回值: 商品分类名称 */
    	@RequestMapping("/queryItemName")
    	public String findItemCatNameById(Long itemCatId) { 
    		ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
    		return itemCat.getName();
    	}
    }

### 3.3.5 编辑ItemCatService ###

@Service
    public class ItemCatServiceImpl implements ItemCatService { 
    	
    	@Autowired
    	private ItemCatMapper itemCatMapper;
    
    	@Override
    	public ItemCat findItemCatById(Long itemCatId) { 
    		
    		return itemCatMapper.selectById(itemCatId);
    	}
    }

### 3.3.6 页面效果展现 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]

### 3.3.7 关于ajax嵌套问题说明 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]

[20200725222758480.png]: /images/20230208/ea64798b90d445da978eb9ce2e20ff1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20230208/a3e9a756dc9a4d93885a06cfbdf823e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/b9d5eb38db1d413c9c122b39fd9f200e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/13c06eb0187844ad971f62a962b8aed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230208/ab87aec7a8694cc9a3972521838cb9d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230208/a2fb2eebacf34082a7cffcaad86e7aee.png
[20200725224738490.png]: /images/20230208/ba0741e7324f4c90a99682533b7217bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230208/4ce30c87d1a64241bb780eee763271bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230208/75841cce65b34f3ca8e62273cbcecb34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 7]: /images/20230208/78edd24fe6764dc5865006484017b5ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 8]: /images/20230208/555da6ad4b4142a39a7f1341002f8b9d.png