vue中走接口进行实时搜索

1. 在Vue组件中，定义一个data属性，用于存储搜索结果和搜索关键字：

data() {
  return {
    searchResults: [],
    searchText: ''
  }
}

2. 定义一个方法，用于发送搜索请求，并将结果存储到searchResults中：

methods: {
  async search() {
    const response = await axios.get(`/api/search?q=${this.searchText}`)
    this.searchResults = response.data
  }
}

3. 在模板中，使用v-model绑定输入框的值，并在输入框中监听keyup事件，调用search方法进行实时搜索：

<template>
  <div>
    <input type="text" v-model="searchText" @keyup="search">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

4. 在后端实现搜索接口，接收前端发送的搜索关键字，查询数据库并返回结果：

app.get('/api/search', async (req, res) => {
  const searchText = req.query.q
  const results = await db.query(`SELECT * FROM products WHERE name LIKE '%${searchText}%'`)
  res.json(results)
})