网页设计教程网页设计培训/郑州seo团队

🎬 个人主页：谁在夜里看海.

📖 个人专栏：《C++系列》《Linux系列》《算法系列》

⛰️ 道阻且长，行则将至

📚一、项目概述

📖1.项目背景

📖2.主要功能

📖3.界面展示

📚二、技术背景

📖1.技术栈

📖2.核心逻辑

📚三、后端实现

📖1.构建原生数据库

🔖网页爬取

🔖数据整理

🔖标签清洗

🔖保存信息

📖2.构建索引

🔖正排索引

🔖倒排索引

📖3. 编写查询程序

🔖对搜索关键字分词

🔖对检索结果进行去重

🔖对检索结果排序

🔖序列化与摘要生成

🔖构建JSON结果

📖4.编写服务器主程序

🔖初始化索引

🔖设置HTTP服务器

🔖处理搜索请求

📚四、前端实现

📖1.页面结构

📖2.搜索功能

📖3.结果展示

📖4.分页功能

📚五、完整演示

📖1.初始界面

📖2.无关键字输入

📖3.输入关键字（无返回）

编辑

📖4.输入关键字（有返回）

🔖默认排序编辑

🔖按时间排序

📚六、总结

📖1.优化方向

📖2.源码及网址

📚一、项目概述

📖1.项目背景

杭州师范大学教务处官网是学校发布公告的重要平台，旨在为校内师生提供及时的信息服务。然而，目前官网存在以下问题：

① 更新滞后：主页展示的公告多为旧信息，用户难以快速获取最新动态，增加了时间成本。

② 搜索功能不足：官网搜索引擎缺乏按时间排序的功能，这显然满足不了用户的核心需求，因为公告具有时效性。

③ 界面设计欠佳：搜索界面不够美观，用户体验较差。

基于以上问题，我决定开发一个教务处官网公告的搜索引擎，旨在为校内师生提供一个更高效、更直观的信息检索工具，帮助用户快速获取最新公告信息，提升使用体验。

📖2.主要功能

校园公告搜索引擎是一个专门服务于本校师生的信息检索平台，其核心功能是基于教务处官网的公告公文提供关键字搜索服务。用户可以通过在搜索框中输入关键字，快速浏览相关公告的摘要信息，并直接点击链接跳转至学校官网查看完整内容，实现高效便捷的信息获取。下面是项目的界面展示：

📖3.界面展示

界面设计简洁直观，包含以下内容：

① 搜索框：位于页面顶部显著位置，支持用户输入关键字进行公告检索；

② 按时间排序选项：位于搜索框侧边，提供将搜索结果按发布时间排序的功能。考虑到官网公告的时效性，这个功能是很必要的。

③ 翻页按钮：位于页面底部，方便用户在搜索结果较多时进行分页浏览。

学校官网也有自己的搜索引擎，但是不具备时间排序的功能，这就有一个问题：用户想通过关键词搜索到最新的公告，但是服务器返回的结果是默认按照关键词权重（关键词在文章0出现的频率）进行排序的，用户并不能立刻得到想要的结果：

这是学校官网的搜索结果：

这是个人引擎的搜索结果：

由于引擎搜索数据来源全部来自学校官网，数据量其实并不大（从教务处官网爬下来的公告，总共也就两千多条），所以关键字的覆盖范围有限，如果用户输入了一个不存在的关键字，系统会贴心地给出提示，并给出以下选项：

① 跳转学校官网：可以直接去学校官网查看最新公告（目前项目还有瑕疵，尚未实现在线更新功能，有待后续开发）；

② 访问博主个人博客：相当于打个广告吧hh；

③ 查看项目源码：如果对这个项目感兴趣，也可以跳转查看源码。

📚二、技术背景

📖1.技术栈

本项目采用以下技术栈：

Boost准标准库：用于高效的文件操作和字符串处理。

cppjieba分词库：实现中文关键字的分词功能，提升搜索准确性。

jsoncpp序列化工具：将搜索结果序列化为JSON格式，便于前后端交互。

httplib服务器库：快速搭建轻量级HTTP服务器，处理搜索请求与响应。

