vue3 模糊查询数据库里的数据

在Vue 3中模糊查询数据库的数据，通常需要结合后端技术来实现。以下是一种常见的实现方式：

1. 创建一个包含输入框和展示查询结果的组件。
2. 在输入框中监听用户输入的关键词，并将关键词传递给后端进行模糊查询。
3. 后端接收到关键词后，使用数据库查询语言（如SQL）进行模糊查询，并返回匹配的结果。
4. 前端接收到后端返回的结果后，将结果展示在页面上。

具体的实现步骤可能因后端技术的不同而有所差异，以下是一种基于Vue 3和Node.js（使用Express框架）的实现示例：

1. 在Vue组件中，定义一个输入框和一个用于展示结果的列表：

<template>
  <div>
    <input v-model="keyword" @input="search" placeholder="输入关键词">
    <ul>
      <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResults: [],
    };
  },
  methods: {
    async search() {
      const response = await fetch(`/api/search?keyword=${this.keyword}`);
      this.searchResults = await response.json();
    },
  },
};
</script>

2. 在后端使用Express框架创建一个路由处理模糊查询的请求：

const express = require('express');
const app = express();

app.get('/api/search', (req, res) => {
  const keyword = req.query.keyword;

  // 使用SQL进行模糊查询，这里以MySQL为例
  const query = `SELECT * FROM your_table WHERE name LIKE '%${keyword}%'`;

  // 执行查询并返回结果
  // ...

  res.json(searchResults);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

这只是一个简单的示例，实际的实现可能还需要考虑数据分页、防止SQL注入等安全性问题。同时，你还需要根据你所使用的数据库和后端技术进行相应的调整。

希望以上信息能帮助到你！如果还有其他问题，请随时提问。