京淘Day05

最新推荐文章于 2023-07-10 14:17:15 发布
最新推荐文章于 2023-07-10 14:17:15 发布
阅读量140 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beloved85/article/details/109483078
版权

1.京淘商品后台管理实现

1.1 商品列表展现

1.1.1 商品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;			//商品价格 double精度问题  num *100 /100  long
	private Integer num;			//商品数量
	private String barcode;			//条形码
	private String image;			//商品图片信息   1.jpg,2.jpg,3.jpg
	private Long   cid;				//表示商品的分类id
	private Integer status;			//1正常，2下架
	
	//为了满足页面调用需求,添加get方法
	public String[] getImages(){
		
		return image.split(",");
	}
}

1.1.2 表格数据页面结构

<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.1.3 请求URL地址

说明:如果采用UI框架并且添加了分页插件,则会自动的形成如下的URL请求地址
在这里插入图片描述

1.1.4 编辑ItemController

package com.jt.controller;

import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.RestController;

@RestController	//返回值都是JSON数据
@RequestMapping("/item")
public class ItemController {
	
	@Autowired
	private ItemService itemService;

	/**
	 * 业务需求:
	 * 	以分页的形式查询商品列表信息.
	 * 业务接口文档:
	 *  	url地址: http://localhost:8091/item/query?page=1&rows=20
	 * 		参数信息:  page 当前页数    rows 每页展现的行数
	 * 		返回值:  EasyUITable对象
	 *  	方法1:  手写sql方式实现分页
	 *  	方法2:  利用MP方式实现分页
	 */
	@RequestMapping("/query")
	public EasyUITable findItemByPage(int page,int rows){

		return  itemService.findItemByPage(page,rows);
	}
	
	
}

1.1.5 编辑ItemService

package com.jt.service;

import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.jt.mapper.ItemMapper;

import java.util.List;

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


	/*
	SELECT * FROM tb_item LIMIT 0, 20   /*第一页 0-19
	SELECT * FROM tb_item LIMIT 20,20   /*第二页 20-39
	SELECT * FROM tb_item LIMIT 40,20   /*第三页 40-59
	SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS  40-59*/

	/**
	 * 1.后端查询数据库记录
	 * 2.将后端数据通过业务调用转化为VO对象
	 * 3.前端通过VO对象的JSON进行数据的解析
	 *
	 *执行的sql:
	 * 	select * from tb_item  order by updated  desc LIMIT 0, 20
	 * @param page
	 * @param rows
	 * @return
	 */
	@Override
	public EasyUITable findItemByPage(int page, int rows) {
		//1.total  获取数据库总记录数
		long total = itemMapper.selectCount(null);
		//2.rows   商品分页查询的结果
		int startNum = (page-1)*rows;
		List<Item> itemList = itemMapper.findItemByPage(startNum,rows);
		//3.将返回值结果封装
		return new EasyUITable(total,itemList);
	}
}

1.1.6 编辑ItemMapper

手动编辑分页操作

public interface ItemMapper extends BaseMapper<Item>{

    //注意事项: 以后写sql语句时 字段名称/表名注意大小写问题.
    @Select("SELECT * FROM tb_item  ORDER BY updated  DESC LIMIT #{startNum}, #{rows}")
    List<Item> findItemByPage(int startNum, int rows);
}

1.2 MybatisPlus实现分页查询

1.2.1 编辑业务调用

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

	@Override
	public EasyUITable findItemByPage(int page, int rows) {
		//1.需要使用MP的方式进行分页
		IPage<Item> iPage = new Page<>(page,rows);
		QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
		queryWrapper.orderByDesc("updated");
		//MP通过分页操作将分页的相关数据统一封装到IPage对象中
		iPage = itemMapper.selectPage(iPage,queryWrapper);
		return new EasyUITable(iPage.getTotal(),iPage.getRecords());
	}
}

1.2.2 编辑MyBatisPlus配置类

说明:在jt-common中添加MP的配置文件

