真实场景案例 | 用iFlyCode快速搭建一个H5检索工具

我们在项目日常运维过程中经常需要处理一些导数、刷数的工单，很多场景脚本类似。

但现实中，脚本都分散在项目团队的每个人本地电脑、信息没办法共享，导致反复编写一些相似的脚本。而且项目刷数导致的后续问题排查也非常困难，无法判断是否是刷数导致的问题。

为了解决这两个问题，所以就想做一个支持全文检索的工具，提高项目日常运营的效率。

有了想法说干就干。然而理想很饱满，现实很骨感，第一天就遇到难题。因为一开始设想的是搭建一个前后端分离的系统，后端springboot 前端vue。

但是当前项目组没有前端空闲人力，并且这个工具也不属于业务需求，没理由占用一个前端资源，此时脑海里萌生出一个大胆的想法，能不能用iFlyCode协助我完成前端的工作？

核心需求明确及系统数据传递

1、文本内容检索

2、定时任务处理非结构化数据接入到es

3、文件在线预览

4、文件支持手动上传

过程演示

1.检索主页面生成

看到第一次生成的效果，说实话有点想放弃，这样式属实有点难看，有点想放弃。转念一想，是不是我的需求不明确。

于是尝试修改了需求，将自己需求更加明确化：

然后iFlyCode生成代码如下：

页面效果：

对，我要的就是这个！这是我看到效果的第一反应。

2.文件上传页面生成

第一次生成的css和js是单独分开的，我不想单独创建css和js文件于是尝试让iFlyCode帮我放到html中重新生成

生成代码如下：

导出效果如下，甚至和之前检索页面风格都一致，这属于意外惊喜了。

到这一步，前端的工作可以说已经完成了80%了，仅仅用了大约半小时就完成了。剩下就是将接口地址修改一下，自己联调测试一下就可以，这个对于后端来说完全ok

3.数据接入

这里系统存储使用的是ES，需要处理非结构化数据的抽取。同样的让iFlyCode帮我们实现该功能。

很贴心的把依赖包的代码也生成好了，生成代码如下：

测试一下内容读取效果：

4.数据存储与检索

生成代码如下：

ES数据检索

生成代码如下：

对于上边生成的代码对于ES查询和插入数据是满足的，后续个人又根据实际情况做了一些修改，例如数据的存储路径配置，索引检索字段的配置等。

到这里其实对于整个系统的核心需求已经完成大约80%了。后续添加了文件导入接口以及文件在线预览配置，服务器文件nginx代理等配置修改。

项目部署

1.公共组件

组件使用docker-compose容器编排一键部署，后续迁移也方便。

配置文件如下：

kkfileview 、nginx ：

2.检索应用

springboot服务直接部署的jar包，后续考虑也使用docker部署。

最终效果展示

1.检索列表

2.文件在线预览

文件预览使用的是kkfileview 。

在整个系统的制作过程中，给我的感受是iFlyCode协助大约完成了50%的开发工作量，相当于节省了一个前端的人力。

在语意理解和上下文结合的表现已经超出的我的预期，我只需根据自身需求做一些针对性的调整即可，提效的同时也增加了一定的容错率。