接下来，详细介绍项目的具体实现过程。

📖2.核心逻辑

首先我们需要了解搜索引擎的核心逻辑：客户端发送搜索关键字，服务端根据关键字检索匹配对应的结果，并将结果返回给客户端。搜索结果通常由三部分组成：

① 文档标题：简明扼要地概括文档内容；

② 文档摘要：包含关键字的部分内容，帮助用户快速了解文档相关性；

③ 文档URL：提供跳转链接，方便用户查看完整内容。

所以实现搜索返回结果，最关键的是：如何根据关键字匹配返回内容？返回内容从何而来？我们不能简单地将客户端的关键字转发给其他搜索引擎，因为返回结果必须来自本地服务器。因此，我们需要在本地构建一个数据库，存储文档的基本数据单元，即：文档标题、文档摘要、文档URL。

文档内容又从何而来，市面上主流的搜索引擎（如Google、百度）通过网络爬虫不断从互联网上抓取网页内容，将其转换为数据单元并存储在本地数据库中，从而实现全网搜索。

构建一个全网搜索引擎的成本和资源需求极高，尤其是对于个人开发者来说，无论是数据存储、计算能力还是网络带宽，都远远超出了博主现有云服务器的承载能力。然而，实现一个校园网站公告的搜索引擎则是一个更加实际和可行的选择。校园公告的数据量相对较小，存储和检索的开销也相对较低，完全可以在云服务器的能力范围内高效运行。这种小而精的项目不仅降低了技术门槛，还能为校园用户提供切实的便利，是一个理想的学习和实践目标。

📚三、后端实现

在掌握了搜索引擎的基本原理和数据结构后，我们开始着手实现后端部分。以下是具体的设计与实现过程：

📖1.构建原生数据库

🔖网页爬取

首选，我们需要从教务处官网爬取内容，将结果保存为本地.html文件，这些文件是后续处理的基础数据源。这里我们使用wget工具进行网页爬取：

wget是一个强大的命令行工具，用于从网络上下载文件，具有递归下载、断点续传、限速等特性，非常适合用于批量下载文件或爬取网站内容。我们在云服务终端输入以下命令：

wget --recursive --no-clobber --no-parent --convert-links --domains jwc.hznu.edu.cn --directory-prefix=data/source_html -A .shtml https://jwc.hznu.edu.cn/

参数说明：

--recursive：递归下载整个网站的内容；

--no-clobber：如果文件已存在，则不会重复下载（避免覆盖）；

--no-parent：不下载父目录中的内容，仅限当前目录及子目录；

--convert-links：将下载的文件中的链接转换为本地链接，方便本地查看；

--domains jwc.hznu.edu.cn：限制只下载指定域名下的内容

--directory-prefix=data/source_html：将下载的内容保存到 data/source_html 目录下；

-A .shtml：仅下载 .shtml 文件。

官网的文件就是shtml格式的，这样我们就能准确地将所有公告文件爬取到本地，忽略不需要的文件。由于官网中公告文件都保存在“/c”目录下，我们通过wget工具爬取到本地后转换成本地链接，也是保存在/c目录下面：

我们可以看到，公告文件是按照时间进行分目有序存储，我们可以通过find指令查看总文件数：

接下来的步骤，就是把下载下来的2064个shtml文件整理到一起：

🔖数据整理

爬取到的 .html 文件内容较为杂乱，需要进一步整理并提取关键信息。为了实现这一目标，首先需要递归地遍历 /c 目录，获取全部的 .shtml 文件。虽然可以通过 open 打开文件读取数据，但递归访问目录是一个需要解决的问题。这里，我们可以使用 Boost.Filesystem 库来实现这一功能。

Boost.Filesystem 是一个强大的文件系统操作库，提供了跨平台的目录遍历、文件操作等功能。然而，Boost 并不是 C++ 官方标准库，因此需要先下载并安装到本地才能使用。

下面是Boost::filesystem库的具体使用过程：

