个人网站制作 Part 13 添加搜索功能[Elasticsearch] | Web开发项目

---

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证、数据库集成、电子邮件通知、社交媒体集成、博客功能、用户评论功能、用户权限管理和文件上传功能。

在本篇中，我们将学习如何添加搜索功能，使你的网站更加易用。

🚀 添加搜索功能

🔨使用Elasticsearch

🔧步骤 1: 安装Elasticsearch

首先，确保你的系统上安装了Elasticsearch。你可以在Elasticsearch官方网站找到安装指南。

🔧步骤 2: 配置Elasticsearch

在 server.js 文件中配置Elasticsearch连接：

const { Client } = require('@elastic/elasticsearch');
const elasticClient = new Client({ node: 'http://localhost:9200' });

🔧步骤 3: 创建索引

// 创建Elasticsearch索引
app.post('/create-index', async (req, res) => {
    try {
        const indexName = 'projects'; // 索引名称
        const createIndexResponse = await elasticClient.indices.create({
            index: indexName
        });

        res.json({ message: `索引 '${indexName}' 创建成功` });
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

🔨使用Vue.js

🔧步骤 4: 创建搜索表单

在 index.html 文件中创建搜索表单：

<div id="app">
    <h2>项目搜索</h2>
    <input v-model="searchTerm" placeholder="输入关键词">
    <button @click="searchProjects">搜索</button>

    <ul v-if="searchResults.length > 0">
        <li v-for="result in searchResults" :key="result._id">
            {{ result.title }} - {{ result.description }}
        </li>
    </ul>
    <p v-else>没有匹配的项目</p>
</div>

在 script.js 文件中添加Vue实例中的方法：

const app = new Vue({
    el: '#app',
    data: {
        searchTerm: '',
        searchResults: []
    },
    methods: {
        searchProjects() {
            fetch(`/search?term=${this.searchTerm}`)
                .then(response => response.json())
                .then(data => this.searchResults = data)
                .catch(error => console.error('搜索失败：', error));
        }
    }
});

🔧步骤 5: 创建搜索路由

在 server.js 文件中创建搜索路由：

// 执行Elasticsearch搜索
app.get('/search', async (req, res) => {
    const { term } = req.query;

    try {
        const searchResponse = await elasticClient.search({
            index: 'projects', // 你的Elasticsearch索引名称
            body: {
                query: {
                    match: {
                        title: term
                    }
                }
            }
        });

        const results = searchResponse.body.hits.hits.map(hit => hit._source);
        res.json(results);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有搜索功能的更加易用的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加网站分析工具，使你能够更好地了解访客行为。记得继续关注本系列，为你的网站增添更多强大的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加搜索功能使你的网站更加易用。祝你编码愉快，不断提升技能！