vue中使用SQL查出结果的搜索框

在Vue中使用SQL查出结果的搜索框，需要先将Vue与后端数据库进行连接。一般来说，可以使用Axios或者Fetch API来实现前后端数据交互。

步骤如下：

1.创建一个搜索框组件，包含一个输入框和一个搜索按钮。

2.在组件中，使用Axios或者Fetch API来发送一个HTTP请求，将搜索框中的内容传递给后端。

3.后端接收到请求后，使用SQL语句查询数据库中符合条件的数据，将结果返回给前端。

4.前端接收到后端返回的数据后，将其渲染到页面上，实现搜索功能。

下面是一个使用Axios实现搜索功能的示例代码：

<template>
  <div>
    <input type="text" v-model="searchText">
    <button @click="search">搜索</button>
    <ul>
      <li v-for="item in searchResult">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchText: '',
      searchResult: []
    }
  },
  methods: {
    search() {
      axios.get('/search', {
        params: {
          keyword: this.searchText
        }
      }).then(res => {
        this.searchResult = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

在后端，可以使用Node.js和Express框架来实现SQL查询。下面是一个示例代码：

const express = require('express')
const mysql = require('mysql')

const app = express()

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'test'
})

app.get('/search', (req, res) => {
  const keyword = req.query.keyword
  const sql = `SELECT * FROM users WHERE name LIKE '%${keyword}%'`

  connection.query(sql, (err, result) => {
    if (err) {
      console.log(err)
      res.status(500).send('Internal server error')
      return
    }

    res.send(result)
  })
})

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

这样，就可以在Vue中使用SQL查出结果的搜索框了。