devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaSearch搜索引擎_java搜索引擎

作者：weixin_40725706 | 2024-07-21 21:48:01

赞

踩

java搜索引擎

目录

一. 认识搜索引擎

搜索设计的核心思路 

二. 项目介绍 

三. 实现索引模块

构建索引

环境搭建

实现 Indexer类

实现 FileScanner类

实现 IndexManager类

实现 IndexerProperties类

实现 Document类

数据库中创建表

实现 InvertedRecord类

四. 实现搜索模块

实现前端页面

实现 Document

实现 DescBuilder类

五. 项目展示

页面展示

输入展示

搜索展示

视频演示

一. 认识搜索引擎

定义：

       搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上采集信息，在对信息进行组织和处理后，为用户提供检索服务，将检索的相关信息展示给用户的系统。

如图，在百度搜索中输入“康熙”，就会显示以下页面：

搜索设计的核心思路 

以用户的角度来看：用户输入搜索词（一个词或者多个词），在已有的文档中，找到文档包含这些词的所有文档信息，给出相应的列表。假设文档个数为m，文档平均长度（标题+内容）为n，则复杂度为O（m*n）；现实中，m非常的大，所以从性能上将这种方式否决。

标准的解法就是使用倒排索引（Inverted index）。

文档：被检索的 html 页面，pdf，图片，视频等等。

倒排索引：一个词被那些文档所引用，描述一个词的基本信息，存储了这个词都存在在那些文档中，这个词在文档中的重要程度。

正排索引：一个文档中包含了那些词，描述一个文档的基本信息，将文档中的词进行分词处理并存储。

二. 项目介绍 

该项目只针对 JDK API 文档库中的 html 做搜索。下载地址：文档下载

主要实现以下两个模块：

  1. 构建索引模块（不需要使用web功能）
  2. 搜索模块（依赖构建索引完成之后才能进行，需要web功能）

三. 实现索引模块

构建索引

forward.json：存储正排索引，没有考虑性能，使用了方便理解的 JSON 格式；

inverted.json：存储倒排索引 ；

构建索引的步骤：

1. 扫描文档目录下的所有文档：目录遍历的过程 FileScanner；

2. 针对每一篇文档进行分析，处理，得到文档的标题，最终访问的URL，文档下的内容；

3. 每一篇文档：标题，url，内容，标题和内容的每个词；利用上述信息就可以构建索引；

4. 保存索引信息（可以保存成文件系统的一个文件，或者表中的记录） 

环境搭建

创建Spring Boot项目

构建搜索引擎，只需要Lombok即可； 

点击 Finish 就完成 Spring Boot 的项目创建了； 

实现 Indexer类

在indexer下创建command.Indexer，构建索引的模块，是整个程序的逻辑入口；

  1. /**
  2.  * 构建索引的模块，是整个程序的逻辑入口
  3.  */
  4. @Slf4j      // 添加 Spring 日志的使用
  5. @Component  // 注册成 Spring 的 bean
  6. //@Profile("run") // 让跑测试的时候不加载这个 bean（run != test)
  7. public class Indexer implements CommandLineRunner {
  8.     // 需要依赖 FileScanner 对象
  9.     private final FileScanner fileScanner;
  10.     private final IndexerProperties properties;
  11.     private final IndexManager indexManager;
  12.     private final ExecutorService executorService;
  13.  
  14.     @Autowired  // 构造方法注入的方式，让 Spring 容器，注入 FileScanner 对象进来 —— DI
  15.     public Indexer(FileScanner fileScanner, IndexerProperties properties, IndexManager indexManager, ExecutorService executorService) {
  16.         this.fileScanner = fileScanner;
  17.         this.properties = properties;
  18.         this.indexManager = indexManager;
  19.         this.executorService = executorService;
  20.     }
  21.  
  22.     @Override
  23.     public void run(String... args) throws Exception {
  24.         ToAnalysis.parse("随便分个什么，进行预热，避免优化的时候计算第一次特别慢的时间");
  25.  
  26.         log.info("这里的整个程序的逻辑入口");
  27.  
  28.         // 1. 扫描出来所有的 html 文件
  29.         log.debug("开始扫描目录，找出所有的 html 文件。{}", properties.getDocRootPath());
  30.         List<File> htmlFileList = fileScanner.scanFile(properties.getDocRootPath(), file -> {
  31.             return file.isFile() && file.getName().endsWith(".html");
  32.         });
  33.         log.debug("扫描目录结束，一共得到 {} 个文件。", htmlFileList.size());
  34.  
  35.         // 2. 针对每个 html 文件，得到其 标题、URL、正文信息，把这些信息封装成一个对象（文档 Document）
  36.         File rootFile = new File(properties.getDocRootPath());
  37.         List<Document> documentList = htmlFileList.stream()
  38.                 .parallel()         // 【注意】由于我们使用了 Stream 用法，所以，可以通过添加 .parallel()，使得整个操作变成并行，利用多核增加运行速度
  39.                 .map(file -> new Document(file, properties.getUrlPrefix(), rootFile))
  40.                 .collect(Collectors.toList());
  41.         log.debug("构建文档完毕，一共 {} 篇文档", documentList.size());
  42.  
  43.         // 3. 进行正排索引的保存
  44.         indexManager.saveForwardIndexesConcurrent(documentList);
  45.         log.debug("正排索引保存成功。");
  46.  
  47.         // 4. 进行倒排索引的生成核保存
  48.         indexManager.saveInvertedIndexesConcurrent(documentList);
  49.         log.debug("倒排索引保存成功。");
  50.  
  51.         // 5. 关闭线程池
  52.         executorService.shutdown();
  53.     }
  54. }