// 借助 Boost 库递归遍历目录，汇总 .html 文件
bool Enumfile(const string &src_path, vector<string> *files_list)
{namespace fs = boost::filesystem; // 命名空间别名，简化代码fs::path root_path(src_path);    // 将字符串路径转换为 boost::filesystem::path 对象// 判断路径是否存在if (!fs::exists(root_path)){cerr << src_path << " not exists!" << endl;return false;}// 设置一个空的迭代器，作为结束标志fs::recursive_directory_iterator end;// 递归遍历目录for (fs::recursive_directory_iterator it(root_path); it != end; ++it){// 如果当前文件不是普通文件，则跳过if (!fs::is_regular_file(*it))continue;// 如果当前文件后缀不是 .html，则跳过if (it->path().extension() != ".html")continue;// 将文件名以字符串形式插入列表files_list->push_back(it->path().string());}return true;
}

如此一来，我们所有的shtml文件内容就以一个个字符串的形式保存在了vector数组中。

🔖标签清洗

shtml文件中包含了关于整个网页的内容，但是我们只需要三部分内容：文档标题、文档摘要、文档URL。所以下一步，我们要从shtml源文件中提取出这三要素作为一个数据单元进行存储，这个步骤就是标签清洗的过程。

①文档标题

在html中，<title>定义网页的标题，但是在官网公告中

将“杭州师范大学教务处”作为网页的标题，而并不是公告的标题，所以我们需要找到公告标题对应的标签是什么。在网页中，我们选中公告标题，选择网页检查，就可以看到源码中的位置：

原来标题被定义为了<h1>标签，也就是一级标题，所以我们在源文件中，只需要定位到<h1>标签就可以找到文档标题了。

②文档正文

文档正文内容位于标签<div class=\"sp-content\">下，我们同样定位到该标签处，将后续标签清洗，保留正文部分。

标签清洗的核心逻辑是：在遍历 HTML 内容时，忽略掉所有被 < 和 > 包围的部分（即标签），而保留未被 < 和 > 包围的部分（即正文内容）。为了实现这一逻辑，我们可以通过定义一个状态机来实现。

状态机的设计如下：

① 初始状态为 TAG，因为遍历通常从 < 开始；

② 当遇到 > 时，状态从 TAG 切换到 CONTENT，表示接下来是正文部分；

③ 当再次遇到 < 时，状态从 CONTENT 切换回 TAG，表示接下来的内容是标签；

④ 重复上述过程，直到遍历完整个 HTML 内容。

static bool ParseContent(const string &file, string *content)
{size_t begin = file.find("<div class=\"sp-content\">");if(begin == string::npos){return false;}begin += string("<div class=\"sp-content\">").size();size_t end = file.find("<div class=\"foter\">");if(end == string::npos){return false;}// 使用状态机，去除标签enum status{LABLE,CONTENT};enum status s = LABLE;for(size_t i = begin; i < end; ++i){// cout << "curent status: " << s << endl;switch(s){case LABLE:if(file[i] == '>'){s = CONTENT;}break;case CONTENT:if(file[i] == '<'){s = LABLE;}else{char tmp = file[i];if(tmp == '\n') tmp = ' ';content->push_back(tmp);}break;default:break;}}return true;
}

③文档URL

在 HTML 源码中，通常不会直接包含网页的完整 URL 信息，因此我们需要通过其他方式推断出 URL。网页在网站中的存储通常遵循一定的路径规则。以教务处官网为例，所有公告网页都存储在 /c 目录下。当我们使用 wget 工具将这些网页下载到本地时，文件的路径结构与官网保持一致，即在本地也保留了 /c 目录下的相对路径。基于这一特性，我们可以通过以下步骤获取网页的完整 URL：即将官网的基础路径与本地文件的相对路径拼接，就得到了完整的URL。

🔖保存信息

我们将提取出的文档标题、文档摘要和文档URL这三个关键信息存储在一个 DocInfo 结构体中，作为基本的数据单元，然后将这些数据单元按行写入到一个文本文件（ raw.txt）中，其中每个数据单元内部的字段之间用特殊分隔符（如 \3）分隔，不同数据单元之间用换行符 \n 分隔。这个 raw.txt 文件不仅实现了数据的持久化存储，还为后续索引构建和搜索功能提供基础数据源。

下面是构建原生数据库的核心代码片段：

