商品分类

  • 一个商品分类下有很多商品
  • 一个商品分类下有很多品牌
  • 而一个品牌,可能属于不同的分类
  • 一个品牌下也会有很多商品

实现功能

数据库

CREATE TABLE `tb_category` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目id',`name` varchar(20) NOT NULL COMMENT '类目名称',`parent_id` bigint(20) NOT NULL COMMENT '父类目id,顶级类目填0',`is_parent` tinyint(1) NOT NULL COMMENT '是否为父节点,0为否,1为是',`sort` int(4) NOT NULL COMMENT '排序指数,越小越靠前',PRIMARY KEY (`id`),KEY `key_parent_id` (`parent_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1424 DEFAULT CHARSET=utf8 COMMENT='商品类目表,类目和商品(spu)是一对多关系,类目与品牌是多对多关系';

因为商品分类会有层级关系,因此这里我们加入了parent_id字段,对本表中的其它分类进行自关联。

实体类

@Table(name="tb_category")
public class Category {@Id@GeneratedValue(strategy=GenerationType.IDENTITY)private Long id;private String name;private Long parentId;private Boolean isParent; // 注意isParent生成的getter和setter方法需要手动加上Isprivate Integer sort;// getter和setter略
}

需要注意的是,这里要用到jpa的注解,因此我们在taotao-item-iterface中添加jpa依赖

<dependency><groupId>javax.persistence</groupId><artifactId>persistence-api</artifactId><version>1.0</version>
</dependency>

controller

编写一个controller一般需要知道四个内容:

  • 请求方式:决定我们用GetMapping还是PostMapping

  • 请求路径:决定映射路径

  • 请求参数:决定方法的参数

  • 返回值结果:决定方法的返回值

  • 请求方式:Get

  • 请求路径:/api/item/category/list。其中/api是网关前缀,/item是网关的路由映射,真实的路径应该是/category/list

  • 请求参数:pid=0,根据tree组件的说明,应该是父节点的id,第一次查询为0,那就是查询一级类目

  • 返回结果:json

@Controller
@RequestMapping("category")
public class CategoryController {@Autowiredprivate CategoryService categoryService;/*** 根据parentId查询类目* @param pid* @return*/@RequestMapping("list")public ResponseEntity<List<Category>> queryCategoryListByParentId(@RequestParam(value = "pid", defaultValue = "0") Long pid) {try {if (pid == null || pid.longValue() < 0){// pid为null或者小于等于0,响应400return ResponseEntity.badRequest().build();}// 执行查询操作List<Category> categoryList = this.categoryService.queryCategoryListByParentId(pid);if (CollectionUtils.isEmpty(categoryList)){// 返回结果集为空,响应404return ResponseEntity.notFound().build();}// 响应200return ResponseEntity.ok(categoryList);} catch (Exception e) {e.printStackTrace();}// 响应500return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}
}

service

@Service
public class CategoryService {@Autowiredprivate CategoryMapper categoryMapper;/*** 根据parentId查询子类目* @param pid* @return*/public List<Category> queryCategoryListByParentId(Long pid) {Category record = new Category();record.setParentId(pid);return this.categoryMapper.select(record);}
}

mapper(通用mapper来简化开发)

public interface CategoryMapper extends Mapper<Category> {}

并没有在mapper接口上声明@Mapper注解,那么mybatis如何才能找到接口呢?在启动类上添加一个扫描包功能:

@SpringBootApplication
@EnableDiscoveryClient
@MapperScan("com.leyou.item.mapper") // mapper接口的包扫描
public class LeyouItemServiceApplication {public static void main(String[] args) {SpringApplication.run(LeyouItemServiceApplication.class, args);}
}

启动并测试

不经过网关,直接访问:http://localhost:8081/category/list

经过网关,是否畅通:http://api.leyou.com/api/item/category/list

但通过浏览器页面访问时,无法直接访问

跨域问题

跨域:浏览器对于javascript的同源策略的限制 。

以下情况都属于跨域:

跨域原因说明 示例
域名不同 www.jd.comwww.taobao.com
域名相同,端口不同 www.jd.com:8080www.jd.com:8081
二级域名不同 item.jd.commiaosha.jd.com

如果域名和端口都相同,但是请求路径不同,不属于跨域,如:

www.jd.com/item

www.jd.com/goods

为什么有跨域问题?

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是与当前页域名相同的路径,这能有效的阻止跨站攻击。

因此:跨域问题 是针对ajax的一种限制

解决跨域问题的方案

目前比较常用的跨域解决方案有3种:

