cgb2008-京淘day04
此文转载自:https://blog.csdn.net/qq_16804847/article/details/110221313#commentBox
1. 京淘后台页面分析(了解)
2. 商品列表展现
2.1 Item表分析
2.2 JSON说明
2.2.1 什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON本质是String
2.2.2 Object格式
2.2.3 Array格式
2.2.4 嵌套格式
//1.object格式
{id:1,name:"tomcat猫"...}//2.array格式
[1,2,3,"打游戏","写代码"]//3.嵌套格式 value可以嵌套 四层嵌套json
{"id":1,"name":"哈利波特","hobbys":["敲代码","学魔法","喜欢赫敏","打伏地魔"],
"method":[{"type":"火系","name":"三味真火"},{"type":"水系","name":"大海无量"}]}
2.3 表格数据展现
2.3.1 JSON结构
2.3.2 编辑EasyUITable VO对象
说明: 对象转化为JSON 调用的是get方法. JSON转护为对象时调用set方法
2.3.3 表格页面分析
说明:当添加了分页插件之后,当ajax程序解析时会动态的拼接参数.
2.3.4 编辑ItemController
package com.jt.controller;import com.jt.pojo.Item;
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.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController //表示返回数据都是JSON
@RequestMapping("/item")
public class ItemController {@Autowiredprivate ItemService itemService;/*** 业务: 分页查询商品信息.* url: http://localhost:8091/item/query?page=1&rows=20* 参数: page=1 页数 &rows=20 行数* 返回值: EasyUITable*/@RequestMapping("/query")public EasyUITable findItemByPage(int page,int rows){return itemService.findItemByPage(page,rows);}/*@RequestMapping("/testVO")@ResponseBodypublic EasyUITable testVO(){Item item1 = new Item();item1.setId(1000L).setTitle("饮水机").setPrice(200L);Item item2 = new Item();item2.setId(2000L).setTitle("电冰箱").setPrice(1800L);List<Item> rows = new ArrayList<>();rows.add(item1);rows.add(item2);return new EasyUITable(2000L, rows);}*/}
2.3.4 编辑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 {@Autowiredprivate ItemMapper itemMapper;/*** 分页Sql:* 查询第一页:* select * from tb_item limit 起始位置,查询条数* select * from tb_item limit 0,20 共21个数 index[0,19]* 查询第二页:* select * from tb_item limit 20,20 index[20,39]* 查询第三页:* select * from tb_item limit 40,20* 查询第N页:* * select * from tb_item limit (page-1)rows,20* @param page* @param rows* @return*/@Overridepublic EasyUITable findItemByPage(int page, int rows) {long total = itemMapper.selectCount(null);//1.手写分页int startIndex = (page - 1) * rows;List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);return new EasyUITable(total, itemList);}
}
2.3.5 编辑ItemMapper
public interface ItemMapper extends BaseMapper<Item>{@Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}")List<Item> findItemByPage(int startIndex, int rows);
}
2.3.6 页面效果展现
2.4 MybatisPlus实现分页
2.4.1 编辑ItemService
package com.jt.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
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 {@Autowiredprivate ItemMapper itemMapper;/*** 分页Sql:* 查询第一页:* select * from tb_item limit 起始位置,查询条数* select * from tb_item limit 0,20 共21个数 index[0,19]* 查询第二页:* select * from tb_item limit 20,20 index[20,39]* 查询第三页:* select * from tb_item limit 40,20* 查询第N页:* * select * from tb_item limit (page-1)rows,20* @param page* @param rows* @return*/@Overridepublic EasyUITable findItemByPage(int page, int rows) {/*long total = itemMapper.selectCount(null);//1.手写分页int startIndex = (page - 1) * rows;List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);*///2.利用MP方式实现分页IPage mpPage = new Page(page,rows);QueryWrapper<Item> queryWrapper = new QueryWrapper<>();queryWrapper.orderByDesc("updated");mpPage = itemMapper.selectPage(mpPage,queryWrapper);long total = mpPage.getTotal(); //获取记录总数List<Item> itemList = mpPage.getRecords(); //获取查询当前页return new EasyUITable(total, itemList);}
}
2.4.2 添加配置了类
**package com.jt.config;import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration //bean标签使用
public class MybatisPlusConfig {//将分页拦截器交了Spring容器管理 MP是Mybatis的增强工具@Beanpublic PaginationInterceptor paginationInterceptor(){return new PaginationInterceptor();}
}
**
2.5 数据格式化说明
2.5.1 格式化价格
1.页面JS说明
<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
2.格式化代码
2.5.2 格式化状态
1).页面JS
<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
2).JS分析
2.6 实现商品分类回显
2.6.1 业务需求
说明:当用户展现列表数据时,要求将商品分类信息,进行展现.根据cid返回商品分类的名称
2.6.2 编辑item-list页面
2.6.3 编辑页面JS
编辑 js/common.js
2.6.4 编辑ItemCat POJO对象
在jt-common中添加Itemcat POJO对象
package com.jt.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)private Long id; //主键private Long parentId; //父级IDprivate String name; //名称private Integer status; //状态信息private Integer sortOrder; //排序号private Boolean isParent; //是否为父级/** create table tb_item_cat
(id bigint not null auto_increment,parent_id bigint comment '父ID=0时,代表一级类目',name varchar(150),status int(1) default 1 comment '默认值为1,可选值:1正常,2删除',sort_order int(4) not null,is_parent tinyint(1),created datetime,updated datetime,primary key (id)
);***** */
}
2.6.5 页面URL分析
2.6.6 编辑ItemCatController
package com.jt.controller;import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/item/cat")
public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;/*** 需求: 根据itemCatId查询商品分类名称* url: http://localhost:8091/item/cat/queryItemName?itemCatId=163* 参数: itemCatId=163* 返回值: 商品分类名称*/@RequestMapping("/queryItemName")public String queryItemName(Long itemCatId){ItemCat itemCat = itemCatService.findItemCatById(itemCatId);return itemCat.getName();}}
2.6.7 编辑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{@Autowiredprivate ItemCatMapper itemCatMapper;@Overridepublic ItemCat findItemCatById(Long itemCatId) {return itemCatMapper.selectById(itemCatId);}
}
2.6.8 页面效果展现
2.6.9Ajax嵌套问题
说明: 由于页面中发起2次ajax请求,并且2次Ajax是一种嵌套的关系.
解决方案: 如果遇到ajax嵌套问题 则一般将内部ajax设置为同步状态即可.
扩展知识: JS中闭包概念
3 树形结构展现
3.1 common.js的依赖问题
1.在index.jsp中引入了其他页面
<jsp:include page="/commons/common-js.jsp"></jsp:include>
2.页面引入
3.2 商品分类业务分析
3.2.1 分级说明
一般条件下商品分类分为3级.
3.2.2 表结构设计
3.3 树形结构问题
3.3.1 页面JS
3.3.2 JSON结构
[{"id":100,"text":"tomcat","state":"open/closed"}]
3.3.3 封装 EasyUITree 对象
在jt-manage中添加VO对象
3.4 新增页面分析
3.4.1 页面流转过程
1.点击商品新增按钮
2.发起请求 /page/item-add
3.请求被IndexController中的restFul拦截
4.实现页面跳转 /WEB/INF/views/item-add.jsp
3.4.2 页面结构分析
1).页面按钮
2.页面树形结构展现详情
3.4.3 编辑ItemCatController
cgb2008-京淘day04相关推荐
- boot sprint 项目结构_京淘项目03 08.28
JSP动态web资源,打war包 ##spring boot整合JSP 创建项目 spring SpringBoot整合web资源,, 在main文件下,新建webapp文件夹,,把WEBINF目录粘 ...
- 京淘项目实战开发-01
1.京淘项目架构设计 1.1电商网站行业特点 1.1.1 高并发 概念: 同一时间内,有大量的用户访问服务器. 常识: tomcat服务器能够支持的并发链接数 220个/秒 (软件依赖硬件设备) 生产 ...
- 大数据正式京淘附加爬虫
大数据正式京淘附加爬虫 爬虫技术 httpClient:抓取整个页面 htmlUnit:可以二次提交 jsoup:可以获取以上两个技术的所有内容 jsoup 爬取整个页面 爬取整个网站 爬取页面中的某 ...
- 京淘商城后台管理系统
京淘商城 京淘商城后台管理系统 登录.注册界面 商品管理 新增商品 查询商品 规格参数 网站内容管理 内容分类管理 内容管理 账户管理 管理员账户管理 普通用户账户管理 个人信息 习得总结 实习总结 ...
- Lesson9 【LINUX】将京淘项目发布到Linux系统上
前言 将京淘项目发布到Linux系统上 我在windows系统中已经用IDEA编写好了京淘项目的代码,并且打好了war包. 现在我就想把这个京淘项目发布到linux系统上. 因为在工作中,都是要将项目 ...
- 2003京淘项目Day-03京淘后台项目搭建
1.SpringBoot 整合JSP 1.1 创建项目 1.1.1 创建项目 1.1.2 编辑POM.xml文件 添加继承/依赖/插件 <!--parent标签作用:管理所有被springBoo ...
- cgb2007-京淘day04
1.京淘后台管理系统 1.1 Ajax总结 <%@ page language="java" contentType="text/html; charset=utf ...
- 京淘项目Day-04
1.关于项目打包/发布问题说明 1.1 利用maven工具项目打包 说明: 父级JT 其中包含了2个子级项目 jt-manager 依赖于jt-common.所以项目打包是有顺序的. 1.2 mave ...
- 京淘电商后台管理系统
1,用户登录及左菜单显示 1.1.用户登录 1.1.1.构建springboot及mybatis项目 1.1.2.编辑pom.xml文件 <?xml version="1.0" ...
最新文章
- python平稳性检验_时间序列预测基础教程系列(14)_如何判断时间序列数据是否是平稳的(Python)...
- 清华大学医学院张明君团队招聘脑机接口与微纳医学交叉领域博士后
- python基础语法合集-Python基础语法(四)—列表、元组、字典、集合、字符串
- 【做题记录】CF1428E Carrots for Rabbits—堆的妙用
- 05设计模式——抽象工厂模式
- 数据科学 IPython 笔记本 8.6 可视化误差
- mac硬盘空间怎么清理?这样也能清理出上10G的磁盘空间
- java怎样编程界面_java程序的界面编程详解
- 《css世界》中深藏不露的width:auto;总结
- 会计实务综合模拟计算机实训心得,模拟企业会计实训心得体会
- curl和gopher协议(ssrf的利用)
- conda deactivate python3_无法访问conda环境中的activate、deactivate或conda
- 拨测技术在哪些方面应用比较广泛?
- 笔记本连接手机热点并共享网络给台式机
- dedecms 织梦配置 手机 wap 站点,并绑定二级域名
- linux技术基础教程 [转载]
- 如何建立网站登录系统?
- pandas数值型数据和非数值型数据统计
- 用construct2做一个酷炫到爆炸的海绵宝宝大战痞老板游戏
- oracle rba一些小知识