当前位置： 首页 > news >正文

Boost搜索引擎 网络库与前端(4)

news 2025/9/6 5:26:31

文章目录

  • 前言
  • 一、引入网络库模块
    • 引入cpp-httplib
    • cpp-httplib测试
    • 正式编写http_server
  • 二、前端模块
  • 三、项目的可能拓展
  • 总结

前言

  终于到了最后一篇喽，嘻嘻！

一、引入网络库模块

引入cpp-httplib

  下载地址如下，我个人不喜欢新版本
  cpp-httplib 下载地址

  我们将cpp-httplib放到项目中的test目录下，并解压 unzip 好
在这里插入图片描述

  再建立软链接到我们的项目路径下

在这里插入图片描述

cpp-httplib测试

#include "cpp-httplib/httplib.h"    int main()    
{    // 创建一个Server对象，本质就是搭建服务端httplib::Server svr; // 这里注册用于处理 get 请求的函数，当收到对应的 get 请求时（请求hi时），程序会执行对应的函数（也就是lambda表达式）svr.Get("/hi", [](const httplib::Request& req, httplib::Response& rsp){ //设置 get "hi" 请求返回的内容   rsp.set_content("hello world！", "text/plain; charset=utf-8");                                                                                                            });   // 绑定端口（8080），启动监听（0.0.0.0表示监听任意端口）svr.listen("0.0.0.0", 8080);  return 0;    
}

  相应的，我们更新一下我们的 makefile

# 定义编译器
CXX = g++# 定义编译器选项
CXXFLAGS = -std=c++11 # 定义目标程序
PARSER = parser
DEBUG = debug
HTTP_SERVER = http_server# 定义链接库
PARSER_LIBS = -lboost_system -lboost_filesystem
DEBUG_LIBS = -ljsoncpp
HTTP_SERVER_LIBS = -ljsoncpp -lpthread# 默认目标
.PHONY: all
all: $(PARSER) $(DEBUG) $(HTTP_SERVER)# 编译parser 
$(PARSER): parser.cc$(CXX) $(CXXFLAGS) -o $@ $< $(PARSER_LIBS)# 编译debug 
$(DEBUG): debug.cc$(CXX) $(CXXFLAGS) -o $@ $< $(DEBUG_LIBS)# 编译http_server 
$(HTTP_SERVER): http_server.cc$(CXX) $(CXXFLAGS) -o $@ $< $(HTTP_SERVER_LIBS)# 清理生成的文件
.PHONY: clean
clean:rm -rf $(PARSER) $(DEBUG) $(HTTP_SERVER)

  编译后，我们直接开始运行这个 http_server

在这里插入图片描述

  访问这个端口后有如下效果

在这里插入图片描述

  问题在于，现在当我们访问服务器的时候，确实这个效果

在这里插入图片描述

  问题在于，像我们访问百度时，www.baidu.com ，百度会给一个首页，所以在我们的项目目录下呢，也需要一个首页，于是我们在本地目录下创建了一下这个 wwwroot 目录，在该目录下创建了一个 index.html 文件

在这里插入图片描述

正式编写http_server

  好了，测试结束，我们差不多大概也了解了 cpphttplib 的用法

#include "cpp-httplib/httplib.h"
#include "searcher.hpp"const std::string input = "data/raw_html/raw.txt";
const std::string root_path = "./wwwroot";int main()
{ns_searcher::Searcher search;search.InitSearcher(input);// 创建一个Server对象，本质就是搭建服务端httplib::Server svr;// 访问首页svr.set_base_dir(root_path.c_str());// 这里注册用于处理 get 请求的函数，当收到对应的get请求时（请求s时），程序会执行对应的函数（也就是lambda表达式）svr.Get("/s", [&search](const httplib::Request &req, httplib::Response &rsp){//has_param：这个函数用来检测用户的请求中是否有搜索关键字，参数中的word就是给用户关键字取的名字（类似word=split）    if(!req.has_param("word")){    rsp.set_content("必须要有搜索关键字!", "text/plain; charset=utf-8");    return;    }    // 获取用户输入的关键字std::string word = req.get_param_value("word");    std::cout << "用户在搜索：" << word << std::endl;    // 根据关键字，构建json串std::string json_string;    search.Search(word, &json_string);// 设置 get "s" 请求返回的内容，返回的是根据关键字，构建json串内容rsp.set_content(json_string, "application/json"); });std::cout << "服务器启动成功......" << std::endl;// 绑定端口（8080），启动监听（0.0.0.0表示监听任意端口）svr.listen("0.0.0.0", 8080);return 0;
}

  此时我直接开始 make 编译代码，先执行 parser 进行数据清洗，然后执行 http_server ，搭建服务，创建单例，构建索引，发生请求（根据用户输入的关键字，进行查找索引，构建 json 串），最后响应给我们用户

在这里插入图片描述

  索引建立成功，服务器也启动成功，这个时候进行浏览器访问 （8080/s）

在这里插入图片描述

  访问(8080/s?word=split)，结果如下

在这里插入图片描述

  到这里差不多我们的后端部分也就完成了

