项目1在线交流平台-7.构建安全高效的企业服务-5.redis高级数据结构应用-统计网站数据-独立访客和日活跃用户

news/2024/5/10 2:47:21/文章来源:https://blog.csdn.net/xingzhes_/article/details/123997389

文章目录

    • 功能需求
    • 一、dao层定义redis数据的key
    • 二、Service层处理业务逻辑
      • 1. 对独立访客UV的记录与查询
        • 记录
          • `new SimpleDateFormat("yyyyMMdd")`
          • `format(new Date())`- 日期类型转为指定日期格式字符串类型
        • 查询
          • `Calendar类 `
          • `Calendar.getInstance()`- 实例化操作日期的Calendar类
          • `Calendar类对象字段类型 `
            • `日期字段全局静态变量:`
            • `对日期的获取与设置`
            • `setTime(data)`- 传入日期格式数据
            • `getTime(data)`- 获取data日期
            • `对日期的修改-add`
          • `HyperLogLog合并查询`
            • `opsForHyperLogLog().union(UVKey, keyList.toArray())`
            • `.before(date)`- 在date日期之前
      • 2. 对日活跃用户的记录与查询
        • 记录
        • 查询
    • 三、拦截器中记录访问数据
      • 1. 拦截器定义
        • `request.getRemoteAddr()`- 获取ip地址
      • 2. 拦截器配置
    • 四、Controller处理查询请求
      • 1. 显示管理员统计数据页面请求
      • 2. 查询UV
        • `@DateTimeFormat(pattern = "yyyy-MM-dd")` - 指明参数接收日期的格式
        • `forward:/data`- 转发
      • 3. 查询DAU
    • 五、处理模板
      • 1. 渲染UV统计表单
      • 2. 渲染统计DAU表单页面
    • 六、权限设置
      • 测试结果:
    • 七、遇到的bug及处理方式
      • 1. 日期格式
        • 问题产生:
        • 问题解决:
      • 2. 合并中出现空指针错误
        • 问题产生:
        • 问题解决
      • 3. 日期计算出现问题
        • 问题产生:
        • 问题解决:
      • 4. BitMap数据格式

参考牛客网高级项目教程
狂神说Redis教程笔记

功能需求

在这里插入图片描述

  • 1.拥有管理员权限的管理员可以统计对社区网站的独立访客

    • 没有登录的游客也统计在内,因此,使用ip去重统计
    • 使用redis的HyperLogLog数据类型
      • -性能好、储存空间小,无需非常精确(因为含有没登录的游客,统计出访问量大小即可)
  • 2.管理员可以统计出日活跃用户

    • 因为是对已登录用户状态的统计-要求精度
    • 因此使用BitMap数据结构比较合适
    • 以天为单位,每天只要访问过一次,就定位活跃状态
  • 3.开发出记录、查询和显示的网页

一、dao层定义redis数据的key

  • 通过日期定位到key,因此,要根据字符串类型的日期来拼接key
  • 要查询指定区间的数据-可以用redis的两个数据类型的合并功能
    • 要使用区间的开始和结束时间拼接key来接收合并的结果
    • 合并时,要拿出区间中每天的时间拼接出单日的key集合
private static final String PREFIX_UV = "uv";   // 独立访客
private static final String PREFIX_DAU = "dau"; // 日活跃用户/*** 定义单日独立访客UV的key* 通过日期定位到key*/
public static String getUV(String date) {return PREFIX_UV + SPLIT + date;
}/*** 定义区间UV的key* 查询一段时间的UV-合并处理*/
public static String getUV(String startDate, String endDate) {return PREFIX_UV + SPLIT + startDate + SPLIT + endDate;
}/*** 定义单日活跃用户DAU的key* 同样通过日期定位到key*/
public static String getDAU(String date) {return PREFIX_DAU + SPLIT + date;
}/*** 定义区间活跃用户DAU的key* 查询一段时间的DAU-合并处理*/
public static String getDAU(String startDate, String endDate) {return PREFIX_DAU + SPLIT + startDate + SPLIT + endDate;
}

二、Service层处理业务逻辑

1. 对独立访客UV的记录与查询

记录

  • 将指定IP记入UV-最后统计不同的IP数目
