实现一个全栈模糊搜索匹配的功能

提供一个全栈实现的方案，包罗 Vue 3 前端、Express 后端和 MySQL 数据库的分类模糊搜索功能。让我们徐徐来看：
1. 数据库设计 (MySQL)

起首，我们必要一个存储分类的表：

1. CREATE TABLE categories (
2.   id INT AUTO_INCREMENT PRIMARY KEY,
3.   name VARCHAR(255) NOT NULL,
4.   created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
5. );
7. -- 插入一些示例数据
8. INSERT INTO categories (name) VALUES
9. ('Electronics'), ('Books'), ('Clothing'), ('Home & Garden'), ('Sports');

复制代码

2. 后端实现 (Express)

安装必要的包

1. npm install express mysql2

复制代码

创建数据库毗连

1. // db.js
2. const mysql = require('mysql2/promise');
4. const pool = mysql.createPool({
5.   host: 'localhost',
6.   user: 'your_username',
7.   password: 'your_password',
8.   database: 'your_database',
9.   waitForConnections: true,
10.   connectionLimit: 10,
11.   queueLimit: 0
12. });
14. module.exports = pool;

复制代码

实现 Express 路由

1. // app.js
2. const express = require('express');
3. const db = require('./db');
4. const app = express();
6. app.use(express.json());
8. app.get('/api/categories/search', async (req, res) => {
9.   try {
10.     const { query } = req.query;
11.     const [rows] = await db.query(
12.       'SELECT * FROM categories WHERE name LIKE ?',
13.       [`%${query}%`]
14.     );
15.     res.json(rows);
16.   } catch (error) {
17.     console.error(error);
18.     res.status(500).json({ error: 'Internal server error' });
19.   }
20. });
22. const PORT = process.env.PORT || 3000;
23. app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

复制代码

3. 前端实现 (Vue 3)

创建一个新的 Vue 3 组件

1. <!-- CategorySearch.vue -->
2. <template>
3.   <div>
4.     <input
5.       v-model="searchQuery"
6.       @input="searchCategories"
7.       placeholder="Search categories..."
8.     />
9.     <ul>
10.       <li v-for="category in categories" :key="category.id">
11.         {{ category.name }}
12.       </li>
13.     </ul>
14.   </div>
15. </template>
17. <script>
18. import { ref } from 'vue';
19. import axios from 'axios';
21. export default {
22.   setup() {
23.     const searchQuery = ref('');
24.     const categories = ref([]);
26.     const searchCategories = async () => {
27.       if (searchQuery.value.length > 0) {
28.         try {
29.           const response = await axios.get(`/api/categories/search?query=${searchQuery.value}`);
30.           categories.value = response.data;
31.         } catch (error) {
32.           console.error('Error fetching categories:', error);
33.         }
34.       } else {
35.         categories.value = [];
36.       }
37.     };
39.     return {
40.       searchQuery,
41.       categories,
42.       searchCategories
43.     };
44.   }
45. };
46. </script>

复制代码

在主应用中利用组件

1. <!-- App.vue -->
2. <template>
3.   <div id="app">
4.     <h1>Category Search</h1>
5.     <CategorySearch />
6.   </div>
7. </template>
9. <script>
10. import CategorySearch from './components/CategorySearch.vue';
12. export default {
13.   name: 'App',
14.   components: {
15.     CategorySearch
16.   }
17. };
18. </script>

复制代码

4. 优化建议

• 防抖：在前端实现防抖，避免频仍的 API 调用。
  
• 缓存：考虑在后端实现缓存机制，减少数据库查询。
  
• 分页：假如分类数量很大，考虑实现分页功能。
  
• 索引：在 MySQL 的 categories 表的 name 列上添加索引，进步查询性能。
  

1. CREATE INDEX idx_category_name ON categories(name);

复制代码

• 安全性：确保对用户输入进行适当的验证和清理，防止 SQL 注入攻击。
  

这个实现提供了一个基本的全栈分类模糊搜索功能。您可以根据详细需求进行进一步的定制和优化。假如您有任何问题或必要更详细的解释，请随时告诉我。
注意，MySQL 的 LIKE 操纵符默认是不区分巨细写的。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。