package com.jt.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration  //标识配置类
public class MybatisPlusConfig {

    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量，默认 500 条，-1 不受限制
        // paginationInterceptor.setLimit(500);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }

}

2 商品分类目录实现

2.1 封装POJO对象

@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Long id;         //主键ID
    private Long parentId;   //父级ID
    private String name;     //分类名称
    private Integer status;  //状态
    private Integer sortOrder;  //排序号
    private Boolean isParent;   //是否为父级

}

2.2 页面JS引入过程

2.2.1 引入JS/CSS样式

<%@ 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>

2.2.2 引入common.jsp

在这里插入图片描述

2.3数据格式化

2.3.1 格式化价格

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

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

2.3.2 格式化状态

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

// 格式化商品的状态
	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 '未知';
        }
    },

2.4 格式化商品分类目录

2.4.1 页面结构分析

<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>

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

2.4.2 编辑ItemCatController

@RestController //要求返回JSON数据
@RequestMapping("/item/cat")
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;
    /**
     * 业务: 根据商品分类的ID,查询商品分类的名称
     * url:  /item/cat/queryItemName
     * 参数: itemCatId  商品分类id
     * 返回值: 商品分类名称
     */
    @RequestMapping("queryItemName")
    public String findItemCatName(Long itemCatId){

        return itemCatService.findItemCatName(itemCatId);
    }

}

2.4.2 编辑ItemCatService

package com.jt.service;

import com.jt.mapper.ItemCatMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ItemCatServiceImpl implements ItemCatService{

    @Autowired
    private ItemCatMapper itemCatMapper;

    @Override
    public String findItemCatName(Long itemCatId) {

        return itemCatMapper.selectById(itemCatId).getName();
    }
}

2.4.3 页面效果展现

在这里插入图片描述

2.4.3 ajax嵌套问题

说明:如果在ajax内部再次嵌套ajax请求,则需要将内部的ajax请求设置为同步状态
核心原因:页面需要刷新2次都是只刷新一次

2.5关于页面工具栏说明(看懂即可)

1.页面调用
	<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">

2.定义工具栏
var toolbar = [{
        text:'新增',
        iconCls:'icon-add',
        handler:function(){
            //.tree-title 查找页面中class类型为tree-title的元素
            //:contains('新增商品')  在所有的class的类型中查找文件元素为"新增商品"的元素
            //parent()  选中元素的父级元素
            //.click()  执行点击的动作
        	$(".tree-title:contains('新增商品')").parent().click();
        }
    },{.....}]

2.5.1 jQuery基本用法

1.选择器 在整个html页面 根据某些特定的标识 准确的定位元素的位置
1.Id选择器 $("#元素的Id")
2.元素(标签)选择器 $(“tr”)
3.类选择器 $(".class的名称")[{},{},{}]

3.商品分类目录树形结构展现

3.1ItemCat表结构设定

问题分析:商品分类信息一般分为3级 问题:如何确定父子级关系的呢?
答:通过定义父级的字段实现
在这里插入图片描述

3.2 3级表数据的分析

说明:通过parentId根据父级的ID查询的自己信息 当查询一级菜单时parentId=0;

/*查询一级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=0;
/*查询二级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=495;
/*查询三级分类信息 父级ID=0*/
SELECT * FROM tb_item_cat WHERE parent_id=529;

3.3. EasyUI中树形结构说明

1.页面JS

$("#tree").tree({
			url:"tree.json",		//加载远程JSON数据
			method:"get",			//请求方式  POST
			animate:false,			//表示显示折叠端口动画效果
			checkbox:true,			//表述复选框
			lines:false,				//表示显示连接线
			dnd:true,				//是否拖拽
			onClick:function(node){	//添加点击事件
				
				//控制台
				console.info(node);
			}
		});

2.返回值说明

[
	{
		"id":"1",
		"text":"吃鸡游戏",
		"state":"closed"
	},
	{
		"id":"1",
		"text":"吃鸡游戏",
		"state":"closed"
	}
]

