推荐微服务主要功能模块介绍

轮播图管理模块介绍

横跨屏幕的轮播图是时下比较流行的网页设计。网站设计师通过这种覆盖用户视线的图片,给用户营造一种身临其境的视觉感受,非常符合人类视觉优先的信息获取方式。大部分网站会在首页使用这种设计方式,优质的首图能够让用户了解网站的推荐内容。

购物网站在首页轮播图中会展示各种推荐商品、优惠活动等。在这个区域,网站管理者可以放置吸引人的商品图片、不久后即将上线的主力产品,还可以放置用户最关心的促销通知等。淘宝网、京东商城、华为商城等都采取这种首页轮播图的网页设计方式。

华为商城首页的轮播图效果如图 5-1 所示。

image 2025 04 23 14 21 52 301
Figure 1. 图5-1 华为商城首页的轮播图效果

京东商城首页的轮播图效果如图 5-2 所示。

image 2025 04 23 14 22 31 407
Figure 2. 图5-2 京东商城首页的轮播图效果

笔者在新蜂商城首页顶部也添加了轮播图,显示效果如图 5-3 所示。

image 2025 04 23 14 23 01 379
Figure 3. 图5-3 新蜂商城首页顶部的轮播图效果

在首页接口中,只读取轮播图数据即可。配置轮播图可以在后台管理系统中操作,如添加、修改和删除轮播图,如图 5-4 所示。

image 2025 04 23 14 23 27 301
Figure 4. 图5-4 轮播图管理页面

接下来的两个小节主要讲解在推荐微服务中后台管理模块的接口开发与实现,获取首页数据的接口实现比较简单,后续章节中再进行介绍。

商品推荐管理模块介绍

除轮播图外,新蜂商城首页还有三个板块需要进行数据渲染,分别是热销商品板块、新品上线板块和推荐商品板块。

在商城首页中设计这三个板块,主要是为了丰富版面布局,使页面不单调。

当然,这部分的设计也参考了当前主流线上商城的商品推荐设计,不过这些线上商城都有大量的正式数据做支撑,做的肯定要比新蜂商城复杂得多。比如,热销商品一定是在大量实际订单的统计下做出来的数据渲染;又如,商品推荐也一定是在用户的浏览痕迹和下单习惯的基础上计算出来的。目前,新蜂商城的开发人员只有笔者一个人,订单也只有模拟数据,要做出淘宝网、京东商城那种效果是不现实的。因此,新蜂商城中的热销商品、新品上线、推荐商品这三个板块中的数据是在后台中配置的,首页渲染前直接读取数据就可以了,这些数据并没有进行实时的数据统计。

由于新蜂商城只是技术实战项目,因此其订单、浏览痕迹和用户习惯等数据都是模拟的,并非实时统计的。这三个板块中的内容是在后台进行配置的,首页配置管理页面如图 5-5 所示。

image 2025 04 23 14 24 13 158
Figure 5. 图5-5 首页配置管理页面

表结构设计

首页的轮播图数据和推荐商品数据,主要是通过读取 tb_newbee_mall_carousel 表和 tb_newbee_mall_index_config 表获得的。在接口实现时,还需要查询商品表 tb_newbee_mall_goods_info 中的数据,但是该表在另一个微服务的数据库中。因此,笔者采用远程调用商品微服务的方式来获取这部分数据,完成响应功能的实现。推荐微服务涉及的两张表的表结构如下:

# 创建推荐微服务所需数据
CREATE DATABASE /*!32312 IF NOT EXISTS*/`newbee_mall_cloud_recommend_db` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `newbee_mall_cloud_recommend_db`;

# 创建首页推荐表

DROP TABLE IF EXISTS `tb_newbee_mall_index_config`;