实现 FileScanner类

扫描文件，找到符合条件的文件；

  1. @Slf4j      // 添加日志
  2. @Service    // 注册成 Spring bean
  3. public class FileScanner {
  4.     /**
  5.      * 以 rootPath 作为根目录，开始进行文件的扫描，把所有符合条件的 File 对象，作为结果，以 List 形式返回
  6.      * @param rootPath 根目录的路径，调用者需要确保这个目录存在 && 一定是一个目录
  7.      * @param filter 通过针对每个文件调用 filter.accept(file) 就知道，文件是否满足条件
  8.      * @return 满足条件的所有文件
  9.      */
  10.     public List<File> scanFile(String rootPath, FileFilter filter) {
  11.         List<File> resultList = new ArrayList<>();
  12.         File rootFile = new File(rootPath);
  13.  
  14.         // 针对目录树进行遍历，深度优先 or 广度优先即可，确保每个文件都没遍历到即可
  15.         // 我们这里采用深度优先遍历，使用递归完成
  16.         traversal(rootFile, filter, resultList);
  17.  
  18.         return resultList;
  19.     }
  20.  
  21.     private void traversal(File directoryFile, FileFilter filter, List<File> resultList) {
  22.         // 1. 先通过目录，得到该目录下的孩子文件有哪些
  23.         File[] files = directoryFile.listFiles();
  24.         if (files == null) {
  25.             // 说明有问题，我们不管（一般是权限等的问题），通常咱们遇不到这个错误
  26.             return;
  27.         }
  28.  
  29.         // 2. 遍历每个文件，检查是否符合条件
  30.         for (File file : files) {
  31.             // 通过 filter.accept(file) 的返回值，判断是否符合条件
  32.             if (filter.accept(file)) {
  33.                 // 说明符合条件，需要把该文件加入到结果 List 中
  34.                 resultList.add(file);
  35.             }
  36.         }
  37.  
  38.         // 3. 遍历每个文件，针对是目录的情况，继续深度优先遍历（递归）
  39.         for (File file : files) {
  40.             if (file.isDirectory()) {
  41.                 traversal(file, filter, resultList);
  42.             }
  43.         }
  44.     }
  45. }

实现 IndexManager类

