vue+MySQL 实现搜索功能

在Vue项目中结合MySQL实现搜索功能，你需要做以下几个关键步骤：

1. **连接数据库**：
使用Vue的axios库或者其他HTTP客户端（如vue-resource或Vuex ORM）与Node.js后端连接MySQL。在后端创建一个API接口，接收前端传来的搜索关键字并执行SQL查询。

   import axios from 'axios';

   axios.get('/api/search', { params: { keyword: this.searchKeyword } })
     .then(response => {
       this.searchResults = response.data;
     })
     .catch(error => {
       console.error('Error fetching data:', error);
     });

2. **表单绑定**：
在Vue组件中，将用户输入的搜索词绑定到`v-model`上，当用户输入变化时，触发`search`方法。

   <el-input v-model="searchKeyword" @input="search" placeholder="输入搜索关键词"></el-input>

3. **后端搜索逻辑**：
后端接收到请求后，使用Node.js的mysql模块（或express-mysql插件）执行SQL查询，例如 `SELECT * FROM table WHERE column LIKE '%keyword%'`。

   const mysql = require('mysql');
   app.get('/api/search', (req, res) => {
     const connection = mysql.createConnection(config); // config包含数据库配置信息
     let sql = "SELECT * FROM your_table WHERE column LIKE ?";
     connection.query(sql, ['%' + req.query.keyword + '%'], (error, results) => {
       if (error) throw error;
       res.json(results);
     });
   });

4. **显示搜索结果**：
查询返回的结果需要传递给Vue组件并更新视图，通常在Vue组件的数据响应式更改时自动渲染。

   this.searchResults = results; // 将结果赋值给组件内的变量

5. **分页或懒加载**：
如果搜索结果较多，可能需要考虑分页展示或者按需加载。