当前位置: 首页 > article >正文

【C++项目实战】校园公告搜索引擎:完整实现与优化指南

52bc67966cad45eda96494d9b411954d.png

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

📖 个人专栏:《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.构建索引

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

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

🔖正排索引
    // 正排索引数据节点
    struct DocInfo{
        string title;    // 文档标题
        string content;  // 文档去标签后的内容
        string url;      // 官网的网址
        string time;     // 文档时间
        uint64_t doc_id; // 文档ID
    };

    // 正排索引通过数组实现,下标天然为文档ID
    vector<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、url
            vector<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; // 文档ID
        string word;     // 关键字
        int weight;      // 关键字的权重
    };
    
    // 倒排索引通过键值对实现,一个关键字映射一个/多个倒排拉链结构
    unordered_map<string, InvertedList> inverted_index;

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

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

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

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

        // 创建倒排索引
        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;  // 定义常量 X
            constexpr int Y = 1;   // 定义常量 Y
            // 统计关键字及其权重,插入InvertedList倒排拉链中
            for(auto &it : word_map)
            {
                InvertedElem word_elem;
                word_elem.doc_id = doc.doc_id; // 文档ID
                word_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;
        }

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

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

📖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.分页功能

通过 prevPagenextPage 函数实现分页浏览:

function prevPage() {
    if (currentPage > 0) {
        currentPage--;
        BuildHtml(); // 更新结果
    }
}

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

📚五、完整演示

下面是《校园公告搜索引擎》项目功能的完整演示:

📖1.初始界面

📖2.无关键字输入

当无关键字输入时,返回用户的结果是经过时间排序的全部文档内容

📖3.输入关键字(无返回)

📖4.输入关键字(有返回) 

🔖默认排序 
🔖按时间排序

📚六、总结

在这里就不对项目本身过多赘述了,下面说一下项目的不足与优化方向:

📖1.优化方向

① 在线更新:目前项目尚未实现在线更新功能,获取的官网公告数据截至 2025年3月14日,最新的官网公告未能同步到搜索引擎。未来可以引入定时任务或实时爬虫机制,确保数据及时更新。

② 热词统计:在搜索时,如果能智能显示热门搜索关键词,可以进一步提升用户体验。

③ 登录系统:由于该搜索引擎主要服务于本校师生,可以增加登录认证功能。

④ 响应速度:目前服务器的响应速度还有提升空间。可以通过优化索引结构、引入缓存机制等。

⑤ 扩大搜索范围:除了教务处官网,未来可以引入其他学校官网(如学院、图书馆、招生办等)的数据作为搜索对象。

⑥ 引入域名:目前项目通过 IP 地址和端口号访问服务器,这种方式不够直观且不利于记忆。

📖2.源码及网址

这里给出项目源码以及访问网址:

项目源码

校园公告搜索引擎


以上就是【校园公告搜索引擎】的全部内容,欢迎指正~ 

码文不易,还请多多关注支持,这是我持续创作的最大动力! 


http://www.kler.cn/a/585269.html

相关文章:

  • 笔记:记一次使用RabbitMq的x-delayed-message延迟消息插件,出现消息立即消费,延迟时间后再次消费,引发的重复消费问题
  • 群发邮件前的邮箱预热:构建良好发件信誉的关键步骤
  • 数据可信、隐私可控:CESS 如何打造波卡生态数据新基建?
  • VS性能分析工具
  • ollama API 本地调用
  • MTK Android12 最近历史任务 最左侧的清除历史任务改到页面底部
  • SAP IBP for Supply Chain Certification Guide (Parag Bakde, Rishabh Gupta)
  • Go语言入门基础详解
  • 深入浅出消息队列 (MQ)
  • 提升开发效率的FPGA/IC小工具
  • CSS3学习教程,从入门到精通,CSS3 选择器语法知识点及案例代码(3)
  • 区块链技术与 DICT(数字化信息与通信技术)的结合
  • 江苏无锡一家汽车零部件企业终止,拓展氢燃料电池存不确定性
  • 网易爆米花 1.8.2| 免费无广告,智能刮削,聚合6大网盘,全端无缝看片
  • ArcGIS助力水文分析:数据处理、地图制作与流域特征提取
  • uni-app打包h5并部署到nginx,路由模式history
  • QKV矩阵:优维大模型自注意力机制的数学之美
  • TCP 采用三次握手建立连接的原因
  • 30天学习Java第六天——Object类
  • C++ const 使用