管理索引

  1. @Slf4j
  2. @Component
  3. public class IndexManager {
  4.     private final IndexDatabaseMapper mapper;
  5.     private final ExecutorService executorService;
  6.  
  7.     @Autowired
  8.     public IndexManager(IndexDatabaseMapper mapper, ExecutorService executorService) {
  9.         this.mapper = mapper;
  10.         this.executorService = executorService;
  11.     }
  12.  
  13.     // 先批量生成、保存正排索引（单线程版本）
  14.     public void saveForwardIndexes(List<Document> documentList) {
  15.         // 1. 批量插入时，每次插入多少条记录（由于每条记录比较大，所以这里使用 10 条就够了）
  16.         int batchSize = 10;
  17.         // 2. 一共需要执行多少次 SQL？   向上取整(documentList.size() / batchSize)
  18.         int listSize = documentList.size();
  19.         int times = (int) Math.ceil(1.0 * listSize / batchSize);    // ceil(天花板): 向上取整
  20.         log.debug("一共需要 {} 批任务。", times);
  21.  
  22.         // 3. 开始分批次插入
  23.         for (int i = 0; i < listSize; i += batchSize) {
  24.             // 从 documentList 中截取这批要插入的 文档列表（使用 List.subList(int from, int to)
  25.             int from = i;
  26.             int to = Integer.min(from + batchSize, listSize);
  27.  
  28.             List<Document> subList = documentList.subList(from, to);
  29.  
  30.             // 针对这个 subList 做批量插入
  31.             mapper.batchInsertForwardIndexes(subList);
  32.         }
  33.     }
  34.  
  35.     @Timing("构建 + 保存正排索引 —— 多线程版本")
  36.     @SneakyThrows
  37.     public void saveForwardIndexesConcurrent(List<Document> documentList) {
  38.         // 1. 批量插入时，每次插入多少条记录（由于每条记录比较大，所以这里使用 10 条就够了）
  39.         int batchSize = 10;
  40.         // 2. 一共需要执行多少次 SQL？   向上取整(documentList.size() / batchSize)
  41.         int listSize = documentList.size();
  42.         int times = (int) Math.ceil(1.0 * listSize / batchSize);    // ceil(天花板): 向上取整
  43.         log.debug("一共需要 {} 批任务。", times);
  44.  
  45.         CountDownLatch latch = new CountDownLatch(times);   // 统计每个线程的完全情况，初始值是 times(一共多少批)
  46.  
  47.         // 3. 开始分批次插入
  48.         for (int i = 0; i < listSize; i += batchSize) {
  49.             // 从 documentList 中截取这批要插入的 文档列表（使用 List.subList(int from, int to)
  50.             int from = i;
  51.             int to = Integer.min(from + batchSize, listSize);
  52.  
  53.             Runnable task = () -> { // 内部类 / lambda 表达式里如果用到了外部变量，外部变量必须的 final（或者隐式 final 的变量）
  54.                 List<Document> subList = documentList.subList(from, to);
  55.  
  56.                 // 针对这个 subList 做批量插入
  57.                 mapper.batchInsertForwardIndexes(subList);
  58.  
  59.                 latch.countDown();      //  每次任务完成之后，countDown()，让 latch 的个数减一
  60.             };
  61.  
  62.             executorService.submit(task);   // 主线程只负责把一批批的任务提交到线程池，具体的插入工作，由线程池中的线程完成
  63.         }
  64.  
  65.         // 4. 循环结束，只意味着主线程把任务提交完成了，但任务有没有做完是不知道的
  66.         // 主线程等在 latch 上，只到 latch 的个数变成 0，也就是所有任务都已经执行完了
  67.         latch.await();
  68.     }
  69.  
  70.     @SneakyThrows
  71.     public void saveInvertedIndexes(List<Document> documentList) {
  72.         int batchSize = 10000;  // 批量插入时，最多 10000 条
  73.  
  74.         List<InvertedRecord> recordList = new ArrayList<>();    // 放这批要插入的数据
  75.  
  76.         for (Document document : documentList) {
  77.             Map<String, Integer> wordToWeight = document.segWordAndCalcWeight();
  78.             for (Map.Entry<String, Integer> entry : wordToWeight.entrySet()) {
  79.                 String word = entry.getKey();
  80.                 int docId = document.getDocId();
  81.                 int weight = entry.getValue();
  82.  
  83.                 InvertedRecord record = new InvertedRecord(word, docId, weight);
  84.  
  85.                 recordList.add(record);
  86.  
  87.                 // 如果 recordList.size() == batchSize，说明够一次插入了
  88.                 if (recordList.size() == batchSize) {
  89.                     mapper.batchInsertInvertedIndexes(recordList);  // 批量插入
  90.                     recordList.clear();                             // 清空 list，视为让 list.size() = 0
  91.                 }
  92.             }
  93.         }
  94.  
  95.         // recordList 还剩一些，之前放进来，但还不够 batchSize 个的，所以最后再批量插入一次
  96.         mapper.batchInsertInvertedIndexes(recordList);  // 批量插入
  97.         recordList.clear();
  98.     }
  99.  
  100.     static class InvertedInsertTask implements Runnable {
  101.         private final CountDownLatch latch;
  102.         private final int batchSize;
  103.         private final List<Document> documentList;
  104.         private final IndexDatabaseMapper mapper;
  105.  
  106.         InvertedInsertTask(CountDownLatch latch, int batchSize, List<Document> documentList, IndexDatabaseMapper mapper) {
  107.             this.latch = latch;
  108.             this.batchSize = batchSize;
  109.             this.documentList = documentList;
  110.             this.mapper = mapper;
  111.         }
  112.  
  113.         @Override
  114.         public void run() {
  115.             List<InvertedRecord> recordList = new ArrayList<>();    // 放这批要插入的数据
  116.  
  117.             for (Document document : documentList) {
  118.                 Map<String, Integer> wordToWeight = document.segWordAndCalcWeight();
  119.                 for (Map.Entry<String, Integer> entry : wordToWeight.entrySet()) {
  120.                     String word = entry.getKey();
  121.                     int docId = document.getDocId();
  122.                     int weight = entry.getValue();
  123.  
  124.                     InvertedRecord record = new InvertedRecord(word, docId, weight);
  125.  
  126.                     recordList.add(record);
  127.  
  128.                     // 如果 recordList.size() == batchSize，说明够一次插入了
  129.                     if (recordList.size() == batchSize) {
  130.                         mapper.batchInsertInvertedIndexes(recordList);  // 批量插入
  131.                         recordList.clear();                             // 清空 list，视为让 list.size() = 0
  132.                     }
  133.                 }
  134.             }
  135.  
  136.             // recordList 还剩一些，之前放进来，但还不够 batchSize 个的，所以最后再批量插入一次
  137.             mapper.batchInsertInvertedIndexes(recordList);  // 批量插入
  138.             recordList.clear();
  139.  
  140.             latch.countDown();
  141.         }
  142.     }
  143.  
  144.     @Timing("构建 + 保存倒排索引 —— 多线程版本")
  145.     @SneakyThrows
  146.     public void saveInvertedIndexesConcurrent(List<Document> documentList) {
  147.         int batchSize = 10000;  // 批量插入时，最多 10000 条
  148.         int groupSize = 50;
  149.         int listSize = documentList.size();
  150.         int times = (int) Math.ceil(listSize * 1.0 / groupSize);
  151.         CountDownLatch latch = new CountDownLatch(times);
  152.  
  153.         for (int i = 0; i < listSize; i += groupSize) {
  154.             int from = i;
  155.             int to = Integer.min(from + groupSize, listSize);
  156.             List<Document> subList = documentList.subList(from, to);
  157.             Runnable task = new InvertedInsertTask(latch, batchSize, subList, mapper);
  158.             executorService.submit(task);
  159.         }
  160.  
  161.         latch.await();
  162.     }
  163. }