const string src_path = "data/source_html/test";
const string output = "data/raw_data/test.txt";typedef struct DocInfo{string title;   // 文档标题string content; // 文档的内容string url;     // 文档的url
}DocInfo_t;// const & 输入
//       * 输出
//       & 输入输出
bool Enumfile (const string &src_path, vector<string> *files_list);
bool ParseHtml (const vector<string> &files_list, vector<DocInfo_t> *results);
bool SaveHtml (const vector<DocInfo_t> &results, const string &output);int main()
{// 1.遍历指定目录，将html文件汇总在列表里vector<string> files_list;if(!Enumfile(src_path, &files_list)){cerr << "Enum file name error!" << endl;return 1;}// 2.将列表中的每个文件进行解析，提取关键数据vector<DocInfo_t> results;if(!ParseHtml(files_list, &results)){cerr << "Parse html error!" << endl;return 2;}// 3.将解析后的数据保存到指定文件中if(!SaveHtml(results, output)){cerr << "Save html error!" << endl;return 3;}return 0;
}

📖2.构建索引

在数据库建立完成后，我们可以编写程序处理搜索关键字并返回相关内容：首先接收用户输入的关键字，然后在数据库中检索 title 和 content 字段包含该关键字的文档；由于一个关键字可能匹配多个文档，而数据库未对结果排序，我们需要将这些文档提取到 vector 容器中，按相关性或其他规则进行排序，最后将排序后的文档作为搜索结果返回给用户。

所以第一步我们需要建立的是通过文档ID索引文档信息的正排索引。

🔖正排索引

    // 正排索引数据节点struct DocInfo{string title;    // 文档标题string content;  // 文档去标签后的内容string url;      // 官网的网址string time;     // 文档时间uint64_t doc_id; // 文档ID};// 正排索引通过数组实现，下标天然为文档IDvector<DocInfo> forward_index;

构建正排索引的过程是通过文档 ID 索引文档信息。在 vector 容器中，下标天然可以作为文档 ID，而文档信息结构包括【title、content、URL、ID】。我们可以使用 std::ifstream 创建一个读取流，将文档内容写入流中，并通过 std::getline 方法循环读取，每次读取的恰好是一个文档（文档之间用 \n 分隔）。

读取到的文档是一个字符串，信息段之间用 \3 分隔，因此需要对字符串进行分割。我们可以手动编写分割代码（遍历字符串，遇到 \3 时分割），也可以使用 boost::split 方法，它能够根据指定字符分割字符串，并将结果存储到 vector 数组中。分割完成后，将数据段组合成 DocInfo 结构，并存储到正排索引的 vector 容器中。

下面是构建正排索引的代码实现：

        // 创建正排索引DocInfo *BuildForwardInfo(const string &line){// 1.对字符串进行切分：title、content、urlvector<string> results;const string sep = "\3";ns_util::StringUtil::CutString(line, &results, sep);if(results.size() < 3){return nullptr;}// 2.字符串填充到DocInfo结构中DocInfo doc;doc.title = results[0];doc.content = results[1];doc.url = results[2];doc.doc_id = forward_index.size();// 从URL中提取时间doc.time = ExtractTimeFromUrl(doc.url);// 3.插入到正排索引的vector中forward_index.push_back(move(doc));return &forward_index.back();}

🔖倒排索引

    // 倒排索引数据节点struct InvertedElem{uint64_t doc_id; // 文档IDstring word;     // 关键字int weight;      // 关键字的权重};// 倒排索引通过键值对实现，一个关键字映射一个/多个倒排拉链结构unordered_map<string, InvertedList> inverted_index;

为了通过关键字获取文档信息，我们需要构建倒排索引。倒排索引是一种映射关系，通过关键字映射到文档信息，文档信息结构包括【ID、word关键字、weight权重】。其中，文档 ID 用于索引正排容器以获取更详细的文档信息，而 weight 权重则用于文档的排序。由于关键字在每个文档中出现的频率不同，我们需要将检索到的文档按照关键字出现频率从高到低排列返回。