CREATE TABLE `tb_newbee_mall_index_config` (
  `config_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '首页配置项主键 id',
  `config_name` varchar(50) NOT NULL DEFAULT '' COMMENT '显示字符(配置搜索时不可为空,其他可为空)',
  `config_type` tinyint(4) NOT NULL DEFAULT '0' COMMENT '1-搜索框热搜 2-搜索下拉框热搜 3-(首页)热销商品 4-(首页)新品上线 5-(首页)为你推荐',
  `goods_id` bigint(20) NOT NULL DEFAULT '0' COMMENT '商品 id 默认为 0',
  `redirect_url` varchar(100) NOT NULL DEFAULT '#' COMMENT '点击后的跳转地址(默认不跳转)',
  `config_rank` int(11) NOT NULL DEFAULT '0' COMMENT '排序值(字段越大越靠前)',
  `is_deleted` tinyint(4) NOT NULL DEFAULT '0' COMMENT '删除标识字段(0-未删除 1-已删除)',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `create_user` int(11) NOT NULL DEFAULT '0' COMMENT '创建者 id',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '最新修改时间',
  `update_user` int(11) NOT NULL DEFAULT '0' COMMENT '修改者 id',
  PRIMARY KEY (`config_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO tb_newbee_mall_index_config
(config_name, config_type, goods_id, redirect_url, config_rank, is_deleted,
 create_time, create_user, update_time, update_user)
VALUES
('热销商品 iPhone 12', 3, 10906, '##', 201, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('热销商品 华为 Mate 40 Pro', 3, 10908, '##', 300, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('新品上线 MacBook 2021', 4, 10920, '##', 180, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('新品上线 华为 P50 Pro', 4, 10921, '##', 160, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('新品上线 Apple Watch', 4, 10919, '##', 101, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('纪梵希高定香榭天鹅绒唇膏', 5, 10233, '##', 80, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('P50 白色', 5, 10922, '##', 102, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('free buds pro', 5, 10930, '##', 102, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('iPhone 13', 5, 10916, '##', 101, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('华为 Mate 40 Pro', 5, 10907, '##', 80, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('MacBook Pro 2021', 5, 10920, '##', 100, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('WATCH 3 Pro', 5, 10928, '##', 99, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('塑料容量喷雾', 5, 10154, '##', 80, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('soundx', 5, 10929, '##', 100, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('matepad pro', 5, 10906, '##', 1, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('热销商品 P40', 3, 10902, '##', 200, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('新品上线 华为 P50 Pocket', 4, 10925, '##', 200, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0),
('新品上线 华为 Mate X Pro', 4, 10926, '##', 200, 0, '2021-03-08 18:55:49', 0,
 '2021-03-08 18:55:49', 0);
('华为 Mate 30 Pro', 5, 10927, '###', 101, 0, '2021-03-08 18:55:49', 0, '2021-03-08 18:55:49', 0),
('新品上线 iphone13', 4, 10915, '###', 190, 0, '2021-03-08 18:55:49', 0, '2021-03-08 18:55:49', 0),
('Air Pods 第三代', 3, 10918, '###', 301, 0, '2021-03-08 18:55:49', 0, '2021-03-08 18:55:49', 0)

DROP TABLE IF EXISTS `tb_newbee_mall_carousel`;

# 创建轮播图表

CREATE TABLE `tb_newbee_mall_carousel` (
  `carousel_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '首页轮播图主键 id',
  `carousel_url` varchar(100) NOT NULL DEFAULT '' COMMENT '轮播图',
  `redirect_url` varchar(100) NOT NULL DEFAULT '' COMMENT '点击后的跳转地址(默认不跳转)',
  `carousel_rank` int(11) NOT NULL DEFAULT '0' COMMENT '排序值(字段越大越靠前)',
  `is_deleted` tinyint(4) NOT NULL DEFAULT '0' COMMENT '删除标识字段(0-未删除 1-已删除)',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `create_user` int(11) NOT NULL DEFAULT '0' COMMENT '创建者 id',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '修改时间',
  `update_user` int(11) NOT NULL DEFAULT '0' COMMENT '修改者 id',
  PRIMARY KEY (`carousel_id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;

# 新增轮播图数据

INSERT INTO `tb_newbee_mall_carousel` (`carousel_id`, `carousel_url`, `redirect_url`, `carousel_rank`, `is_deleted`, `create_time`, `create_user`, `update_time`, `update_user`)
VALUES
(1, 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.jpg', '###', 200, 1, '2021-08-23 17:50:45', 0, '2021-11-10 00:23:01', 0),
(2, 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner1.png', 'https://juejin.cn/book/7085254558678515742', 13, 0, '2021-11-29 00:00:00', 0, '2021-11-29 00:00:00', 0),
(3, 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner3.jpg', '###', 0, 1, '2021-09-18 18:26:38', 0, '2021-11-10 00:23:01', 0),
(5, 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner2.png', 'https://juej**.cn/book/7085254558678515742',0,0,'2021-11-29 00:00:00',0,'2021-11-29 00:00:00',0),
(6,'https://newbee-ma**.oss-cn-beijing.aliyuncs.com/images/banner1.png','##',101,1,'2021-09-19 23:37:40',0,'2021-11-07 00:15:52',0),
(7,'https://newbee-ma**.oss-cn-beijing.aliyuncs.com/images/banner2.png','##',99,1,'2021-09-19 23:37:58',0,'2021-10-22 00:15:01',0);

轮播图表和首页推荐表的字段和每个字段对应的含义在上面的 SQL 语句中都有介绍,读者可以对照理解,并正确地把建表 SQL 语句导入数据库。如果有需要,读者也可以自行根据该 SQL 语句进行扩展。