1.商品列表展现
1.1 商品表设计
1.2 手写分页查询
1.2.1 编辑ItemController
@RestController
public class ItemController {
@Autowired
private ItemService itemService;
/**
* 1.实现商品类标展现
* url地址: http://localhost:8091/item/query?page=1&rows=20
* 参数: page页数 rows 行数
* 返回值: EasyUITable
*/
@RequestMapping("/item/query")
public EasyUITable findItemByPage(int page,int rows){
return itemService.findItemByPage(page,rows);
}
}
1.2.2 编辑ItemService
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
/**
* 业务需求: 1.分页查询数据库记录
* 2.封装VO对象
* 作业1: 手写分页的方式实现分页查询 sql
* 作业2: 查看官网API 实现MP分页查询
*
* 分页sql: 每页20条记录
* select * from tb_item limit 起始位置,每页行数.
* 第一页:
* select * from tb_item limit 0,20 0-19
* 第二页:
* select * from tb_item limit 20,20
* 第N页:
* select * from tb_item limit (page-1)*rows,rows
* @param page
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(int page, int rows) {
//1.获取记录总数
long total = itemMapper.selectCount(null);
//2.手写分页
int start = (page - 1) * rows;
List<Item> itemList = itemMapper.findItemByPage(start,rows);
return new EasyUITable(total,itemList);
}
}
1.3 MP方式实现分页
1.3.1 编辑ItemService
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
@Override
public EasyUITable findItemByPage(int page, int rows) {
IPage<Item> iPage = new Page<>(page,rows);
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.orderByDesc("updated");
//使用接口 包装分页数据
iPage = itemMapper.selectPage(iPage,queryWrapper);
long total = iPage.getTotal();
List<Item> itemList = iPage.getRecords();
return new EasyUITable(total,itemList);
}
}
1.3.2 编辑配置类
2.实现商品分类回显
2.1 格式化价格
2.1.1 编辑页面HTML
价格2.1.2 编辑JS
2.2 格式化状态
2.2.1 编辑页面html
状态 ## 2.2.2 编辑页面JS ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210322063715319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjAyMjgwNg==,size_16,color_FFFFFF,t_70)2.3 格式化商品分类
2.3.1 编辑页面html
叶子类目2.3.2 编辑页面JS
2.3.3 编辑ItemCat POJO
2.3.4 编辑ItemCatController
@RestController
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* 业务需求: 根据id查询商品分类信息
* url地址: http://localhost:8091/item/cat/queryItemName?itemCatId=440
* 参数: itemCatId=440
* 返回值: 返回商品分类名称
*/
@RequestMapping("/item/cat/queryItemName")
public String findItemCatName(Long itemCatId){
ItemCat itemCat =
itemCatService.findItemCatName(itemCatId);
return itemCat.getName();
}
}
2.3.4 编辑ItemCatService
package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public ItemCat findItemCatName(Long itemCatId) {
return itemCatMapper.selectById(itemCatId);
}
}
2.3.5 页面效果展现
2.3.6 关于Ajax嵌套说明
2.4 关于SpringMVC 参数传递问题
2.4.1 常规参数提交
1.GET请求方式 http://manage.jt.com/findUserById?id=100
2.POST请求方式 http://manage.jt.com/findUserById 简写(form:id=100)
参数接收:
@RequestMapping("/findUserById")
public xxxx findXXX(Long id){…}
2.4.2 RESTFul方式
GET请求方式 http://manage.jt.com/findUserById/100
参数接收:
@RequestMapping("/findUserById/{id}")
public xxxx findXXX(@PathVariable Long id){…}
2.4.3 SpringMVC参数传递的实质
3 商品分类展现
3.1 关于弹出框效果说明
3.1.1 简单弹框
3.1.2 消息确认框
3.2 商品分类页面展现
3.2.1 分类弹框
3.2.2 商品分类数据结构
/一级菜单的父级ID=0/
SELECT * FROM tb_item_cat WHERE parent_id=0
/二级/
SELECT * FROM tb_item_cat WHERE parent_id=1
/三级/
SELECT * FROM tb_item_cat WHERE parent_id=51
3.2.3 树形结构入门案例
3.2.3.1 页面JS分析
3.2.3.2 页面JSON结构
树形结构的JSON:
[{"id":100,"text":"节点名称","state":"closed/open"}]
3.2.4 封装EasyUITree
3.2.4 异步树加载
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为’id’,通过URL发送到服务器上面检索子节点。
3.2.4 编辑ItemCatController
/**
* 实现商品分类树形结构展现
* 1. url地址 /item/cat/list
* 2. 请求参数 parent_id=0
* 3. 返回值结果 List
* http://localhost:8091/item/cat/list?id=1
*
*/
@RequestMapping(“list”)
public List findItemCatList(Long id){
long parentId = (id==null)?0:id;
return itemCatService.findItemCatList(parentId);
}
3.2.5 编辑ItemCatService
/**
* 1.根据parentId 查询数据库记录
* 2.将数据库的List集合转化为VO对象的集合.
*
* @param parentId
* @return
*/
@Override
public List findItemCatList(Long parentId) {
List treeList = new ArrayList<>();
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq(“parent_id”, parentId);
List catList = itemCatMapper.selectList(queryWrapper);
for (ItemCat itemCat : catList){
long id = itemCat.getId();
String text = itemCat.getName();
String state = itemCat.getIsParent()?"closed":"open";
//是父级先关闭用户需要再打开
EasyUITree easyUITree = new EasyUITree(id,text,state);
treeList.add(easyUITree);
}
return treeList;
}
3.2.6 页面效果展现
4.商品管理
4.1 商品新增
4.1.1 封装系统返回值
package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.io.Serializable;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult implements Serializable {
private Integer status; //200成功 201失败
private String msg; //服务器返回提示信息
private Object data; //服务器返回的数据
public static SysResult fail(){
return new SysResult(201, "服务器执行失败", null);
}
public static SysResult success(){
return new SysResult(200, "执行成功", null);
}
public static SysResult success(Object data){
return new SysResult(200, "服务器执行成功", data);
}
public static SysResult success(String msg,Object data){
return new SysResult(200, msg, data);
}
}
4.1.2 新增页面说明
4.1.3 编辑ItemController
4.1.3 编辑ItemService
4.2 全局异常处理机制
package com.jt.aop;
import com.jt.vo.SysResult;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@RestControllerAdvice
public class SysResultException {
/**
* 当程序遇到什么样的异常时,程序开始执行
* 应该返回什么样的数据 SysResult
*/
@ExceptionHandler(RuntimeException.class)
public SysResult fail(Exception e){
e.printStackTrace();
return SysResult.fail();
}
}
4.3 MP实现自动填充
4.3.1 业务需求
说明: 当完成数据库操作时,如果遇到增/修改操作时,应该自动的维护时间关系.
例如: 新增时 自动赋值创建时间/更新时间 insert into
更新时 自动的赋值更新时间 update
4.3.2 编辑配置文件
@Component
public class MyMetaObjectHandler implements MetaObjectHandler {
@Override //新增自动填充
public void insertFill(MetaObject metaObject) {
Date date = new Date();
this.setFieldValByName("created",date,metaObject);
this.setFieldValByName("updated",date,metaObject);
}
@Override //更新自动填充
public void updateFill(MetaObject metaObject) {
this.setFieldValByName("updated",new Date(),metaObject);
}
}
4.3.3 绑定自动填充
4.4 商品更新回显操作
4.4.1 工具栏菜单说明
4.4.2 修改菜单说明
4.4.3 实现修改页面商品分类回显
实现思路: 根据商品分类ID,查询名称实现数据回显.
4.5 实现商品修改操作
4.5.1 编辑页面JS
4.5.2 编辑ItemController
4.5.3 编辑ItemService
4.6 实现商品删除
4.6.1 页面JS分析
4.6.2 编辑ItemController
4.6.3 编辑ItemService
4.6.4 编辑ItemMapper
4.7 商品上架/下架操作
4.7.1 页面分析
URL1: /item/instock 下架操作
URL2: /item/reshelf 上架操作
4.7.2 修改页面JS
根据上架/下架操作,修改请求url中的地址.