3.4 封装树形结构VO对象

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree implements Serializable {
    private Long id;       //节点ID
    private String text;   //节点名称
    private String state;  //节点状态

}

3.5 页面JS结构说明

在这里插入图片描述

3.6 异步树加载说明

树控件读取URL,子节点的加载依赖于父节点的状态,当展开一个封闭的节点,如果节点没有加载节点,它将会把节点id的值作为http请求参数并命名为"id",通过URL发送到服务器上面检索子节点

在这里插入图片描述

3.7编辑ItemCatController

 /**
     * 业务: 实现商品分类的查询
     * url地址: /item/cat/list
     * 参数:   id: 默认应该0 否则就是用户的ID
     * 返回值结果: List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(Long id){
        Long parentId = (id==null)?0:id;
        return itemCatService.findItemCatList(parentId);
    }

3.8编辑ItemCatService

 @Override
    public List<EasyUITree> findItemCatList(Long parentId) {
        //1.准备返回值数据
        List<EasyUITree> treeList = new ArrayList<>();
        //思路.返回值的数据从哪来? VO  转化 POJO数据

        //2.实现数据库查询
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("parent_id",parentId);
        List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);

        //3.实现数据的转化  catList转化为 treeList
        for (ItemCat itemCat : catList){
            long id = itemCat.getId();  //获取ID值
            String text = itemCat.getName();    //获取商品分类名称
            //判断:如果是父级 应该closed  如果不是父级 则open
            String state = itemCat.getIsParent()?"closed":"open";
            EasyUITree easyUITree = new EasyUITree(id,text,state);
            treeList.add(easyUITree);
        }

        return treeList;
    }

3.9 页面效果展现

在这里插入图片描述

捣蛋调皮鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
互联网大项目第三天(共21天)-使用easyUI实现商品信息的分页展示
汤小萌的博客
05-03 1010
1.使用restFul的方式实现页面的跳转: 看一下后台的页面是的请求路径: &lt;span&gt;商品管理&lt;/span&gt; &lt;ul&gt; &lt;li data-options="attributes:{'url':'/page/item-add'}"&gt;新增商品&lt;/li&gt; &lt;li data-o..
京淘商城后台管理系统
kk9106的博客
09-09 3232
京淘商城京淘商城后台管理系统登录、注册界面商品管理新增商品查询商品规格参数网站内容管理内容分类管理内容管理账户管理管理员账户管理普通用户账户管理个人信息习得总结实习总结项目总结心得体会 京淘商城后台管理系统 基于SpringBoot架构搭建京淘后台管理系统，通过MySQL数据库技术实现在CentOS7中通过docker将项目上传。项目具体实现流程是先将数据保存到本地仓库，再将本地仓库中的数据打包成镜像文件上传到中央仓库，每次需要数据的时候再从中央仓库拉取。 登录、注册界面 通过表单将用户登录的数据与数据库
MybatisPlusConfig配置
yulingli42的博客
07-10 1579
setLimit(-1) 设置最大单页限制数量为 -1，表示不受限制，可以返回任意数量的记录。MybatisPlusConfig 类定义了一个名为 paginationInterceptor 的 Bean，并通过 @Bean 注解标记该方法将返回一个对象，Spring会将其注册为一个 Bean。”) 注解用于扫描指定包下的 Mapper 接口，将其注册为 Spring Bean，使其可以被其他组件自动注入使用。@Configuration 注解表示这是一个配置类，Spring会自动识别并加载该类的配置。
cgb2007-京淘day05
qq_16804847的博客
11-03 7145
1.展现商品列表信息 2.实现商品分类信息回显 3.展现商品的树形结构 4.实现商品新增操作
SpringBoot 项目中 MyBatis Plus 的常用配置总结
longlongbug的博客
01-16 2万+
public class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor paginationInterceptor = new PaginationInterceptor(); // 设置...
day05-Elasticsearch01
12-13
day05-Elasticsearch01
day05-Elasticsearch01day05-Elasticsearch01
10-25
day05-Elasticsearch01day05-Elasticsearch01
day05作业123
07-13
以前的作业拿出来看了看,感觉还可以吧,有时间你也做做看呀
day05-店铺营业状态设置
11-03
day05-店铺营业状态设置
Hive进阶Day05
最新发布
04-14
Hive进阶Day05
电商项目中遇到的经典问题
热门推荐
qq_42575330的博客
01-13 2万+
请描述一下这个系统？ 【回答技巧】 从3个方面来回答这个问题： |--系统背景及系统概述 |--系统包括的业务模块及主业务流程 |--责任模块 【回答示例】 第一个方面：系统背景及系统概述 优购时尚商城是香港上市公司百丽国际公司为拓宽旗下运动品牌服饰市场而开发的一个专业销售购物网站户外运动装备的网站。   第二个方面：系统包括的业务模块及主业务流程 改项目分为前台和后天2大模...
mbatis-puls学习笔记
weixin_46858088的博客
10-03 161
测试准备 @Test public void addUser(){ User user =new User(); user.setName(""); user.setAge(); }
mybatis-plus 4 其他特性
小水牛的博客
09-08 542
mybatis-plus 4
DateTimeFormatter时间格式化-java8新特性
苏北怀瑾
07-20 9747
在java8之前我们都用SimpleDateFormat类来进行时间格式化，但这种存在一些缺点： 1.每处理一次时间都new一个SimpleDateFormat实例对象会占用大量的内存和jvm空间 2.为了减少内存开销，我们可以使用static将其设置为共享变量，但SimpleDateFormat是线程不安全的，需要通过加锁的方式来解决 java8之后为我们提供了DateTimeFormatter类代替SimpleDateFormat，这是一个线程安全的格式化工具类。具体使用如下： //字符串转换为日期.
富文本框KindEditor的使用技巧
知他人之所知，晓他人之不晓。
04-24 2万+
富文本框KindEditor的使用技巧 最近在项目中经常遇到使用富文本框的情况，当然我们所接触的富文本.框有很多，我个人还是比较偏向于KE(KindEditor)),用起来比较舒服，但是很多新手在用的时候往往会感到不知所措。总感觉API写了很多但是就是不知道怎么去用，今天我就和大家讲讲KE的使用和基本技巧： 第一步：我们需要到官网上引用相关的资源包，点击进入官网下载资源包第二步：引用资源文件如图
Mybatis-Plus 深入总结
qq_24692021的博客
12-01 326
MyBatis-Plus（简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。 基本特性 无侵入：只做增强不做改变，引入它不会对现有工程产生影响，如丝般顺滑 损耗小：启动即会自动注入基本 CURD，性能基本无损耗，直接面向对象操作 强大的 CRUD 操作：内置通用 Mapper、通用 Service，仅仅通过少量配置即可实现单表大部分 CRUD 操作，更有强大的条件构造器，满足各类使用需求
使用Mybatis-Plus进行分页查询,返回的数据中total总是为0的问题?可以参考以下两种解决方案
wlh_150568的博客
05-08 1万+
一、创建一个类注入PaginationInterceptor @Configuration public class MybatisPlusConfig { /** * 分页插件 */ @Bean public PaginationInterceptor paginationInterceptor() { return new Pa...
springmvc—js文件没有找不到，报错jquery-2.1.1.min.js:4 GET http://localhost:9090/api/get/list?page=1&page_size=
weixin_43543742的博客
05-25 4049
我遇到这个错时，清除了一下缓存，重启了服务就好了，你可以试试 原文章地址：https://blog.csdn.net/qq_43201542/article/details/84964232
商品栏后台搭建-001
墨白千秋
07-07 354
略
note_spark_day05：spark core
03-16
Spark Core是Spark的核心组件，它提供了分布式任务调度、内存计算和数据存储等功能。Spark Core的主要特点是支持内存计算，能够将数据存储在内存中，从而提高计算速度。同时，Spark Core还支持多种数据源，包括HDFS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值