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

提供一个全栈实现的方案,包括 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 操作符默认是不区分大小写的。

相关推荐
liangshanbo121537 分钟前
React 19 vs React 18全面对比
前端·javascript·react.js
Never_Satisfied1 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果1 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
rechol2 小时前
类与对象(中)笔记整理
java·javascript·笔记
Luffe船长2 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
仲夏幻境3 小时前
js利用ajax同步调用如何
开发语言·javascript·ajax
鹿鹿鹿鹿isNotDefined3 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者3 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
一米八二的矮个子3 小时前
JavaScript语法进阶(一)
javascript
liyi_hz20083 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件