实现 IndexerProperties类

  1. @Component  // 是注册到 Spring 的一个 bean
  2. @ConfigurationProperties("searcher.indexer")
  3. @Data // = @Getter + @Setter + @ToString + @EqualsAndHashCode
  4. public class IndexerProperties {
  5.     // 对应 application.yml 配置下的 searcher.indexer.doc-root-path
  6.     private String docRootPath;
  7.     // 对应 application.yml 配置下的 searcher.indexer.url-prefix
  8.     private String urlPrefix;
  9.     // 对应 application.yml 配置下的 searcher.indexer.index-root-path
  10.     private String indexRootPath;
  11. }

实现 Document类

Document类中包含docID，title，url，content相关的信息;
  1. @Slf4j
  2. @Data
  3. public class Document {
  4.     private Integer docId;  // docId 会在正排索引插入后才会赋值
  5.  
  6.     private String title;   // 从文件名中解析出来
  7.     private String url;     // 依赖两个额外的信息（1. https://docs.oracle.com/javase/8/docs/api/  2. 相对路径的相对位置）
  8.     private String content; // 从文件中读取出来，并且做一定的处理
  9. }
  1.     // 针对文档进行分词，并且分别计算每个词的权重
  2.     public Map<String, Integer> segWordAndCalcWeight() {
  3.         // 统计标题中的每个词出现次数 | 分词：标题有哪些词
  4.         List<String> wordInTitle = ToAnalysis.parse(title)
  5.                 .getTerms()
  6.                 .stream()
  7.                 .parallel()
  8.                 .map(Term::getName)
  9.                 .filter(s -> !ignoredWordSet.contains(s))
  10.                 .collect(Collectors.toList());
  11.  
  12.         // 统计标题中，每个词的出现次数 | 统计次数
  13.         Map<String, Integer> titleWordCount = new HashMap<>();
  14.         for (String word : wordInTitle) {
  15.             int count = titleWordCount.getOrDefault(word, 0);
  16.             titleWordCount.put(word, count + 1);
  17.         }
  18.  
  19.         // 统计内容中的词，以及词的出现次数
  20.         List<String> wordInContent = ToAnalysis.parse(content)
  21.                 .getTerms()
  22.                 .stream()
  23.                 .parallel()
  24.                 .map(Term::getName)
  25.                 .collect(Collectors.toList());
  26.         Map<String, Integer> contentWordCount = new HashMap<>();
  27.         for (String word : wordInContent) {
  28.             int count = contentWordCount.getOrDefault(word, 0);
  29.             contentWordCount.put(word, count + 1);
  30.         }
  31.  
  32.         // 计算权重值
  33.         Map<String, Integer> wordToWeight = new HashMap<>();
  34.         // 先计算出有哪些词，不重复
  35.         Set<String> wordSet = new HashSet<>(wordInTitle);
  36.         wordSet.addAll(wordInContent);
  37.  
  38.         for (String word : wordSet) {
  39.             int titleCount = titleWordCount.getOrDefault(word, 0);
  40.             int contentCount = contentWordCount.getOrDefault(word, 0);
  41.             int weight = titleCount * 10 + contentCount;
  42.  
  43.             wordToWeight.put(word, weight);
  44.         }
  45.  
  46.         return wordToWeight;
  47.     }

