vue3+springboot实现简单查询语句的demo

这里是一个使用Vue3和Spring Boot实现简单查询语句的demo：

前端代码：

<template>
  <div>
    <div>
      <label>关键字：</label>
      <input v-model="keyword" />
      <button @click="search">搜索</button>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const keyword = ref('');
    const list = ref([]);

    const search = async () => {
      const response = await fetch(`/api/search?keyword=${keyword.value}`);
      const data = await response.json();
      list.value = data;
    };

    return {
      keyword,
      list,
      search,
    };
  },
};
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class SearchController {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    @GetMapping("/search")
    public List<Map<String, Object>> search(@RequestParam String keyword) {
        String sql = "SELECT * FROM products WHERE name LIKE ?";
        return jdbcTemplate.queryForList(sql, "%" + keyword + "%");
    }
}

这个demo实现了一个简单的搜索功能，用户输入关键字后，前端发送请求到后端，后端根据关键字查询数据库并返回结果，前端将结果显示在页面上。这个demo使用了Vue3的Composition API和Spring Boot的JdbcTemplate。