站内搜索引擎——05_html前端模块（前端程序）

已于 2025-04-03 19:02:19 修改
阅读量676 收藏 13
点赞数 30
CC 4.0 BY-SA版权
分类专栏： 站内搜索引擎项目 C++ Linux 文章标签： 前端 搜索引擎 html
于 2025-03-13 17:54:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/T_X_Parallel/article/details/146238437

请添加图片描述

✨✨欢迎来到T_X_Parallel的博客！！
    🛰️博客主页：T_X_Parallel
    🛰️项目代码仓库：站内搜索引擎项目代码仓库
    🛰️专栏 : 站内搜索引擎项目
    🛰️欢迎关注：👍点赞🙌收藏✍️留言

文章目录

项目环境：vscode、wsl（Ubuntu22.04）、g++/CMake

技术栈：C/C++ C++11、STL、标准库 Boost、Jsoncpp、cppjieba、cpp-httplib、html

1.前言

博主本人没有对前端进行系统学习过，前端代码只写过几次，所以下面如果有什么问题请见谅，可以在评论区指点。因为前端页面代码并没有什么好阐述的，这个模块主要的重点是JavaScript代码，该部分的代码是前端和后端关联的关键，所以着重讲解该部分代码。

html：网页的骨骼，负责网页结构

css：网页的皮肉，负责网页美观

js(javascript)：网页的灵魂，负责动态效果，负责前后端交互

这三个的结合博主知道的有两种，第一种就是像博主一样，分开写，分为三个文件，.html、.css、.js，然后在html中进行链接（具体请看最后的代码展示部分）

还有一种方法就是全部写在html中，（具体请看最后的代码展示部分，会提供两种方式的代码）

关于html、css、js的相关教程参考该网页的内容：w3school

2. 前端页面实现

实现html

首先需要html的基本结构，如果是配置好的vscode，键入!+tab键即可生成一个像下面一样的html基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    
</body>
</html>

这些标签的具体含义就不过多阐述，只讲几个用到的

title标签中的内容就是网页的标题，效果如下图

在这里插入图片描述

body标签里就是接下来要实现结构的地方

<div class=""></div>使用该标签可以定义一个容器，而想搜索引擎中的各种东西就放在该容器了，而整个页面中是一个大容器，里面的就是小容器，层层包裹的

在这里插入图片描述

那么我们可以将搜索框放在一个容器中<div class="search"></div>，将所有结果放在一个容器中<div class="results"></div>，这两个容器放在同一个大容器<div class="container"></div>中，所以目前的结构为以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost 搜索引擎</title>
</head>
<body>
    <div class="container">
        <div class="search">

        </div>
        <div class="results">

        </div>
    </div>
</body>
</html>

然后就是搜索框中的内容定义，首先需要一个搜索框，其次需要一个搜索按钮

<input type="search" id="search-input" title="输入搜索关键字" placeholder="搜索文档">
<button onclick="Search()">搜索</button>

其中type是这个框的类型，id是该输入框的唯一标识符，title是输入框的提示信息，当鼠标悬停时显示，placeholder是输入框的占位符文本，当输入框为空时显示

onclick是设置当点击该按钮时所触发的函数

为了方便接下来的样式调整，可以在结果容器中添加一些类似于结果的容器

<div class="result">
    <a href="#">标题</a>
    <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
    <i>https://blog.youkuaiyun.com/</i>
</div>

实现完就可以注释掉这一部分代码了

实现css

css主要就是美化页面的，具体博主也不过多啰嗦，毕竟博主自己也没有系统学习过，解释起来比较吃力，望谅解

/* 去掉所有网页默认内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 将body中的内容100%与html吻合 */
html,
body {
    height: 100%;
}

.container {
    width: 800px;
    margin: 0px auto;
    margin-top: 15px;
}

.container .search {
    width: 100%;
    height: 60px;
}

.container .search input {
    float: left;
    width: 600px;
    height: 50px;
    border: 2px solid black;
    /* 去掉input输入框的有边框 */
    border-right: none;
    /* 设置内边距，默认文字不要和左侧边框紧挨着 */
    padding-left: 10px;
    /* 设置input内部的字体的颜色和样式 */
    color: #CCC;
    font-size: 14px;
}

