前端分面配置说明.md
5.52 KB
前端分面配置说明
问题描述
tenant_id=170 的分面返回为空,原因是:
category1_name字段在数据中为 None(这是数据问题)specifications.name字段在数据中使用首字母大写(如 "Color"、"Size"),而前端查询时使用小写("color"、"size"),导致 ES term 查询匹配失败
解决方案
采用前端配置方案,根据不同的 tenant_id 配置不同的分面字段。配置包括:
- 字段名(field):ES 中的实际字段名,如
specifications.Color - 显示标签(label):前端显示的名称,如 "颜色"、"尺寸"
- 容器ID(containerId):HTML 中用于显示分面的容器 ID,如
colorTags - 查询参数:size、type、disjunctive 等
配置文件
配置文件位置:frontend/static/js/tenant_facets_config.js
配置结构
const TENANT_FACETS_CONFIG = {
"租户ID": {
specificationFields: [
{
field: "specifications.字段名", // ES字段名(必须与实际数据匹配,包括大小写)
label: "显示标签", // 前端显示名称
containerId: "容器ID", // HTML容器ID
size: 20, // 返回的分面值数量
type: "terms", // 分面类型
disjunctive: true // 是否支持多选
}
]
}
};
示例配置
tenant_id=162(使用小写)
"162": {
specificationFields: [
{
field: "specifications.color",
label: "Color",
containerId: "colorTags",
size: 20,
type: "terms",
disjunctive: true
},
{
field: "specifications.size",
label: "Size",
containerId: "sizeTags",
size: 15,
type: "terms",
disjunctive: true
},
{
field: "specifications.material",
label: "Material",
containerId: "materialTags",
size: 10,
type: "terms",
disjunctive: true
}
]
}
tenant_id=170(使用首字母大写,没有material)
"170": {
specificationFields: [
{
field: "specifications.Color", // 注意:首字母大写
label: "Color",
containerId: "colorTags",
size: 20,
type: "terms",
disjunctive: true
},
{
field: "specifications.Size", // 注意:首字母大写
label: "Size",
containerId: "sizeTags",
size: 15,
type: "terms",
disjunctive: true
}
// 注意:170 没有 material 分面
]
}
示例:添加新租户(包含其他规格字段,如重量、包装方式)
"新租户ID": {
specificationFields: [
{
field: "specifications.Weight", // 重量
label: "Weight",
containerId: "weightTags", // 需要在HTML中添加此容器
size: 15,
type: "terms",
disjunctive: true
},
{
field: "specifications.PackageType", // 包装方式
label: "Package Type",
containerId: "packageTags", // 需要在HTML中添加此容器
size: 10,
type: "terms",
disjunctive: true
}
]
}
添加新租户配置步骤
确定 ES 数据中的实际字段名
- 检查 ES 中
specifications.name的实际值(注意大小写) - 例如:
"Color"或"color"是不同的字段
- 检查 ES 中
在配置文件中添加配置
"新租户ID": { specificationFields: [ { field: "specifications.实际字段名", label: "显示名称", containerId: "容器ID", size: 20, type: "terms", disjunctive: true } ] }在 HTML 中添加容器(如果需要新的容器) 在
frontend/index.html的 Filter Section 中添加:<div class="filter-row"> <div class="filter-label">显示名称:</div> <div class="filter-tags" id="容器ID"></div> </div>
代码修改说明
1. 配置文件 (tenant_facets_config.js)
- 增加了
label和containerId字段 - 新增
getFacetDisplayConfig()函数,根据字段名获取显示配置
2. 前端代码 (app.js)
performSearch(): 使用配置文件获取分面查询参数displayFacets(): 使用配置来匹配分面字段并找到对应的容器
3. HTML (index.html)
- 引入了配置文件
tenant_facets_config.js
注意事项
- 字段名必须完全匹配:
field必须与 ES 中实际存储的specifications.name值完全匹配(包括大小写) - 容器ID必须存在:
containerId必须在 HTML 中存在,否则分面无法显示 - 后端代码无需修改:后端直接使用前端传入的字段名进行查询
- 分面信息是动态加载的:只有在搜索返回后才显示,符合需求
数据问题说明
对于 tenant_id=170,category1_name 字段在 ES 数据中全部为 None,因此该类目分面会返回空。这需要在数据索引时修复,确保正确解析和填充 category1_name 字段。