new SimpleDateFormat("yyyyMMdd")
  • 创建指定日期格式的日期转换器实例
  • 注意,本网站统计只精缺到天,不紧缺到时分秒,否则key很难取到
format(new Date())- 日期类型转为指定日期格式字符串类型
@Service
public class DataService {/**创建指定日期格式的日期转换器实例 */private SimpleDateFormat sf = new SimpleDateFormat("yyyyMMdd");@AutowiredRedisTemplate redisTemplate;/*** 对UV的记录* @param ip 将指定IP记入UV-最后统计不同的IP数目*/public void addUV(String ip) {String UVKey = RedisKeyUtil.getUV(sf.format(new Date()));redisTemplate.opsForHyperLogLog().add(UVKey, ip);}
}

查询

  • 支持区间查询,当查询一天日期时,区间长度设为1即可
Calendar类
  • date类simpleDateFormat类能够格式化并创建一个日期对象了,
  • 但是我们如何才能设置和获取日期数据的特定部分呢,比如说小时,日,或者分钟?
  • 我们又如何在日期的这些部分加上或者减去值呢? 答案是使用Calendar类。Date中有很多方法都已经废了!
  • Calendar类的功能要比Date类强大很多,而且在实现方式上也比Date类要复杂一些。
  • Calendar类是一个抽象类,在实际使用时实现特定的子类的对象,创建对象的过程对程序员来说是透明
    的,只需要使用getInstance方法创建即可
Calendar.getInstance()- 实例化操作日期的Calendar类
  • 默认是当前日期

  • 也可以创建指定日期的Calendar对象

    在这里插入图片描述

Calendar类对象字段类型
日期字段全局静态变量:

在这里插入图片描述

对日期的获取与设置
  • 注意:Calender的月份是从0开始的,但日期和年份是从1开始的
    • 注意月份的获取,会比当前时间少1,获取后要加1
    • 因此,设置月份的时候,都减1,例如设置6,参数填5
setTime(data)- 传入日期格式数据
getTime(data)- 获取data日期

在这里插入图片描述

对日期的修改-add
calendar.set(1999, 3 - 1, 30);
System.out.println(calendar.get(Calendar.MONTH) + 1); // 3//把c1对象的日期加上10,也就是c1也就表示为10天后的日期,其它所有的数值会被重新计算
calendar.add(Calendar.DATE, 10);
System.out.println(calendar.get(Calendar.DATE));	 // 9
System.out.println(calendar.get(Calendar.MONTH) + 1); // 4
//把c1对象的日期减去10,也就是c1也就表示为10天前的日期,其它所有的数值会被重新计算
calendar.add(Calendar.DATE, -10);
System.out.println(calendar.get(Calendar.DATE));	// 30
System.out.println(calendar.get(Calendar.MONTH) + 1);// 3
3
9
4
30
3
HyperLogLog合并查询
  • 整理该日期范围内的key,放进List集合中
opsForHyperLogLog().union(UVKey, keyList.toArray())
  • 将整理后的key集合转为数组-数据合并到一个UVKey中去
.before(date)- 在date日期之前
  • Date日期类的API

    在这里插入图片描述