数据库中创建表

创建 forward_indexes 和 inverted_indexes 表

  1. CREATE SCHEMA `searcher_refactor` DEFAULT CHARACTER SET utf8mb4 ;
  2.  
  3. CREATE TABLE `searcher_refactor`.`forward_indexes` (
  4.     `docid` INT NOT NULL AUTO_INCREMENT,
  5.     `title` VARCHAR(100) NOT NULL,
  6.     `url` VARCHAR(200) NOT NULL,
  7.     `content` LONGTEXT NOT NULL,
  8.     PRIMARY KEY (`docid`))
  9. COMMENT = '存放正排索引\ndocid -> 文档的完整信息';
  10.  
  11. CREATE TABLE `searcher_refactor`.`inverted_indexes` (
  12.     `id` INT NOT NULL AUTO_INCREMENT,
  13.     `word` VARCHAR(100) NOT NULL,
  14.     `docid` INT NOT NULL,
  15.     `weight` INT NOT NULL,
  16.     PRIMARY KEY (`id`))
  17. COMMENT = '倒排索引\n通过 word -> [ { docid + weight }, { docid + weight }, ... ]';

实现 InvertedRecord类

  1. // 这个对象映射 inverted_indexes 表中的一条记录（我们不关心表中的 id，就不写 id 了）
  2. @Data
  3. public class InvertedRecord {
  4.     private String word;
  5.     private int docId;
  6.     private int weight;
  7.  
  8.     public InvertedRecord(String word, int docId, int weight) {
  9.         this.word = word;
  10.         this.docId = docId;
  11.         this.weight = weight;
  12.     }
  13. }

四. 实现搜索模块

实现前端页面