因此，我们需要构建倒排索引结构，这就要求我们将所有关键字列举出来。关键字是从文档的 title 和 content 中提取的，因此在构建每一个正排索引时，可以同时构建该文档的所有关键字的倒排索引。那么，关键字的提取规则是什么呢？

我们可以使用 cppjieba 分词工具，其中的 jieba::for_search 方法专门用于搜索关键字的分词。由于关键字在 title 和 content 中出现的权重不同，我们需要定义两个 vector 容器，分别存储 title 和 content 的关键字分词结果，并分别统计关键字出现的次数。最后，按照特定算法计算关键字的权重，从而完成倒排索引的构建。

下面是构建倒排索引的代码实现：

        // 创建倒排索引bool BuildInvertedIndex(const DocInfo &doc){struct word_cnt{int title_cnt;int content_cnt;word_cnt(): title_cnt(0), content_cnt(0) {};};unordered_map<string, word_cnt> word_map;// 对标题进行分词vector<string> title_words;ns_util::JiebaUtil::CutString(doc.title, &title_words);// 统计标题中关键字的频次for(auto &it : title_words){word_map[it].title_cnt++;}// 对正文进行分词vector<string> content_words;ns_util::JiebaUtil::CutString(doc.content, &content_words);// 统计正文中关键字的频次for(auto &it : content_words){word_map[it].content_cnt++;}constexpr int X = 10;  // 定义常量 Xconstexpr int Y = 1;   // 定义常量 Y// 统计关键字及其权重，插入InvertedList倒排拉链中for(auto &it : word_map){InvertedElem word_elem;word_elem.doc_id = doc.doc_id; // 文档IDword_elem.word = it.first; // 关键字word_elem.weight = it.second.title_cnt * X + it.second.content_cnt * Y; // 计算权重（简易版）InvertedList &inverted_list = inverted_index[it.first];inverted_list.push_back(move(word_elem));}return true;}

因此，构建索引的步骤如下：循环读取数据库，提取每个文档并构建对应的正排索引，然后根据正排索引中的 title 和 content 提取全部关键字，构建倒排索引。

至此，我们已经可以正式编写执行查询流程的程序了。

📖3. 编写查询程序

🔖对搜索关键字分词

用户输入的关键字并不能直接用于索引搜索，而是需要先进行分词处理。我们可以使用 jieba 分词工具对关键字进行切分，然后将分词结果放入倒排索引中进行检索。

这里存在一个问题：同一个文档可能会被多次返回。例如，文档内容为“小明来了北京”，用户搜索的关键字也是“小明来了北京”，分词结果为“小明/来了/北京”，这三个词可能分别检索到同一个文档。如果不对这种情况进行去重处理，搜索结果中就会出现重复的文档。

