一 Sugar拉取数据展示
1 内网穿透
（1）作用
通常个人电脑无论是连接WIFI上网还是用网线上网，都是属于局域网里边的，外网无法直接访问到你的电脑，内网穿透可以让你的局域网中的电脑实现被外网访问功能。
（2）工具
目前国内网穿透工具很多，常见的比如花生壳、Ngrok、网云穿等。
官网：
花生壳。
[Ngrok。](: http://www.ngrok.cc)
网云穿。
本文以介绍花生壳为主。
（3）本机ip地址
（4）花生壳配置
配置完成后启动Gmall2022PublisherApplication.java服务，进行【映射诊断】，如下图穿透成功。
复制上图中的外网地址，修改地址(https://m23o108551.zicp.fun/api/sugar/gmv?date=20221215)，查看是否可以正常获取数据信息。
2 配置组件
点击组件，在右侧的菜单中选择【数据】，绑定方式改为【API拉取】。
下方的路径填写 https://m23o108551.zicp.fun/api/sugar/gmv?date=20221215。
这个就是sugar会周期性访问的数据接口地址，可以自定义，点击【刷新列表】，结果如下图。
二 品牌销售排行接口
1 Sugar配置
（1）图表配置
（2）接口地址
https://m23o108551.zicp.fun/api/sugar/tm?date=20221215&limit=5
（3）数据格式
使用【静态JSON】的【数据绑定方式】查看数据格式，如下
{
"status": 0,
"data": {
"categories": [
"苹果",
"三星",
"华为",
"oppo",
"vivo",
"小米94"
],
"series": [
{
"name": "商品品牌",
"data": [
8949,
7224,
7279,
5783,
7957,
7012
]
}
]
}
}
（4）执行SQL
表结构如下：
select tm_id,tm_name,sum(order_amount) order_amount from product_stats_2022 where toYYYYMMDD(stt)=20221215 group by tm_id,tm_name having order_amount > 0 order by order_amount desc limit 5;
2 数据接口实现
（1）创建商品交易额统计实体类ProductStats
package com.hzy.gmall.publisher.beans;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.math.BigDecimal;
/**
* Desc: 商品交易额统计实体类
*/
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class ProductStats {
String stt;
String edt;
Long sku_id;
String sku_name;
BigDecimal sku_price;
Long spu_id;
String spu_name;
Long tm_id ;
String tm_name;
Long category3_id ;
String category3_name ;
@Builder.Default
Long display_ct=0L;
@Builder.Default
Long click_ct=0L;
@Builder.Default
Long cart_ct=0L;
@Builder.Default
Long order_sku_num=0L;
@Builder.Default
BigDecimal order_amount=BigDecimal.ZERO;
@Builder.Default
Long order_ct=0L;
@Builder.Default
BigDecimal payment_amount=BigDecimal.ZERO;
@Builder.Default
Long refund_ct=0L;
@Builder.Default
BigDecimal refund_amount=BigDecimal.ZERO;
@Builder.Default
Long comment_ct=0L;
@Builder.Default
Long good_comment_ct=0L ;
Long ts;
}
（2）Mapper层：在ProductStatsMapper中添加方法
// 获取某天商品销售额品牌排行
@Select("select tm_id,tm_name,sum(order_amount) order_amount from product_stats_2022 " +
"where toYYYYMMDD(stt)=#{date} " +
"group by tm_id,tm_name " +
"having order_amount > 0 " +
"order by order_amount desc limit #{limit}")
List<ProductStats> selectProductStatsByTm(@Param("date") Integer date, @Param("limit") Integer limit);
（3）Service层：在ProductStatsService中增加方法
// 获取品牌对应交易额
List<ProductStats> getProductStatsByTm(Integer date, Integer limit);
（4）Service层：在ProductStatsServiceImpl增加方法实现
@Override
public List<ProductStats> getProductStatsByTm(Integer date, Integer limit) {
return productStatsMapper.selectProductStatsByTm(date,limit);
}
（5）Controller层：在SugarCongroller添加方法
注意：Controller方法的定义必须依照定义好的接口访问路径和返回值格式。
@RequestMapping("/tm")
public String getProductStatsByTm(
@RequestParam(value = "date",defaultValue = "0") Integer date,
@RequestParam(value = "limit",defaultValue = "20") Integer limit){
if (date == 0){
date = now();
}
// 调用service方法，获取品牌交易额
List<ProductStats> productStats = productStatsService.getProductStatsByTm(date, limit);
//对查询结果进行遍历，获取品牌以及品牌交易额，将其分别封装到独立的list集合中
List<String> tmList = new ArrayList<>();
List<BigDecimal> amountList = new ArrayList<>();
for (ProductStats productStat : productStats) {
tmList.add(productStat.getTm_name());
amountList.add(productStat.getOrder_amount());
}
String json = "{\"status\": 0,\"data\": " +
"{\"categories\": [\""+ StringUtils.join(tmList,"\",\"") +"\"]," +
"\"series\": [{\"name\": \"商品品牌\",\"data\": ["+StringUtils.join(amountList,",")+"]}]}}";
return json;
}
（6）本地接口测试
输入：http://localhost:8070/api/sugar/tm?date=20221215&limit=5
显示结果：
3 修改Sugar配置
（1）地址
https://m23o108551.zicp.fun/api/sugar/tm?date=20221215&limit=5
（2）修改排序规则
（3）结果展示
（4）定义宏变量
以上两个功能的地址可以重新编写为：
$API_HOST/api/sugar/gmv?date=20221215
$API_HOST/api/sugar/tm?date=20221215&limit=5
三 品类销售占比接口
1 Sugar配置
（1）图表配置
（2）接口地址
https://m23o108551.zicp.fun/api/sugar/category3?date=20221215&limit=5
（3）数据格式
{
"status": 0,
"data": [
{
"name": "PC",
"value": 97
},
{
"name": "iOS",
"value": 50
}
]
}
（4）执行SQL
select category3_id,category3_name,sum(order_amount) order_amount from product_stats_2022 where toYYYYMMDD(stt)=20221215 group by category3_id,category3_name having order_amount > 0 order by order_amount desc limit 5;
2 数据接口实现
（1）Mapper
// 获取某天品类销售额品牌排行
@Select("select category3_id,category3_name,sum(order_amount) order_amount " +
"from product_stats_2022 " +
"where toYYYYMMDD(stt)=#{date} " +
"group by category3_id,category3_name " +
"having order_amount > 0 " +
"order by order_amount desc limit #{limit};")
List<ProductStats> selectProductStatsByCategory3(@Param("date") Integer date, @Param("limit") Integer limit);
（2）Service
// 获取品类对应交易额
List<ProductStats> getProductStatsByCategory3(Integer date, Integer limit);
（3）Serviceiml
@Override
public List<ProductStats> getProductStatsByCategory3(Integer date, Integer limit) {
return productStatsMapper.selectProductStatsByCategory3(date,limit);
}
（4）Controller
@RequestMapping("/category3")
public String getProductStatsByCategory3(
@RequestParam(value = "date",defaultValue = "0") Integer date,
@RequestParam(value = "limit",defaultValue = "20") Integer limit) {
if (date == 0) {
date = now();
}
//调用service方法，获取品类销售排名情况
List<ProductStats> productStatsList = productStatsService.getProductStatsByCategory3(date, limit);
StringBuilder jsonBuilder = new StringBuilder("{\"status\": 0,\"data\": [");
// 遍历集合，获取每一个品类的销售情况
for (int i = 0; i < productStatsList.size(); i++) {
ProductStats productStats = productStatsList.get(i);
jsonBuilder.append("{\"name\": \""+productStats.getCategory3_name()+"\"," +
"\"value\": "+productStats.getOrder_amount()+"}");
if(i < productStatsList.size() - 1){
jsonBuilder.append(",");
}
}
jsonBuilder.append("]}");
return jsonBuilder.toString();
}
（5）接口测试
https://m23o108551.zicp.fun/api/sugar/category3?date=20221215&limit=5
3 通过面向对象的方式返回JSON格式字符串
（1）格式说明
在java语言中，会将JSON对象封装成一个Map集合，将JSON数组封装成一个List集合。
（2）功能实现
@RequestMapping("/category3")
public Object getProductStatsByCategory3(
@RequestParam(value = "date",defaultValue = "0") Integer date,
@RequestParam(value = "limit",defaultValue = "20") Integer limit) {
if (date == 0) {
date = now();
}
//调用service方法，获取品类销售排名情况
List<ProductStats> productStatsList = productStatsService.getProductStatsByCategory3(date, limit);
Map resMap = new HashMap();
List dataList = new ArrayList();
for (ProductStats productStats : productStatsList) {
HashMap dataMap = new HashMap();
dataMap.put("name",productStats.getCategory3_name());
dataMap.put("value",productStats.getOrder_amount());
dataList.add(dataMap);
}
resMap.put("status",0);
resMap.put("data",dataList);
return resMap;
}
（3）测试结果
四 热门商品SPU排名接口
1 Sugar配置
（1）图表配置
（2）接口地址
https://m23o108551.zicp.fun/api/sugar/spu?date=20221215
（3）数据格式
{
"status": 0,
"data": {
"columns": [
{
"name": "商品名称",
"id": "name"
},
{
"name": "交易额",
"id": "anount"
},
{
"name": "订单数",
"id": "ct"
}
],
"rows": [
{
"name": "北京总部",
"anounnt": "市场部",
"ct": "第一小分队"
},
{
"name": "北京总部",
"anounnt": "市场部",
"ct": "第一小分队"
}
]
}
}
（4）执行SQL
select spu_id,spu_name,sum(order_amount) order_amount,sum(order_ct) order_ct from product_stats_2022 where toYYYYMMDD(stt)=20221215 group by spu_id,spu_name having order_amount > 0 order by order_amount desc limit 5;
2 数据接口实现
（1）Mapper
@Select("select spu_id,spu_name,sum(order_amount) order_amount,sum(order_ct) order_ct " +
"from product_stats_2022 " +
"where toYYYYMMDD(stt)=#{date} " +
"group by spu_id,spu_name " +
"having order_amount > 0 " +
"order by order_amount desc limit #{limit};")
List<ProductStats> selectProductStatsBySPU(@Param("date") Integer date, @Param("limit") Integer limit);
（2）Service
// 获取品类对应交易额
List<ProductStats> getProductStatsBySPU(Integer date, Integer limit);
（3）ServiceIml
@Override
public List<ProductStats> getProductStatsBySPU(Integer date, Integer limit) {
return productStatsMapper.selectProductStatsBySPU(date,limit);
}
（4）Controller
@RequestMapping("/spu")
public Object getProductStatsBySPU(
@RequestParam(value = "date",defaultValue = "0") Integer date,
@RequestParam(value = "limit",defaultValue = "20") Integer limit) {
if (date == 0) {
date = now();
}
List<ProductStats> productStatsList = productStatsService.getProductStatsBySPU(date, limit);
StringBuilder jsonBuilder = new StringBuilder("{\"status\": 0,\"data\": {\"columns\": [{\"name\": \"商品名称\",\"id\": \"name\"},{\"name\": \"交易额\",\"id\":\"anount\"},{\"name\": \"订单数\",\"id\": \"ct\"}],\"rows\": [");
for (int i = 0; i < productStatsList.size(); i++) {
ProductStats productStats = productStatsList.get(i);
jsonBuilder.append("{\"name\": \""+productStats.getSpu_name()+"\",\"anount\": "+productStats.getOrder_amount()+",\"ct\": "+productStats.getOrder_ct()+"}");
if (i < productStatsList.size() - 1){
jsonBuilder.append(",");
}
}
jsonBuilder.append("]}}");
return jsonBuilder.toString();
}
（5）接口测试
