Boost搜索引擎網絡庫與前端(4)

文章目錄

前言
一、引入網絡庫模塊
- 引入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>