阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询

下面关于新商品一些商家的推荐。
下面这些没一个都是一个分类,滚动条向上滚动,下面的一个个分类数据都展示出来。判断页面的滚动,实现懒加载。
滚动条触底后,会把下一个要展示的商品分类懒加载。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第1张图片

前端的代码

scroll的滚动的监听,
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第2张图片

阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第3张图片
index就是我们的vue的对象。在页面的最上方定义的
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第4张图片
首先获取当前的分类的list
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第5张图片
catIndex
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第6张图片
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第7张图片
html内容的渲染。rootCat就是一个json对象。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第8张图片

右侧包含最新的6个商品
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第9张图片

后端

多表关联查询,一个是分类表,一个是商品表。
商品表的表结构。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第10张图片
cat_id:子分类的id
root_cat_id:一级分类的id。这样的好处是,查询的时候,不需要做过多的关联查询了。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第11张图片
商品的图片表
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第12张图片

多表查询

阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第13张图片
加上where条件
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第14张图片
商品的图片要有主图 is_main就表示是主图
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第15张图片

阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第16张图片
增加排序,用limit限制数据只有6条。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第17张图片

测试sql

提示报错。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第18张图片

这里的星号有问题,字段有很多 重复的列名可能会出现。
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第19张图片
先来光查询i.item_name
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第20张图片
完善列名
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第21张图片
再查商品相关的字段
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第22张图片

阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第23张图片
大分类,每一项都是一模一样的。前面都是和商品有关的
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第24张图片
阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询_第25张图片

结束

 

你可能感兴趣的:(阶段一-02.分类,推荐,搜索,评价,购物车开发-第2章 商品推荐+搜索功能实现-2-1 商品推荐 - 需求分析与sql查询)