index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>神马搜索</title>
  8.     <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <i class="fa-brands fa-windows item"></i>
  13.         <div class="search-box">
  14.             <input type="text" class="search-btn" placeholder="搜索">
  15.         </div>
  16.         <i class="fa-solid fa-magnifying-glass item search-submit"></i>
  17.     </div>
  18.     <div class="time-box"></div>
  19.     <div class="poem">
  20.         <p>「世间行乐亦如此，古来万事东流水。」</p>
  21.         <p class="author">—— 《梦游天姥吟留别》</p>
  22.     </div>
  23.  
  24.     <div class="background"></div>
  25.  
  26.     <script src="https://kit.fontawesome.com/44e73cd2d1.js" crossorigin="anonymous"></script>
  27.     <script>
  28.         const search = (query) => {
  29.             window.open('/web?query=' + encodeURIComponent(query), '_blank')
  30.         }
  31.  
  32.         const oSearch = document.querySelector('.search-btn')
  33.         oSearch.addEventListener('focus', () => {oSearch.placeholder = ''})
  34.         oSearch.addEventListener('blur', () => {oSearch.placeholder = '搜索'})
  35.         oSearch.addEventListener('keydown', (event) => {
  36.             if (event.keyCode === 13 && oSearch.value.trim().length !== 0) {
  37.                 search(oSearch.value.trim())
  38.                 oSearch.value = ''
  39.                 oSearch.blur()
  40.             }
  41.         })
  42.  
  43.         document.querySelector('.search-submit').addEventListener('click', () => {
  44.             if (oSearch.value.trim().length !== 0) {
  45.                 search(oSearch.value.trim())
  46.                 oSearch.value = ''
  47.             }
  48.         })
  49.  
  50.         const oTimeBox = document.querySelector('.time-box')
  51.         const updateTime = () => {
  52.             let now = new Date()
  53.             let hour = now.getHours()
  54.             let minute = now.getMinutes()
  55.             if (hour < 10) {
  56.                 hour = '0' + hour
  57.             }
  58.             if (minute < 10) {
  59.                 minute = '0' + minute
  60.             }
  61.  
  62.             oTimeBox.textContent = `${hour}:${minute}`
  63.  
  64.             let second = now.getSeconds()
  65.             let r = 60 - second
  66.             setTimeout(updateTime, r * 1000)
  67.         }
  68.         updateTime()
  69.     </script>
  70. </body>
  71. </html>

search.html

  1. <!DOCTYPE html>
  2. <html lang="zh-hans" xmlns:th="https://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title th:text="${query} + ' - 神马搜索'"></title>
  6.     <link rel="stylesheet" href="/query.css">
  7. </head>
  8. <body>
  9.     <!-- th:xxx 是 thymeleaf 的语法 -->
  10. <!--    <div th:text="'你好 ' + ${name} + ' 世界'"></div>-->
  11.     <div class="header">
  12.         <div class="brand"><a href="/">神马搜索</a></div>
  13.         <form class="input-shell" method="get" action="/web">
  14.             <input type="text" name="query" th:value="${query}">
  15.             <button>神马搜索</button>
  16.         </form>
  17.     </div>
  18.  
  19.     <div class="result">
  20.         <!-- th:utext 和 th:text 的区别：要不要进行 HTML 转义 -->
  21. <!--        <div th:text="'<span>你好 th:text</span>'"></div>-->
  22. <!--        <div th:utext="'<span>你好 th:utext</span>'"></div>-->
  23.  
  24.         <div class="result-item" th:each="doc : ${docList}">
  25.             <a th:href="${doc.url}" th:text="${doc.title}"></a>
  26.             <div class="desc" th:utext="${doc.desc}"></div>
  27.             <div class="url" th:text="${doc.url}"></div>
  28.         </div>
  29.     </div>
  30.  
  31. <!--    <div class="result">-->
  32. <!--        <div th:each="item : ${testList}">-->
  33. <!--            <span th:text="${item}"></span>-->
  34. <!--        </div>-->
  35. <!--    </div>-->
  36.  
  37.     <!-- 一直上一页可能走到 page <= 0 的情况 -->
  38.     <!-- 一直下一页可能走到 page > 上限的情况 -->
  39.     <div class="pagination">
  40.         <a th:href="'/web?query=' + ${query} + '&page=' + ${page - 1}">上一页</a>
  41.         <a th:href="'/web?query=' + ${query} + '&page=' + ${page + 1}">下一页</a>
  42.     </div>
  43. </body>
  44. </html>