二、前端模块

  其实我前端不怎么会，以下代码几乎都是参考的 DeepSeek，不得不说 AI 还是强大

  以下给出 DS大人 的前端代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><title>Boost 智能搜索引擎</title><style>:root {--primary-color: #4e6ef2;--hover-color: #3b5bdb;--background: #f8f9fa;--text-dark: #2d3436;--text-light: #636e72;}* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', system-ui, sans-serif;}body {background: var(--background);min-height: 100vh;padding: 2rem 1rem;}.container {max-width: 800px;margin: 0 auto;animation: fadeIn 0.5s ease;}.search-box {display: flex;gap: 10px;margin-bottom: 2rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border-radius: 30px;background: white;padding: 5px;}.search-input {flex: 1;padding: 1rem 1.5rem;border: none;border-radius: 30px;font-size: 1.1rem;color: var(--text-dark);transition: all 0.3s ease;}.search-input:focus {outline: none;box-shadow: 0 0 0 3px rgba(78, 110, 242, 0.2);}.search-btn {padding: 0 2rem;border: none;border-radius: 30px;background: linear-gradient(135deg, var(--primary-color), var(--hover-color));color: white;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 8px;}.search-btn:hover {background: var(--hover-color);transform: translateY(-1px);}.result-item {background: white;border-radius: 12px;padding: 1.5rem;margin-bottom: 1rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);transition: transform 0.2s ease;}.result-item:hover {transform: translateX(5px);}.result-title {color: var(--primary-color);font-size: 1.2rem;font-weight: 600;margin-bottom: 0.5rem;text-decoration: none;display: flex;align-items: center;gap: 8px;}.result-title:hover {text-decoration: underline;}.result-desc {color: var(--text-dark);line-height: 1.6;margin-bottom: 0.5rem;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}.result-url {color: var(--text-light);font-size: 0.9rem;font-family: monospace;}.loading {text-align: center;padding: 2rem;color: var(--text-light);}@keyframes fadeIn {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}@media (max-width: 768px) {.search-box {flex-direction: column;border-radius: 15px;}.search-btn {padding: 1rem;justify-content: center;}}</style>
</head><body><div class="container"><div class="search-box"><input type="text" class="search-input" placeholder="请输入搜索关键词..." autofocus><button class="search-btn" onclick="search()"><i class="fas fa-search"></i>搜索</button></div><div class="result-container"></div></div><script>// 增强功能$(document).ready(() => {// 回车键搜索$('.search-input').keypress(e => e.which === 13 && search())// 输入框交互$('.search-input').focus(function () {if (this.value === "请输入搜索关键词...") this.value = ""}).blur(function () {if (this.value === "") this.value = "请输入搜索关键词..."})})function search() {const query = $('.search-input').val().trim()if (!query) return// 显示加载状态$('.result-container').html(`<div class="loading"><i class="fas fa-spinner fa-spin"></i>正在搜索中...</div>`)$.ajax({url: `/s?word=${encodeURIComponent(query)}`,method: 'GET',success: buildResults,error: () => {$('.result-container').html(`<div class="result-item" style="color: #dc3545;"><i class="fas fa-exclamation-triangle"></i>请求失败，请稍后重试</div>`)}})}function buildResults(data) {const container = $('.result-container').empty()if (data.length === 0) {container.html(`<div class="result-item"><div style="color: var(--text-light); text-align: center;"><i class="fas fa-search-minus"></i>没有找到相关结果</div></div>`)return}data.forEach(item => {const elem = $(`<div class="result-item"><a href="${item.url}" class="result-title" target="_blank"><i class="fas fa-link"></i>${item.title}</a><p class="result-desc">${item.desc}</p><div class="result-url">${item.url}</div></div>`)container.append(elem)})}</script>
</body></html>

  再次编译运行后，我们来看看效果，不得不感概nb，这要是以我目前的前端水平，完全设计不出来

在这里插入图片描述

三、项目的可能拓展

  这个时候，发挥我们的脑袋，可以看看我们到底有什么可以拓展发挥的地方

  1. 建立整站搜索

  2. 不使用组件，而是自己设计一下对应的各种方案

  3. 在我们的搜索引擎中，添加竞价排名

  4. 热次统计，智能显示搜索关键词（字典树，优先级队列）

  5. 设置登陆注册，引入对 mysql 的使用

  等等都是可以考虑的地方

总结

  结束喽，其实我这个项目包括上一个都是比较简单的，怎么说呢，刚入门，害，加油吧！

http://www.xdnf.cn/news/1460935.html

相关文章：

  • 力扣hot100:搜索二维矩阵 II(常见误区与高效解法详解)（240）
  • OpenBMC之编译加速篇
  • 三、神经网络
  • VisionPro联合编程相机拍照 九点标定实战
  • pinia状态管理的作用和意义
  • SSD固态硬盘加速优化-明显提高固态硬盘的效率并保持峰值性能-供大家学习研究参考
  • Ubuntu 22.04 网络服务安装配置
  • 硬件开发1-51单片机3-串口
  • 三阶Bezier曲线曲率极值及对应的u的计算方法
  • LeetCode 994 腐烂的橘子
  • 【C语言】深入理解指针（4）
  • 【LeetCode热题100道笔记】旋转图像
  • pycharm解释器使用anaconda建立的虚拟环境里面的python，无需系统里面安装python。
  • MySQL复制技术的发展历程
  • Spring启示录
  • 从传统CNN到残差网络：用PyTorch实现更强大的图像分类模型
  • BenTsao本草-中文医学大模型
  • 【算法--链表】61.旋转链表--通俗讲解
  • 【Day 44】Shell-Git版本控制器
  • 【Python】数据可视化之分类图
  • Day2p2 夏暮客的Python之路
  • 数学建模25c
  • [数据结构] 链表
  • 深度学习之第七课卷积神经网络 (CNN)调整学习率
  • MySQL子查询的分类讲解与实战
  • 从基础到实践：Web核心概念与Nginx入门全解析
  • 前端url参数拼接和提取
  • 嵌入式基础 -- I²C 信号与位层规则
  • Swift 解法详解：LeetCode 371《两整数之和》
  • 漏洞绕过方式