"], post_tags: [''], fields: { title: {}, }, fragment_size: 40, }, }, }); // 组装参数 const finalRes = { took: esRes.body.took, total: esRes.body.hits.total.value, data: esRes.body.hits?.hits.map((item: any) => ({ title: item._source.title, pan_url: item._source.pan_url, extract_code: item._source.extract_code, highlight: item.highlight, })), }; return finalRes; } async suggest(data: SuggestDto) { const { input } = data; const esRes = await this.elasticsearchService.search({ index: 'pan', suggest_field: 'suggest', suggest_mode: 'always', suggest_size: 20, suggest_text: input, }); return esRes.body.suggest; } } ``` 非常少，后端服务基本上就只写上面这几行代码，啥用户系统、安全限制都没做。没必要，只是为了演示，先做主要功能，如果有需要再迭代就行了，多半也不会继续开发了。 ### 前端部分整个前端页面就只有一个页面，也非常简单，稍微麻烦一点的就是兼容了一下移动端显示，UI库使用的是腾讯的UI库-[TDesign](https://tdesign.tencent.com/vue-next/components/table)，感觉还挺好看的，其他就没啥特别的了，如下是那个主页面的具体代码： `template`部分： ```html ``` `script`部分 ```html ``` `css`部分 ```scss ``` 还有一些其他零碎的代码就不贴了，主要页面就是上述部分。 ## 最后整体开发下来一个感受就是：由于人为简化了很多，所以每一部分，比如前端、后端、爬虫、部署之类的单独看都非常简单，但整个流程走下来却是较为复杂的，比如遇到BUG排查就会较为耗时。项目应该不会开源，也没开源的必要，毕竟代码没怎么整理，比如前端项目用脚手架创建的`AboutView.vue`笔者都没删除。