商城项目文档四

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中的地址.
在这里插入图片描述

4.7.3 编辑ItemController

在这里插入图片描述

4.7.4 编辑ItemService

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值