我们通过 JiebaUtil::CutString 方法对 query 进行分词，并将分词结果存储在 words 中：

    class StringUtil{public:static void CutString(const string &target, vector<string> *out, const string &sep){boost::split(*out, target, boost::is_any_of(sep), boost::token_compress_on); // 压缩重复字符}};

🔖对检索结果进行去重

为了解决重复文档的问题，我们使用哈希表 inverted_map，通过文档 ID 映射倒排索引的方式完成去重操作。对于检索到的重复文档，将其权重累加起来。由于这些文档是由不同关键字检索到的，还需要将这些关键字保存起来。为此，我们定义了 InvertedElemPrint 结构，用于存储文档 ID、关键字列表和权重。

我们遍历每个分词结果，从倒排索引中获取相关文档，并将其合并到 inverted_map 中：

unordered_map<uint64_t, InvertedElemPrint> inverted_map;
for(string word : words) {boost::to_lower(word);ns_index::InvertedList *word_list = index->GetInvertedIndex(word);if(nullptr == word_list) continue;for(const auto &elem: *word_list) {auto &item = inverted_map[elem.doc_id];item.doc_id = elem.doc_id;item.words.push_back(elem.word);item.weight += elem.weight;}
}

🔖对检索结果排序

在得到去重后的倒排索引集合后，需要按照权重 weight 对结果进行降序排列。我们使用 std::sort 函数实现这一排序操作，确保最相关的文档排在前面。

我们将 inverted_map 中的数据移动到 gather 中，并按权重排序：

vector<InvertedElemPrint> gather;
for(const auto &item : inverted_map) {gather.push_back(move(item.second));
}
sort(gather.begin(), gather.end(), [](const InvertedElemPrint &e1, const InvertedElemPrint &e2) {return e1.weight > e2.weight;
});

🔖序列化与摘要生成

整理后的索引结果无法直接通过网络传输，需要以序列化和反序列化的方式进行处理。我们使用 Json 作为通用的序列化工具，构建 json 字符串返回给用户。但还有一个问题：索引中提取的是文档的全部正文内容，如果直接将全部内容返回并显示在用户的搜索界面上，显然不够友好。因此，我们需要对正文部分生成摘要，便于用户快速了解文档内容并决定是否跳转查看详情。

摘要内容最好包含用户搜索的关键字。我们通过 GetDigest 方法生成摘要：在 content 中查找第一个关键字的位置，然后取关键字前 50 字节和后 100 字节作为摘要内容。

string GetDigest(const string &content, const string &key) {const int prev_chars = 50;const int next_chars = 100;auto itea = search(content.begin(), content.end(), key.begin(), key.end(), [](char a, char b) {return (tolower(a) == tolower(b));});if(content.end() == itea) return "未找到关键词";// 计算字符位置并生成摘要string utf8_content = content;vector<size_t> char_positions;size_t byte_pos = 0;while (byte_pos < utf8_content.size()) {char_positions.push_back(byte_pos);unsigned char c = utf8_content[byte_pos];if (c < 0x80) byte_pos += 1;else if (c < 0xE0) byte_pos += 2;else if (c < 0xF0) byte_pos += 3;else byte_pos += 4;}int char_pos = distance(content.begin(), itea);int char_index = 0;for (size_t i = 0; i < char_positions.size(); i++) {if (char_positions[i] >= (size_t)char_pos) {char_index = i;break;}}int start_char = max(0, char_index - prev_chars);int end_char = min((int)char_positions.size() - 1, char_index + next_chars);size_t start_byte = char_positions[start_char];size_t end_byte = (end_char + 1 < char_positions.size()) ? char_positions[end_char + 1] : utf8_content.size();string digest = utf8_content.substr(start_byte, end_byte - start_byte);bool has_more_at_start = (start_char > 0);bool has_more_at_end = (end_char < (int)char_positions.size() - 1);if (has_more_at_start) digest = "..." + digest;if (has_more_at_end) digest = digest + "...";return digest;
}

🔖构建JSON结果

最后，我们将排序后的结果构建为 json 字符串返回给用户。

void BuildJsonResult(const vector<InvertedElemPrint> &gather, string *json_string) {Json::Value root;for(auto &item : gather) {ns_index::DocInfo *doc = index->GetForwardIndex(item.doc_id);if(nullptr == doc) continue;Json::Value elem;elem["title"] = doc->title;elem["digest"] = GetDigest(doc->content, item.words[0]);elem["url"] = doc->url;elem["id"] = doc->doc_id;elem["weight"] = item.weight;elem["time"] = doc->time;root.append(elem);}Json::StyledWriter writer;*json_string = writer.write(root);
}

📖4.编写服务器主程序

我们使用 httplib 库实现了一个简单的 HTTP 服务器，用于处理用户的搜索请求并返回结果。httplib 是一个轻量级的 C++ HTTP 库，易于集成和使用。

🔖初始化索引

在程序启动时，我们首先需要初始化搜索引擎的索引。通过调用 ns_sercher::Sercher 类的 InitIndex 方法，从指定的数据文件 data/raw_data/raw.txt 中加载数据并构建正排索引和倒排索引。

ns_sercher::Sercher serch;
serch.InitIndex(input);

🔖设置HTTP服务器

我们使用 httplib 库创建一个 HTTP 服务器，并设置服务器的根目录为 ./wwwroot。该目录用于存放静态资源文件（如 HTML、CSS、JavaScript 等），供客户端访问。

httplib::Server svr;
svr.set_base_dir(root_path.c_str());

🔖处理搜索请求

我们为服务器定义了一个 /search 路由，用于处理用户的搜索请求。该路由通过 GET 方法接收用户输入的关键字，并根据请求参数执行不同的搜索逻辑。

根据请求参数 time_priority 的值，决定是按时间排序还是按权重排序：

if (time_priority){cout << "按时间排序" << endl;serch.TimePrioritySerch(word, &json_string);
} else {cout << "按权重排序" << endl;serch.CommonSerch(word, &json_string);
}

如果搜索关键词为空，返回全部文档的时间排序结果（便于浏览最新公告）：

// 检查输入是否为空或仅包含空格
if (word.empty() || word.find_first_not_of(' ') == string::npos) {cout << "返回所有文档信息" << endl;serch.GetAllDocuments(&json_string);resp.set_content(json_string, "application/json; charset=utf-8");return;
}

如果搜索关键字不存在，则返回空结果和广告信息：

if (json_string.empty()) {json_string = R"({"results": [], "ads": [{"text": "进入校园官网：", "url": "https://jwc.hznu.edu.cn/", "linkText": "杭州师范大学教务处"},{"text": "分享学习笔记，记录生活点滴，欢迎访问我的博客：", "url": "https://kanhai-night.blog.csdn.net", "linkText": "Kanhai's 技术博客"},{"text": "本项目已开源：", "url": "https://gitee.com/HZNUYuwen/Linux_gitee/tree/master/HZNUSercher", "linkText": "查看项目源码"}]})";
}

📚四、前端实现

前端页面实现了搜索功能的核心交互逻辑，包括关键字输入、搜索请求、结果展示和分页浏览。以下是对主要功能的介绍：

📖1.页面结构

页面分为以下几个部分：

① 搜索框：用户输入关键字，并选择是否按时间排序。

② 搜索结果区域：动态展示搜索结果的标题、摘要和链接。

③ 分页控件：支持上一页和下一页的翻页操作。

<div class="container initial-state"><div class="search"><input type="text" value="请输入搜索关键字"><div class="search-options"><label><input type="checkbox" id="time-priority"> 按时间先后</label></div><button onclick="Search()">搜索一下</button></div><div class="result hidden"><!-- 动态生成网页内容 --></div><div class="pagination hidden"><button onclick="prevPage()">上一页</button><span id="page-info"></span><button onclick="nextPage()">下一页</button></div>
</div>

📖2.搜索功能

通过 Search 函数发起搜索请求，将用户输入的关键字发送到后端，并动态更新搜索结果：

function Search() {currentQuery = $(".container .search input").val().trim(); // 获取关键字let timePriority = $("#time-priority").is(":checked"); // 是否按时间排序$.ajax({type: "GET",url: "/search?word=" + currentQuery + "&time_priority=" + timePriority,success: function(data) {searchResults = data; // 保存搜索结果currentPage = 0; // 重置页码BuildHtml(); // 渲染结果setResultState(); // 切换到结果状态}});
}

📖3.结果展示

通过 BuildHtml 函数动态生成搜索结果，并支持关键字高亮显示：

function BuildHtml() {let result_lable = $(".container .result");result_lable.empty(); // 清空之前的结果let start = currentPage * resultsPerPage;let end = start + resultsPerPage;let pageResults = searchResults.slice(start, end); // 获取当前页结果for (let elem of pageResults) {let highlightedTitle = highlightKeyword(elem.title, currentQuery); // 高亮标题let highlightedDigest = highlightKeyword(elem.digest, currentQuery); // 高亮摘要result_lable.append(`<div class="item"><a href="${elem.url}" target="_blank">${highlightedTitle}</a><p>${highlightedDigest}</p><i>${elem.url}</i><span style="display: block; color: #888; font-size: 12px; margin-top: 5px;">${elem.time ? "发布时间: " + elem.time : ""}</span></div>`);}
}

📖4.分页功能

通过 prevPage 和 nextPage 函数实现分页浏览：

function prevPage() {if (currentPage > 0) {currentPage--;BuildHtml(); // 更新结果}
}function nextPage() {if ((currentPage + 1) * resultsPerPage < searchResults.length) {currentPage++;BuildHtml(); // 更新结果}
}