query.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. .header {
  8.     width: 100%;
  9.     height: 80px;
  10.     position: fixed;    /* 固定不动 */
  11.     left: 0;
  12.     top: 0;
  13.     background-color: #eee;
  14.     border-bottom: 1px solid #ccc;
  15.     padding-left: 120px;
  16.  
  17.     display: flex;
  18.     align-items: center;
  19. }
  20.  
  21. .brand {
  22.     margin-right: 120px;
  23. }
  24.  
  25. .brand a {
  26.     color: inherit;
  27.     text-decoration: none;
  28. }
  29.  
  30. .input-shell {
  31.     width: 800px;
  32.     height: 52px;
  33.     border: 1px solid #aaa;
  34.     border-radius: 4px;
  35.  
  36.     display: flex;
  37.     align-items: stretch;
  38.     justify-content: space-between;
  39. }
  40.  
  41. .input-shell:focus,     /* :focus : 该元素 获得焦点 */
  42. .input-shell:hover {    /* :hover : 鼠标滑过该元素 */
  43.     border: 1px solid #888;
  44. }
  45.  
  46. .input-shell input {
  47.     border: none;
  48.     outline: none;
  49.     width: 600px;
  50.     padding-left: 8px;
  51.     font-size: 22px;
  52. }
  53.  
  54. .input-shell button {
  55.     border: none;
  56.     outline: none;
  57.     width: 200px;
  58.     border-left: 1px solid #ccc;
  59. }
  60.  
  61. .result {
  62.     margin-top: 88px;
  63.     width: 100%;
  64.     padding-left: 120px;
  65. }
  66.  
  67. .result-item {
  68.     display: flex;
  69.     flex-direction: column;
  70.     margin-bottom: 20px;
  71.     align-items: start;
  72. }
  73.  
  74. .result-item a {
  75.     font-size: 22px;
  76.     font-weight: 700;
  77.     color: rgb(42, 107, 205);
  78. }
  79.  
  80. .result-item .desc {
  81.     font-size: 18px;
  82. }
  83.  
  84. .result-item .url {
  85.     font-size: 18px;
  86.     color: rgb(0, 128, 0);
  87. }
  88.  
  89. .result-item .desc i {
  90.     color: red;
  91.     font-style: normal;
  92. }
  93.  
  94. .pagination {
  95.     display: flex;
  96.     align-items: center;
  97.     justify-content: space-around;
  98.     margin-bottom: 12px;
  99. }