/*** 对UV的查询*     支持区间查询,当查询一天日期时,区间长度设为1即可* @param start    查询区间起始时间* @param end      查询区间结束时间*/
public long calculateUV(Date start, Date end) {String UVKey = RedisKeyUtil.getUV(sf.format(start), sf.format(end));if (start == null || end == null) { // 先判空throw new IllegalArgumentException("参数不能为空!");}// 整理该日期范围内的keyList<String> keyList = new ArrayList<>();Calendar calendar = Calendar.getInstance(); // 实例化操作日期的Calendar实例calendar.setTime(start);    // 设置日期String key;while (calendar.getTime().before(end)) {// 获取区间时间的每一天的时间,设置为keykey = RedisKeyUtil.getUV(sf.format(calendar.getTime()));keyList.add(key);calendar.add(Calendar.DATE, 1); // 每次天数加1}// 合并这些数据redisTemplate.opsForHyperLogLog().union(UVKey, keyList.toArray());// 返回合并后的key的统计结果return redisTemplate.opsForHyperLogLog().size(UVKey);
}

2. 对日活跃用户的记录与查询

记录

  • 使用BitMap数据结构

  • 以用户id为位数, 对改位设置为true

/*** 对DAU的记录*      以用户id为位数, 对改位设置为true* @param userid  日活跃用户的id*/
public void addDAU(int userid) {String DAUKey = RedisKeyUtil.getDAU(sf.format(new Date()));redisTemplate.opsForValue().setBit(DAUKey, userid, true);
}

查询

  • 合并key的数据,用OR运算,只要在区间内的时间,有一天活跃,都是活跃用户

  • 传参,是每个key的byte数组,故,就是keyList的二维数组表示形式

    redisConnection.bitOp(RedisStringCommands.BitOperation.OR,DAUKey.getBytes(), keyList.toArray(new byte[0][0]));
    
  • 注意:集合中装的是key的byte数组

/*** 对DAU的查询*/
public long calculateDAU(Date start, Date end) {if (start == null || end == null) {throw new IllegalArgumentException("参数不能为空!");}// 整理该日期范围内的key// 注意:集合中装的是key的byte数组形式List<byte[]> keyList = new ArrayList<>();Calendar calendar = Calendar.getInstance();calendar.setTime(start);while (!calendar.getTime().after(end)) {String key = RedisKeyUtil.getDAU(df.format(calendar.getTime()));keyList.add(key.getBytes());calendar.add(Calendar.DATE, 1);}// 进行OR运算return (long) redisTemplate.execute(new RedisCallback() {@Overridepublic Object doInRedis(RedisConnection connection) throws DataAccessException {String redisKey = RedisKeyUtil.getDAU(df.format(start), df.format(end));if(!keyList.isEmpty()) {connection.bitOp(RedisStringCommands.BitOperation.OR,redisKey.getBytes(), keyList.toArray(new byte[0][0]));}return connection.bitCount(redisKey.getBytes());}});
}

三、拦截器中记录访问数据

  • 因为每次请求中都要记录UV,DAU,故,可以定义拦截器在请求初去记录这些数据

1. 拦截器定义

request.getRemoteAddr()- 获取ip地址

  • 从请求体中获取ip地址
  • 记录活跃用户DAU时,注意先判断是否为登录用户
@Component
public class DataInterceptor implements HandlerInterceptor {@AutowiredHostHolder hostHolder;@AutowiredDataService dataService;// 在controller处理请求前拦截记录@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {// 记录UVString ip = request.getRemoteAddr(); // 从请求体中获取ip地址dataService.addUV(ip);// 记录DAUUser user = hostHolder.getUser();if (user != null) {	// 边界判断dataService.addDAU(user.getId());}return true;}
}

2. 拦截器配置


registry.addInterceptor(dataInterceptor).excludePathPatterns("/**/*.css", "/**/*.js", "/**/*.png", "/**/*.jpg", "/**/*.jpeg");

四、Controller处理查询请求

1. 显示管理员统计数据页面请求

  • 支持get,post请求
  • 直接访问是get请求
  • 其他网页转发,能够接收其他post请求页面的转发
/*** 显示统计页面*/
@RequestMapping(value = "/data", method = {RequestMethod.GET, RequestMethod.POST})
public String getDataPage() {return "/site/admin/data";
}

2. 查询UV

@DateTimeFormat(pattern = "yyyy-MM-dd") - 指明参数接收日期的格式

  • 为了能在页面显示出选中的起始时间,要将用户提交的数据再传给模板

forward:/data- 转发

  • 当前页只处理前一部分,后面的模板页面渲染交给"/data"请求处理
  • 但服务器只与当前的url通讯,不认识转发的"/data"请求
/*** 统计UV*     要指明接收日期的格式*/
@RequestMapping(value = "/data/uv", method = RequestMethod.POST)
public String getUV(@DateTimeFormat(pattern = "yyyy-MM-dd") Date start,@DateTimeFormat(pattern = "yyyy-MM-dd")Date end, Model model) {long uv = dataService.calculateUV(start, end);model.addAttribute("uvResult", uv);// 为了能在页面显示出选中的起始时间,要将用户提交的数据再传给模板model.addAttribute("uvStartDate", start);model.addAttribute("uvEndDate", end);return "forward:/admin/data";
}

3. 查询DAU

/*** 统计DAU*/
@RequestMapping(path = "/data/dau", method = RequestMethod.POST)
public String getDAU(@DateTimeFormat(pattern = "yyyy-MM-dd") Date start,@DateTimeFormat(pattern = "yyyy-MM-dd") Date end, Model model) {long dau = dataService.calculateDAU(start, end);model.addAttribute("dauResult", dau);model.addAttribute("dauStartDate", start);model.addAttribute("dauEndDate", end);return "forward:/admin/data";
}

五、处理模板

1. 渲染UV统计表单

  • 统计提交表单
    • 返回后,将提交的日期数据默认显示出来
<form class="form-inline mt-3" method="post" th:action="@{/admin/data/uv}"><input type="date" class="form-control" required name="start" th:value="${#dates.format(uvStartDate,'yyyy-MM-dd')}"/><input type="date" class="form-control ml-3" required name="end" th:value="${#dates.format(uvEndDate,'yyyy-MM-dd')}"/><button type="submit" class="btn btn-primary ml-3">开始统计</button>
</form>
  • 统计结果显示
<li class="list-group-item d-flex justify-content-between align-items-center">统计结果<span class="badge badge-primary badge-danger font-size-14" th:text="${uvResult}">0</span>
</li>

2. 渲染统计DAU表单页面

<!-- 活跃用户 -->
<div class="container pl-5 pr-5 pt-3 pb-3 mt-4"><h6 class="mt-3"><b class="square"></b> 活跃用户</h6><form class="form-inline mt-3" method="post" th:action="@{/admin/data/dau}"><input type="date" class="form-control" required name="start" th:value="${#dates.format(dauStartDate,'yyyy-MM-dd')}"/><input type="date" class="form-control ml-3" required name="end" th:value="${#dates.format(dauEndDate,'yyyy-MM-dd')}"/><button type="submit" class="btn btn-primary ml-3">开始统计</button></form><ul class="list-group mt-3 mb-3"><li class="list-group-item d-flex justify-content-between align-items-center">统计结果<span class="badge badge-primary badge-danger font-size-14" th:text="${dauResult}">0</span></li></ul>

六、权限设置

  • 权限分配:只有管理员才能访问统计网页的请求

    .antMatchers("/discuss/delete","/admin/**"
    )
    .hasAnyAuthority(AUTHORITY_ADMIN)
    

测试结果:

  • 非管理员没有权限访问

    在这里插入图片描述

  • 统计独立访客UV

    在这里插入图片描述

  • 统计活跃用户

    在这里插入图片描述

七、遇到的bug及处理方式

1. 日期格式

问题产生:

 private SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  • 之前key中的日期格式设置成功new SimpleDateFormat("yyyy-MM-dd HH:mm:ss")
    • 结果统计结果全部为0,即统计不出值

问题解决:

在这里插入图片描述

  • 日期的格式决定redis中key的定义

  • 本项目中只需要统计每日的UV、DAU,key也就是序列化到日,故日期格式精确的到日就可

     private SimpleDateFormat sf = new SimpleDateFormat("yyyyMMdd");
    

2. 合并中出现空指针错误

问题产生:

redisTemplate.opsForHyperLogLog().union(UVKey, keyList.toArray());
  • 如果页面用户输入的时间起始时间大于终止时间,会取不到key,keyList的size为0,toArray()会报错

问题解决

  • 作边界判断,注意不是判断keyList != null,实例化就一定不为null,但要判断集合元素是否为空
if(!keyList.isEmpty()) {redisTemplate.opsForHyperLogLog().union(UVKey, keyList.toArray());
}

3. 日期计算出现问题

问题产生:

while (calendar.getTime().before(end)) {
}
  • 如果起始时间和终止时间相等时,循环不进行,这样无法查询一天的结果

问题解决:

  • 边界条件要包含和终止时间相等的情况
  • 故,不在end之后,都满足条件
while (!calendar.getTime().after(end)) {String key = RedisKeyUtil.getDAU(df.format(calendar.getTime()));keyList.add(key.getBytes());calendar.add(Calendar.DATE, 1);
}

4. BitMap数据格式

  • 注意:对BitMap的or合并操作,是对位进行操作
  • 故,要将String类型的key转为Byte字符数组
    • 因此,统计keyList的集合中也要放key的字符数组
List<byte[]> keyList = new ArrayList<>();
if(!keyList.isEmpty()) {connection.bitOp(RedisStringCommands.BitOperation.OR,redisKey.getBytes(), keyList.toArray(new byte[0][0]));
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_796562.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打不开_网站打不开的原因有哪些

其实网站不管是在建设的过程中还是在投入运营使用之后&#xff0c;都会出现网站打不开的现象&#xff0c;而且还有很多的企业不知道出现这种现象的原因。今天八爪网就给大家分享网站打不开的原因有哪些&#xff0c;一起来看看吧。1、检查是否是网站服务器的问题有的企业在做网站…

使用Web标准建站第8天:CSS布局入门(2)

接下来开始要真正设计布局了。和传统的方法一样&#xff0c;你首先要在脑海里有大致的轮廓构想&#xff0c;然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素&#xff0c;因为web标准更关注结构和内容&#xff0c;实际上它与网页的美观没有根本冲突&#xff…

java webmagic 使用_使用 | Java使用WebMagic 爬取网站

小小又开始学习了&#xff0c;这次跟着项目学习着&#xff0c;需要使用一个相关的爬虫&#xff0c;这里使用的是webmagic作为网站的爬虫。安装这里使用maven进行安装。根据maven下载相关的包us.codecraftwebmagic-core0.7.3us.codecraftwebmagic-extension0.7.3Hello World几乎…

linux shell监控网站延迟,shell脚本监控网站状态

给大家发个不错的网站监控shell,当然说它功能强大也不是很强大,但配置上很灵活,因为此脚本的作用是按固定频率不停访问给出的URL,当网站不可访问时自动给设定邮箱发送告警邮件以通知用户.好了.来看脚本吧.#!/bin/sh# */2 * * * * sh /var/monitor/web_monitor.sh http:///blog.…

Vue ElementUI el-tabs 监听导航栏的mouseover 和 mouseleave 事件

需求 项目需要对 el-tabs 的导航栏做鼠标监听事件&#xff0c;但官网仅有如下点击事件。所以另辟蹊径&#xff0c;对 class"el-tabs__nav-scroll" 做监听。 示例 <template><div><el-tabs class"my-tabs" v-model"activeName" …

网站的分布式架构学习

转载学习地址&#xff1a;http://www.cnblogs.com/sharpxiajun/archive/2013/05/11/3072798.html 网站的B/S技术架构图 在传统B/S架构的企业管理系统里&#xff0c;技术架构往往就是一个工程项目&#xff0c;各个逻辑分层都是该工程的业务逻辑模块。但是作为提供公共服务的网站…

做网站用UTF-8还是GB2312?

转载自 http://justjavac.javaeye.com/blog/695252 经常我们打开外国网站的时候出现乱码&#xff0c;又或者打开很多非英语的外国网站的时候&#xff0c;显示的都是口口口口口的字符&#xff0c; WordPress程序是用的UTF-8&#xff0c;很多cms用的是GB2312。 ● 为什么有这么…

小型电子商务网站设计原则

最近谈得最多的话题莫过于大规模&#xff0c;大数据量&#xff0c;高性能&#xff0c;高并发等架构话题&#xff0c;其实一个电子商务网站开始时一定是小规模&#xff0c;小数据量&#xff0c;用不着把架构弄得过于复杂。高度设计、过度扩展(高德纳大爷也说过&#xff0c;"…

Mysql在大型网站的应用架构演变

写在最前: 本文主要描述在网站的不同的并发访问量级下&#xff0c;Mysql架构的演变 可扩展性 架构的可扩展性往往和并发是息息相关&#xff0c;没有并发的增长&#xff0c;也就没有必要做高可扩展性的架构&#xff0c;这里对可扩展性进行简单介绍一下&#xff0c;常用的扩展手段…

(转载)可扩展、高可用、负载均衡网站架构设计方案

可扩展、高可用、负载均衡网站架构设计方案作者&#xff1a;田逸(sery163.com) 本作品已刊登在《IT实验室周报》第6期第6版 基本需求: 1、 高可用性&#xff1a;将停止服务时间降低到最低甚至是不间断服务 2、 可扩展性&#xff1a;随着访问的增加&#xff0c;系统具备良好的…

MOUSEOVER在拼接的HTML无效处理

正常情况下&#xff1a; //鼠标移入移出&#xff08;顶部企业图标信息&#xff09;$(".patternBg").mouseover(function (){ $(".enterpriseContent").show(); }).mouseout(function () {$(".enterpriseContent").hide();}); 修改成&#x…

SQl语句查存储过程\触发器\约束(网站数据库转移缺漏审查)

网站开发最让我们头疼的就是数据的架构.本地开发很轻松.程序只需要打包dll就可以了,但是数据库要架设到空间服务器上,就要转移.一不小心就会忘了一些存储过程,触发器,约束.这里为大家提供几个查用的检查.能够快速找出有哪些东西是忘记传了.很实用.有好的方法,请知道. 该条语句查…

从小型网站到超大规模网站的MySQL参考架构

Oracle发布《面向大规模可伸缩网站基础设施的MySQL参考架构》白皮书&#xff0c;针对将MySQL用作数据存储的不同类型和不同规模的网站给出了推荐的拓扑结构。 根据分别提供4类服务——用户和会话管理、电子商务、分析类应用 (多结构数据)和CMS&#xff08;元数据&#xff09;—…

在不同尺寸屏幕下浏览网站效果 - Responsivator

如果你需要开发响应式的网站的话&#xff0c;使用一个必要的浏览工具来检验不同尺寸屏幕下显示效果还是非常有用的&#xff0c;在今天的这篇文章中&#xff0c;我们再给大家介绍另外一个不错的在线工具 - Responsivator&#xff0c;它提供了很多不同的尺寸屏幕的展示效果&#…

行业网站设计心得

作者&#xff1a;何迁 时间&#xff1a; 2004-08-18 文档类型&#xff1a;原创 来自&#xff1a;蓝色理想 浏览统计 total:11158 | year:596 | Quarter:596 | Month:596 | Week:47 | today:7 很多设计师认为做好了企业网站就一定能够做好行业网站的设计&#xff0c;其实对设…

云计算之路-阿里云上:网站故障致歉

后续进展&#xff1a;云计算之路-阿里云上&#xff1a;向大家汇报一下今天上午的网站故障 今天上午&#xff08;5月16日&#xff09;9:30~9:40左右&#xff0c;下午16:30~17:00左右&#xff0c;由于博客站点的Web服务器CPU大幅波动&#xff08;有如坐过山车&#xff09;&#x…

带给你灵感的20个漂亮的单页网站设计作品

带给你灵感的20个漂亮的单页网站设计作品 单页网站是指只有一个页面的网站&#xff0c;这种形式的网站曾经非常流行&#xff0c;现在依然有很多人喜欢。不过&#xff0c;并不是每个网站都适合做成单页&#xff0c;一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做…

寻找网页设计灵感的27个最佳网站推荐

今天&#xff0c;本文要向大家推荐的是27个寻找网页设计灵感的最佳网站。设计师们可通过这些网站收集的优秀网页设计作品来获取灵感&#xff0c;进而设计出更加时尚、更有创意的作品。如果你有收藏这个列表中遗漏的网站&#xff0c;欢迎在评论中与大家分享。 CSS Nature Desig…

优秀网页设计:20佳别出心裁的国外单页网站作品

单页网站是非常好的灵感来源&#xff0c;这些网站界面简洁、主题突出、设计精美&#xff0c;有创意的动态效果&#xff0c;带给访客强烈的视觉冲击。这种形式的网站需要把内容都放在一个页面中&#xff0c;只有重要内容才会展现在屏幕中。下面收集了20佳优秀的单页网站作品&…

2068个开源的网站模板

在网上溜达的时候发了这个好网站——opendesigns.org&#xff0c;上面分享了2068个免费的网站模板。提供了搜索功能&#xff0c;可以根据风格和功能&#xff08;艺术、教育、画廊、杂志、作品集、电子商务等&#xff09;、颜色以及关键字搜索模板&#xff0c;高级搜索模式还支持…