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

提供一个全栈实现的方案,包括 Vue 3 前端、Express 后端和 MySQL 数据库的分类模糊搜索功能。让我们逐步来看:

1. 数据库设计 (MySQL)

首先,我们需要一个存储分类的表:

sql 复制代码
CREATE TABLE categories (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- 插入一些示例数据
INSERT INTO categories (name) VALUES 
('Electronics'), ('Books'), ('Clothing'), ('Home & Garden'), ('Sports');

2. 后端实现 (Express)

安装必要的包

bash 复制代码
npm install express mysql2

创建数据库连接

javascript 复制代码
// db.js
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

module.exports = pool;

实现 Express 路由

javascript 复制代码
// app.js
const express = require('express');
const db = require('./db');
const app = express();

app.use(express.json());

app.get('/api/categories/search', async (req, res) => {
  try {
    const { query } = req.query;
    const [rows] = await db.query(
      'SELECT * FROM categories WHERE name LIKE ?',
      [`%${query}%`]
    );
    res.json(rows);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. 前端实现 (Vue 3)

创建一个新的 Vue 3 组件

vue 复制代码
<!-- CategorySearch.vue -->
<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="searchCategories" 
      placeholder="Search categories..."
    />
    <ul>
      <li v-for="category in categories" :key="category.id">
        {{ category.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const searchQuery = ref('');
    const categories = ref([]);

    const searchCategories = async () => {
      if (searchQuery.value.length > 0) {
        try {
          const response = await axios.get(`/api/categories/search?query=${searchQuery.value}`);
          categories.value = response.data;
        } catch (error) {
          console.error('Error fetching categories:', error);
        }
      } else {
        categories.value = [];
      }
    };

    return {
      searchQuery,
      categories,
      searchCategories
    };
  }
};
</script>

在主应用中使用组件

vue 复制代码
<!-- App.vue -->
<template>
  <div id="app">
    <h1>Category Search</h1>
    <CategorySearch />
  </div>
</template>

<script>
import CategorySearch from './components/CategorySearch.vue';

export default {
  name: 'App',
  components: {
    CategorySearch
  }
};
</script>

4. 优化建议

  1. 防抖:在前端实现防抖,避免频繁的 API 调用。
  2. 缓存:考虑在后端实现缓存机制,减少数据库查询。
  3. 分页:如果分类数量很大,考虑实现分页功能。
  4. 索引:在 MySQL 的 categories 表的 name 列上添加索引,提高查询性能。
sql 复制代码
CREATE INDEX idx_category_name ON categories(name);
  1. 安全性:确保对用户输入进行适当的验证和清理,防止 SQL 注入攻击。

这个实现提供了一个基本的全栈分类模糊搜索功能。您可以根据具体需求进行进一步的定制和优化。如果您有任何问题或需要更详细的解释,请随时告诉我。

注意,MySQL 的 LIKE 操作符默认是不区分大小写的。

相关推荐
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
前端君9 小时前
实现最大异步并发执行队列
javascript
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军11 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52011 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy12 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿12 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js