style.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. body {
  8.     width: 100vw;
  9.     height: 100vh;
  10.  
  11.     display: flex;
  12.     align-items: center;
  13.     justify-content: center;
  14.  
  15.     position: relative;
  16.     overflow: hidden;
  17. }
  18.  
  19. .container {
  20.     z-index: 1;
  21.  
  22.     height: 60px;
  23.     background-color: rgba(255, 255, 255, .7);
  24.     padding: 0 8px;
  25.     border-radius: 30px;
  26.     backdrop-filter: blur(4px);
  27.     box-shadow: 0 0 5px 1px gray;
  28.  
  29.     display: flex;
  30.     align-items: center;
  31.     justify-content: space-around;
  32. }
  33.  
  34. .time-box {
  35.     z-index: 1;
  36.     position: absolute;
  37.     background-color: transparent;
  38.     height: 40px;
  39.     top: 40%;
  40.     line-height: 40px;
  41.     font-size: 40px;
  42.     text-align: center;
  43.     color: #fff;
  44.     text-shadow: 0 0 4px #000;
  45. }
  46.  
  47. .search-box {
  48.     width: 200px;
  49.     transition: all .3s ease-in-out;
  50. }
  51.  
  52. .container:hover .search-box,
  53. .container:focus-within .search-box {
  54.     width: 440px;
  55. }
  56.  
  57. .container .item {
  58.     margin: auto 20px;
  59.     font-size: 20px;
  60.     opacity: 0;
  61.     transition-delay: .3s;
  62.     transition: all .3s ease;
  63. }
  64.  
  65. .container:focus-within .item {
  66.     opacity: 1;
  67. }
  68.  
  69. .container .search-submit {
  70.     display: inline-block;
  71.     height: 40px;
  72.     width: 40px;
  73.     text-align: center;
  74.     line-height: 40px;
  75.     border-radius: 50%;
  76.     cursor: pointer;
  77. }
  78.  
  79. .container .search-submit:hover {
  80.     background-color: rgba(255, 255, 255, .6);
  81. }
  82.  
  83. .container .search-btn {
  84.     width: 100%;
  85.     border: none;
  86.     outline: none;
  87.     text-align: center;
  88.     background: inherit;
  89.     font-size: 20px;
  90.     transition: all .5s ease-in-out;
  91. }
  92.  
  93. .container .search-btn::placeholder {
  94.     color: rgba(230, 230, 230, .9);
  95.     text-shadow: 0 0 4px #000;
  96.     transition: all .2s ease-in-out;
  97. }
  98.  
  99. .container:hover .search-btn::placeholder,
  100. .container:focus-within .search-btn::placeholder {
  101.     color: rgba(119, 119, 119, .9);
  102.     text-shadow: 0 0 4px #f3f3f3;
  103. }
  104.  
  105. .background {
  106.     position: absolute;
  107.     top: 0;
  108.     right: 0;
  109.     bottom: 0;
  110.     left: 0;
  111.  
  112.     background-image: url(./bg.jpg);
  113.     background-repeat: no-repeat;
  114.     background-size: cover;
  115.     background-position: center;
  116.     object-fit: cover;
  117.  
  118.     transition: all .2s ease-in-out;
  119. }
  120.  
  121. .container:focus-within ~ .background {
  122.     filter: blur(20px);
  123.     transform: scale(1.2);
  124. }
  125.  
  126. .poem {
  127.     z-index: 1;
  128.     position: absolute;
  129.     top: 70%;
  130.     color: #ddd;
  131.     text-shadow: 0 0 2px #000;
  132.     opacity: 0;
  133.     transition: all .2s ease-in-out;
  134.     padding: 12px 32px;
  135.     border-radius: 8px;
  136.     line-height: 2;
  137. }
  138.  
  139. .poem .author {
  140.     opacity: 0;
  141.     text-align: center;
  142.     transition: all .2s ease-in-out;
  143. }
  144.  
  145. .container:focus-within ~ .poem {
  146.     opacity: 1;
  147. }
  148.  
  149. .container:focus-within ~ .poem:hover {
  150.     background-color: rgba(255, 255, 255, .3);
  151.     opacity: 1;
  152. }
  153.  
  154. .container:focus-within ~ .poem:hover .author {
  155.     opacity: 1;
  156. }

实现 Document

  1. @Data
  2. public class Document {
  3.     private Integer docId;
  4.     private String title;
  5.     private String url;
  6.     private String content;
  7.     private String desc;
  8.  
  9.     @Override
  10.     public String toString() {
  11.         return String.format("Document{docId=%d, title=%s, url=%s}", docId, title, url);
  12.     }
  13. }

实现 DescBuilder类

  1. @Slf4j
  2. @Component
  3. public class DescBuilder {
  4.     public Document build(List<String> queryList, Document doc) {
  5.         // 找到 content 中包含关键字的位置
  6.         // query = "list"
  7.         // content = "..... hello list go come do ...."
  8.         // desc = "hello <i>list</i> go com..."
  9.  
  10.         String content = doc.getContent().toLowerCase();
  11.         String word = "";
  12.         int i = -1;
  13.         for (String query : queryList) {
  14.             i = content.indexOf(query);
  15.             if (i != -1) {
  16.                 word = query;
  17.                 break;
  18.             }
  19.         }
  20.         if (i == -1) {
  21.             // 这里中情况如果出现了，说明咱的倒排索引建立的有问题
  22.             log.error("docId = {} 中不包含 {}", doc.getDocId(), queryList);
  23.             throw new RuntimeException();
  24.         }
  25.  
  26.         // 前面截 120 个字，后边截 120 个字
  27.         int from = i - 120;
  28.         if (from < 0) {
  29.             // 说明前面不够 120 个字了
  30.             from = 0;
  31.         }
  32.  
  33.         int to = i + 120;
  34.         if (to > content.length()) {
  35.             // 说明后面不够 120 个字了
  36.             to = content.length();
  37.         }
  38.  
  39.         String desc = content.substring(from, to);
  40.  
  41.         desc = desc.replace(word, "<i>" + word + "</i>");
  42.  
  43.         doc.setDesc(desc);
  44.  
  45.         return doc;
  46.     }
  47. }

五. 项目展示

页面展示

输入展示

搜索展示

视频演示

神马搜索

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/862338
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号