  • Jsonp

    最早的解决方案,利用script标签可以跨域的原理实现。

    限制:

    • 需要服务的支持
    • 只能发起GET请求
  • nginx反向代理

    思路是:利用nginx把跨域反向代理为不跨域,支持各种请求方式

    缺点:需要在nginx进行额外配置,语义不清晰

  • CORS

    规范化的跨域请求解决方案,安全可靠。

    优势:

    • 在服务端进行控制是否允许跨域,可自定义规则
    • 支持各种请求方式

    缺点:

    • 会产生额外的请求

我们这里会采用cors的跨域方案

cors解决跨域

什么是cors

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  • 浏览器端:

    目前,所有浏览器都支持该功能(IE10以下不行)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。

  • 服务端:

    CORS通信与AJAX没有任何差别,因此你不需要改变以前的业务逻辑。只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否允许其跨域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

原理

浏览器会将ajax请求分为两类,其处理方案略有差异:简单请求、特殊请求。

简单请求

只要同时满足以下两大条件,就属于简单请求。:

(1) 请求方法是以下三种方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

当浏览器发现发起的ajax请求是简单请求时,会在请求头中携带一个字段:Origin.

Origin中会指出当前请求属于哪个域(协议+域名+端口)。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域,需要在返回的响应头中携带下面信息:

Access-Control-Allow-Origin: http://manage.taotao.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
  • Access-Control-Allow-Origin:可接受的域,是一个具体域名或者*(代表任意域名)
  • Access-Control-Allow-Credentials:是否允许携带cookie,默认情况下,cors不会携带cookie,除非这个值是true

有关cookie:

要想操作cookie,需要满足3个条件:

  • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
  • 浏览器发起ajax需要指定withCredentials 为true
  • 响应头中的Access-Control-Allow-Origin一定不能为*,必须是指定的域名
特殊请求

不符合简单请求的条件,会被浏览器判定为特殊请求,,例如请求方式为PUT。

预检请求

特殊请求会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

一个“预检”请求的样板:

OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

与简单请求相比,除了Origin以外,多了两个头:

  • Access-Control-Request-Method:接下来会用到的请求方式,比如PUT
  • Access-Control-Request-Headers:会额外用到的头信息

预检请求的响应

服务的收到预检请求,如果许可跨域,会发出响应:

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

除了Access-Control-Allow-OriginAccess-Control-Allow-Credentials以外,这里又额外多出3个头:

  • Access-Control-Allow-Methods:允许访问的方式
  • Access-Control-Allow-Headers:允许携带的头
  • Access-Control-Max-Age:本次许可的有效时长,单位是秒,过期之前的ajax请求就无需再次进行预检了

如果浏览器得到上述响应,则认定为可以跨域,后续就跟简单请求的处理是一样的了。

实现

虽然原理比较复杂,但是前面说过:

