个人网站制作 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开发中许多重要的基础知识，并通过添加搜索功能使你的网站更加易用。祝你编码愉快，不断提升技能！