vue+axios实现模糊搜索的方法？

这是IDEA的后端代码

img

img


这是Web Storm前段vue代码

img


接下来该如何写呢？前段真的很头大
vue+axios的方式

你都说axios了 当然是给后端传值， 让后端给你返回了

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7691080
  • 你也可以参考下这篇文章：vue+axios在IE下页面不刷新的问题
  • 除此之外, 这篇博客: Vue+Axios自动更新中的 有问题的实现方式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    App.Vue，内置router-link，可以跳转呈现Component

    // App.Vue
<template>
    <div>
        <router-link :to="/Component">Component</router-link>
        <router-view></router-view>
    </div>
</template>

    Component.Vue，在创建时，使用setInterval创建1s中的循环动作，在动作中使用Axios获取后端数据

    // Component.Vue
<template>
    <div></div>
</template>

<script>
export default {
    created() {
        // 设置一个间隔1s就进行的动作
        setInterval(() => {
            Axios.get("/data").then((res) => {
                // 业务逻辑
            })
        }, 1000)
    }
}
</script>
  • 您还可以看一下 jason老师的vue通用后台管理课程中的 axios的基本使用小节, 巩固相关知识点
  • 以下回答来自chatgpt:

    针对使用Vue和axios实现模糊搜索这个问题，可以采用以下步骤：

    1. 在Vue组件中，设置data属性用于存储搜索关键字和搜索结果：
    data() {
    return {
        inputVal: '',
        results: []
    }
}
    1. 在组件中，编写一个用于触发搜索的方法，并在该方法中向后端发送axios请求：
    methods: {
    search: function() {
        var self = this;
        axios.get('/search', { 
            params: { keyword: self.inputVal }
        }).then(function(response) {
            self.results = response.data;
        });
    }
}

    上述代码中，首先获取到用户输入的关键字inputVal，然后使用axios发送一个get请求到后端的/search路径，同时在请求中带上关键字参数。最后，通过then方法获取到后端返回的搜索结果，并将结果赋值到results属性中。

    1. 在前端界面中，将搜索框的输入值和触发搜索方法绑定在一起：
    <input v-model="inputVal" type="text">
<button @click="search">Search</button>

    上述代码中，搜索框的输入值使用v-model指令与组件中的inputVal属性绑定在一起，当用户在搜索框内输入信息时，该数据会自动更新到inputVal属性中。同时，我们在搜索按钮上的点击事件中调用了search方法，从而触发搜索操作。

    1. 最后，在后端代码中实现模糊搜索的逻辑。可以使用SQL语句的LIKE关键字实现模糊匹配，例如：
    SELECT * FROM products WHERE name LIKE '%keyword%';

    上述SQL语句中，%表示可以匹配任意数量的任意字符，因此在执行SQL语句之前，我们需要将框架接收到的keyword参数前后添加上%符号，再使用该关键字进行匹配。

    总体来说，实现模糊搜索的步骤如下：

    1. 设置Vue组件的data属性用于存储搜索关键字和搜索结果；
    2. 编写用于触发搜索的方法，并在该方法中使用axios向后端发送搜索请求；
    3. 在Vue前端界面中将搜索框的输入值和触发搜索方法绑定在一起；
    4. 在后端代码中实现模糊搜索的逻辑，使用SQL语句中的LIKE关键字实现匹配。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^