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

文章目录

• 👩‍💻 基础Web开发练手项目系列：个人网站制作
• • 🚀 添加搜索功能
  • • 🔨使用Elasticsearch
    • • 🔧步骤 1: 安装Elasticsearch
      • 🔧步骤 2: 配置Elasticsearch
      • 🔧步骤 3: 创建索引
      • 🔨使用Vue.js
      • • 🔧步骤 4: 创建搜索表单
        • 🔧步骤 5: 创建搜索路由
        • 🚀 预览与保存
        • 🚀 下一步计划

          ---

          👩‍💻 基础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 文件中创建搜索表单：

           
          项目搜索
            搜索 
           
           {{ result.title }} - {{ result.description }} 
           
           
          没有匹配的项目

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