.container .search button {
    /* 设置left浮动 */
    float: left;
    width: 150px;
    height: 50px;
    /* 设置button的背景颜色 */
    background-color: #4e6ef2;
    /* 设置button中的字体颜色 */
    color: #FFF;
    /* 设置字体的大小 */
    font-size: 19px;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.container .result {
    width: 100%;
}
.container .results .result {
    margin-top: 15px;
}

.container .results .result a {
    /* 设置为块级元素，单独站一行 */
    display: block;
    /* a标签的下划线去掉 */
    text-decoration: none;
    /* 设置a标签中的文字的字体大小 */
    font-size: 20px;
    /* 设置字体的颜色 */
    color: #4e6ef2;
}
.container .results .result a:hover {
    text-decoration: underline;
}
.container .results .result p {
    margin-top: 5px;
    font-size: 16px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.container .results .result i{
    /* 设置为块级元素，单独站一行 */
    display: block;
    /* 取消斜体风格 */
    font-style: normal;
    color: rgb(9, 181, 9);
}

如果嫌麻烦直接复制粘贴博主的格式即可

3. 前后端交互实现

该部分的内容推荐使用JQuery库来实现，原因就是如果使用原生函数来实现的话成本可能会比较高，所以使用外部库，和后端代码一样。

使用前需要进行链接JQuery库，在head标签中的末尾处添加以下代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引用jQuery库 -->

然后就可以直接使用

因为在上面html中定义的搜索按钮中定义了Search()函数，所以接下来实现的就是该函数

  • 首先先使用jQuery选择器获取输入框中的内容（$代表的就是jQuery）
let query = $(".container .search input").val();
  • 再使用jQuery的ajax方法发送GET请求到/search端点，附带查询参数q，如果请求成果，则调用BuildHtml()函数处理返回的数据
$.ajax({
    type: "GET",
    url: "/search?q=" + query,
    success: function (data) {
        console.log(data);
        BuildHtml(data);
    },
});

注：这里的url中的内容对应的是后端中svr.Get()函数中定义的参数

然后就是实现BuildHtml()函数

  • 首先获取结果容器.results并做清空处理
let results_label = $(".container .results");
results_label.empty();
  • 然后遍历数据并生成HTML

遍历结果数组，为每个结果都创建下相应的HTML标签，并将其田间道结果容器中

for (let elem of data) {
    if (elem == "" || elem == null) {
        continue;
    }
    let a_label = $("<a>", {
        text: elem.title, // 设置链接文本
        href: elem.url,   // 设置链接地址
        target: "_blank", // 设置在新标签页打开
    });
    let p_label = $("<p>", {
        text: elem.summary, // 设置文本
    });
    let i_label = $("<i>", {
        text: elem.url, // 设置文本
    });
    let div_label = $("<div>", {
        class: "result", //设置类名
    });
    a_label.appendTo(div_label); // 添加到result容器中
    p_label.appendTo(div_label); // 添加到result容器中
    i_label.appendTo(div_label); // 添加到result容器中
    div_label.appendTo(results_label); // 将result添加到results容器中
}

4. 代码总览

分开实现

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost 搜索引擎</title>
    <link rel="stylesheet" href="styles.css"><!-- 引用外部CSS文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引用jQuery库 -->
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="search" id="search-input" title="输入搜索关键字" placeholder="搜索文档">
            <button onclick="Search()">搜索</button>
        </div>
        <div class="results">
            <!--为调整格式，先硬编码上一些结果
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div>
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div>
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div> -->
        </div>
    </div>
    <script src="script.js"></script><!-- 引用外部js文件 -->
</body>
</html>

/* styles.css */
/* 去掉所有网页默认内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 将body中的内容100%与html吻合 */
html,
body {
    height: 100%;
}

.container {
    width: 800px;
    margin: 0px auto;
    margin-top: 15px;
}

.container .search {
    width: 100%;
    height: 60px;
}

.container .search input {
    float: left;
    width: 600px;
    height: 50px;
    border: 2px solid black;
    /* 去掉input输入框的有边框 */
    border-right: none;
    /* 设置内边距，默认文字不要和左侧边框紧挨着 */
    padding-left: 10px;
    /* 设置input内部的字体的颜色和样式 */
    color: #CCC;
    font-size: 14px;
}

.container .search button {
    /* 设置left浮动 */
    float: left;
    width: 150px;
    height: 50px;
    /* 设置button的背景颜色 */
    background-color: #4e6ef2;
    /* 设置button中的字体颜色 */
    color: #FFF;
    /* 设置字体的大小 */
    font-size: 19px;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.container .result {
    width: 100%;
}
.container .results .result {
    margin-top: 15px;
}

.container .results .result a {
    /* 设置为块级元素，单独站一行 */
    display: block;
    /* a标签的下划线去掉 */
    text-decoration: none;
    /* 设置a标签中的文字的字体大小 */
    font-size: 20px;
    /* 设置字体的颜色 */
    color: #4e6ef2;
}
.container .results .result a:hover {
    text-decoration: underline;
}
.container .results .result p {
    margin-top: 5px;
    font-size: 16px;
}

.container .results .result i{
    /* 设置为块级元素，单独站一行 */
    display: block;
    /* 取消斜体风格 */
    font-style: normal;
    color: rgb(9, 181, 9);
}

// script.js
function Search() {
    let query = $(".container .search input").val();
    if (query == "" || query == null) {
        let div_label = $("<div>", {
            class: "result",
            text: "请输入关键词后再搜索",
        });
        let results_label = $(".container .results");
        div_label.appendTo(results_label);
        return;
    }
    console.log("query: ", query);
    $.ajax({
        type: "GET",
        url: "/search?q=" + query,
        success: function (data) {
            console.log(data);
            BuildHtml(data);
        },
    });
}

function BuildHtml(data) {
    let results_label = $(".container .results");
    results_label.empty();

    for (let elem of data) {
        if (elem == "" || elem == null) {
            continue;
        }
        let a_label = $("<a>", {
            text: elem.title, // 设置链接文本
            href: elem.url,   // 设置链接地址
            target: "_blank", // 设置在新标签页打开
        });
        let p_label = $("<p>", {
            text: elem.summary, // 设置文本
        });
        let i_label = $("<i>", {
            text: elem.url, // 设置文本
        });
        let div_label = $("<div>", {
            class: "result", //设置类名
        });
        a_label.appendTo(div_label); // 添加到result容器中
        p_label.appendTo(div_label); // 添加到result容器中
        i_label.appendTo(div_label); // 添加到result容器中
        div_label.appendTo(results_label); // 将result添加到results容器中
    }
}

合并实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost 搜索引擎</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引用jQuery库 -->
    <style>
       /* 去掉所有网页默认内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 将body中的内容100%与html吻合 */
        html,
        body {
            height: 100%;
        }

        .container {
            width: 800px;
            margin: 0px auto;
            margin-top: 15px;
        }

        .container .search {
            width: 100%;
            height: 60px;
        }

        .container .search input {
            float: left;
            width: 600px;
            height: 50px;
            border: 2px solid black;
            /* 去掉input输入框的有边框 */
            border-right: none;
            /* 设置内边距，默认文字不要和左侧边框紧挨着 */
            padding-left: 10px;
            /* 设置input内部的字体的颜色和样式 */
            color: #CCC;
            font-size: 14px;
        }

        .container .search button {
            /* 设置left浮动 */
            float: left;
            width: 150px;
            height: 50px;
            /* 设置button的背景颜色 */
            background-color: #4e6ef2;
            /* 设置button中的字体颜色 */
            color: #FFF;
            /* 设置字体的大小 */
            font-size: 19px;
            font-family:Georgia, 'Times New Roman', Times, serif;
        }

        .container .result {
            width: 100%;
        }
        .container .results .result {
            margin-top: 15px;
        }

        .container .results .result a {
            /* 设置为块级元素，单独站一行 */
            display: block;
            /* a标签的下划线去掉 */
            text-decoration: none;
            /* 设置a标签中的文字的字体大小 */
            font-size: 20px;
            /* 设置字体的颜色 */
            color: #4e6ef2;
        }
        .container .results .result a:hover {
            text-decoration: underline;
        }
        .container .results .result p {
            margin-top: 5px;
            font-size: 16px;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

        .container .results .result i{
            /* 设置为块级元素，单独站一行 */
            display: block;
            /* 取消斜体风格 */
            font-style: normal;
            color: rgb(9, 181, 9);
        } 
    </style>
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="search" id="search-input" title="输入搜索关键字" placeholder="搜索文档">
            <button onclick="Search()">搜索</button>
        </div>
        <div class="results">
            <!--为调整格式，先硬编码上一些结果
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div>
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div>
             <div class="result">
                <a href="#">标题</a>
                <p>摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘</p>
                <i>https://blog.youkuaiyun.com/</i>
             </div> -->
        </div>
    </div>
    <script>
        function Search() {
            let query = $(".container .search input").val();
            if (query == "" || query == null) {
                let div_label = $("<div>", {
                    class: "result",
                    text: "请输入关键词后再搜索",
                });
                let results_label = $(".container .results");
                div_label.appendTo(results_label);
                return;
            }
            console.log("query: ", query);
            $.ajax({
                type: "GET",
                url: "/search?q=" + query,
                success: function (data) {
                    console.log(data);
                    BuildHtml(data);
                },
            });
        }

        function BuildHtml(data) {
            let results_label = $(".container .results");
            results_label.empty();

            for (let elem of data) {
                if (elem == "" || elem == null) {
                    continue;
                }
                let a_label = $("<a>", {
                    text: elem.title, // 设置链接文本
                    href: elem.url,   // 设置链接地址
                    target: "_blank", // 设置在新标签页打开
                });
                let p_label = $("<p>", {
                    text: elem.summary, // 设置文本
                });
                let i_label = $("<i>", {
                    text: elem.url, // 设置文本
                });
                let div_label = $("<div>", {
                    class: "result", //设置类名
                });
                a_label.appendTo(div_label); // 添加到result容器中
                p_label.appendTo(div_label); // 添加到result容器中
                i_label.appendTo(div_label); // 添加到result容器中
                div_label.appendTo(results_label); // 将result添加到results容器中
            }
        }
    </script><!-- 引用外部js文件 -->
</body>
</html>

下一个部分就是对整个项目的部分位置进行优化，还有对项目的总结，期待一下吧

请添加图片描述

专栏：站内搜索引擎项目
项目代码仓库：站内搜索引擎项目代码仓库（随博客更新）
都看到这里了，留下你们的珍贵的👍点赞+⭐收藏+📋评论吧

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

T_X_Parallel〆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值