  • 浏览器端都有浏览器自动完成,我们无需操心
  • 服务端可以通过拦截器统一实现,不必每次都去进行跨域判定的编写。

事实上,SpringMVC已经帮我们写好了CORS的跨域过滤器:CorsFilter ,内部已经实现了刚才所讲的判定逻辑,我们直接用就好了。

leyou-gateway中编写一个配置类,并且注册CorsFilter:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*,否则cookie就无法使用了config.addAllowedOrigin("http://manage.leyou.com");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");// 4)允许的头信息config.addAllowedHeader("*");//2.添加映射路径,我们拦截一切请求UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);}
}

位于网关的同一个微服务下,注意@Configuration会自动配置

品牌的查询

后台提供查询接口

数据库表

CREATE TABLE `tb_brand` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '品牌id',`name` varchar(50) NOT NULL COMMENT '品牌名称',`image` varchar(200) DEFAULT '' COMMENT '品牌图片地址',`letter` char(1) DEFAULT '' COMMENT '品牌的首字母',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=325400 DEFAULT CHARSET=utf8 COMMENT='品牌表,一个品牌下有多个商品(spu),一对多关系';

品牌和商品分类之间是多对多关系,有一张中间表,来维护两者间关系:

CREATE TABLE `tb_category_brand` (`category_id` bigint(20) NOT NULL COMMENT '商品类目id',`brand_id` bigint(20) NOT NULL COMMENT '品牌id',PRIMARY KEY (`category_id`,`brand_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品分类和品牌的中间表,两者是多对多关系';

这张表中并没有设置外键约束,似乎与数据库的设计范式不符。

  • 外键会严重影响数据库读写的效率
  • 数据删除时会比较麻烦

实体类

@Table(name = "tb_brand")
public class Brand {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;// 品牌名称private String image;// 品牌图片private Character letter;// getter setter 略
}

mapper

public interface BrandMapper extends Mapper<Brand> {}

controller

  • 请求方式:查询,肯定是Get
  • 请求路径:分页查询,/brand/page
  • 请求参数:根据我们刚才编写的页面,有分页功能,有排序功能,有搜索过滤功能,因此至少要有5个参数:
    • page:当前页,int
    • rows:每页大小,int
    • sortBy:排序字段,String
    • desc:是否为降序,boolean
    • key:搜索关键词,String
  • 响应结果:分页结果一般至少需要两个数据
    • total:总条数
    • items:当前页数据
    • totalPage:有些还需要总页数

封装一个类,来表示分页结果:

public class PageResult<T> {private Long total;// 总条数private Long totalPage;// 总页数private List<T> items;// 当前页数据public PageResult() {}public PageResult(Long total, List<T> items) {this.total = total;this.items = items;}public PageResult(Long total, Long totalPage, List<T> items) {this.total = total;this.totalPage = totalPage;this.items = items;}public Long getTotal() {return total;}public void setTotal(Long total) {this.total = total;}public List<T> getItems() {return items;}public void setItems(List<T> items) {this.items = items;}public Long getTotalPage() {return totalPage;}public void setTotalPage(Long totalPage) {this.totalPage = totalPage;}
}

这个PageResult以后可能在其它项目中也有需求,因此我们将其抽取到taotao-common中,提高复用性

        <dependency><groupId>com.taotao.common</groupId><artifactId>taotao-common</artifactId><version>1.0.0-SNAPSHOT</version></dependency>
@RestController
@RequestMapping("brand")
public class BrandController {@Autowiredprivate BrandService brandService;@GetMapping("page")public ResponseEntity<PageResult<Brand>> queryBrandByPage(@RequestParam(value = "page", defaultValue = "1") Integer page,@RequestParam(value = "rows", defaultValue = "5") Integer rows,@RequestParam(value = "sortBy", required = false) String sortBy,@RequestParam(value = "desc", defaultValue = "false") Boolean desc,@RequestParam(value = "key", required = false) String key) {PageResult<Brand> result = this.brandService.queryBrandByPageAndSort(page,rows,sortBy,desc, key);if (result == null || result.getItems().size() == 0) {return new ResponseEntity<>(HttpStatus.NOT_FOUND);}return ResponseEntity.ok(result);}
}

Service

@Service
public class BrandService {@Autowiredprivate BrandMapper brandMapper;public PageResult<Brand> queryBrandByPageAndSort(Integer page, Integer rows, String sortBy, Boolean desc, String key) {// 开始分页PageHelper.startPage(page, rows);// 过滤Example example = new Example(Brand.class);if (StringUtils.isNotBlank(key)) {example.createCriteria().andLike("name", "%" + key + "%").orEqualTo("letter", key);}if (StringUtils.isNotBlank(sortBy)) {// 排序String orderByClause = sortBy + (desc ? " DESC" : " ASC");example.setOrderByClause(orderByClause);}// 查询Page<Brand> pageInfo = (Page<Brand>) brandMapper.selectByExample(example);// 返回结果return new PageResult<>(pageInfo.getTotal(), pageInfo);}
}

电商项目——商品分类/品牌查询相关推荐

  1. 【愚公系列】2022年10月 微信小程序-优购电商项目-商品分类

    文章目录 前言 一.商品分类 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品分类代码 1.相关代码 2.效果 前言 商品分类是指根据一定的管理目的,为满足商品生产.流通.消费活动的全部或部 ...

  2. mysql电商类查询_GitHub - cntianjue/Estore: JavaWEB电商项目(mysql)

    申明:在原作者的基础上增加功能(适合初学者) 原作者地址:HTTPS://github.com/hsingyin/EStore -----致敬 EStore电脑商城 一.起步 简介 一个基于JavaW ...

  3. B2C电商项目(第一天、项目搭建、Restful风格、拼音API、txMybatis、品牌增删改查、Swagger)

    B2C电商项目远程仓库 https://gitee.com/kinggm520/HappyShopping 一.项目架构 技术架构 系统架构图 工程结构关系图

  4. Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 本系统功能包括: 一款基于Springboot+Vue的电商项目,前后端分离项目,前台后台都有,前台商品展示购买,购物车分类, ...

  5. 超详细测试项目——Web电商项目测试点整理.....

    虽然说近些年来,软件测试找工作的时候,简历中如果写着电商项目被认为是烂大街的项目,甚至受到根本不了解行情的HR或者部分公司的技术人员的刁难,但是:电商这么流行普遍的项目和应用,这不是很正常么! 毕竟全 ...

  6. 电商项目相关面试问题及答案

    请描述一下这个系统? [回答技巧] 从3个方面来回答这个问题: |–系统背景及系统概述 |–系统包括的业务模块及主业务流程 |–责任模块 [回答示例] 第一个方面:系统背景及系统概述 优购时尚商城是香 ...

  7. 电商项目超详细测试点整理(一)

    虽然说近些年来,软件测试找工作的时候,简历中如果写着电商项目被认为是烂大街的项目,甚至受到根本不了解行情的HR或者部分公司的技术人员的刁难,但是:电商这么流行普遍的项目和应用,这不是很正常么! 毕竟全 ...

  8. 电商项目的数据库表设计(MySQL版)

    简介: 目的: 电商常用功能模块的数据库设计 常见问题的数据库解决方案 环境: MySQL5.7 图形客户端,SQLyog Linux 模块: 用户:注册.登陆 商品:浏览.管理 订单:生成.管理 仓 ...

  9. 电商项目中的经典问题

    转载自:https://blog.csdn.net/A_BlackMoon/article/details/80094814 请描述一下这个系统? [回答技巧] 从3个方面来回答这个问题: |--系统 ...

  10. 一个电商项目的数据库设计实践(第一部分)(附源码)

    一次电商项目后台的数据库设计小结(第一部分)(附源码) 1.准备工作 2.用户实体 2.1 用户登陆表(customer_login) 2.2 用户信息表(customer_inf) 2.3 用户级别 ...

最新文章

  1. 人脸识别不只是隐私问题 信息泄露面临更大安全隐患
  2. 【QM-03】Dynamic Modification Rule (动态修改规则)
  3. 欢迎大家多来关注下!
  4. 方差与样本方差、协方差与样本协方差
  5. ORACLE连接数据库(备忘)
  6. al合成迪丽热巴_手机合成照很假?迪丽热巴却被P成“真”人鱼!
  7. Python 3 与 Javascript escape 传输确保数据正确方法和中文乱码解决方案
  8. “新基建”对下沉市场意味着什么?
  9. 转载]“无法打开Internet站点 已终止操作”的解决方法
  10. Error in Summary.factor ‘min’ not meaningful for factors
  11. VS2019 ClaudiaIDE更换背景图片
  12. 【华人学者风采】郑宇 京东
  13. Android实现简单的计算器功能
  14. 魏文王问扁鹊的注释_《魏文王问扁鹊》及翻译
  15. 20. GD32F103C8T6入门教程-adc使用外部中断IT11触发启动adc规则通道,使用外中断IT15触发注入组
  16. Alpha测试和Beta测试简介
  17. E470C触摸屏的关闭
  18. ]一周热文推荐:致应届毕业生——程序员的生存法则
  19. 企业远程高清会议平台视频会议系统在手机端使用的必备要求有哪些?
  20. ICLR2022《COSFORMER : RETHINKING SOFTMAX IN ATTENTION》

热门文章

  1. PSP ISO游戏运行必备工具:ISO TOOL 1.970 功能一览图文教程
  2. 使用服务器代替雷达信号处理,雷达数字信号处理解决方案
  3. 探索大型网站技术架构(二)
  4. 大型网站技术架构(八)——网站的安全架构
  5. 直播APP源码(干货):搭建直播平台的具体方案
  6. php有没有ispostback,php用什么表示IsPostBack?
  7. 白帽子讲Web安全(第 10 章 访问控制)
  8. Tomcat6配置参数详解
  9. 希尔伯特变换与三瞬属性简介
  10. eclipse怎么将项目打包成jar文件