axios和vue得结合 node.js

最新推荐文章于 2022-10-02 18:14:05 发布

RPIKACU

最新推荐文章于 2022-10-02 18:14:05 发布

阅读量1.4k

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/RPIKACU/article/details/120938350

版权

这个博客展示了如何利用Vue.js框架和Axios库创建一个简单的搜索输入框，当用户按下回车键时，它会发送GET请求到指定API获取搜索结果。在数据加载期间，显示'加载中...'，一旦数据返回，将搜索结果动态渲染到页面上。博客还包含了两个初始的搜索请求，分别在页面加载后1秒和立即执行，以展示搜索功能的实际效果。

摘要由CSDN通过智能技术生成

<body>
            <div id="app">
            <input type="text" v-model.trim="msg" @keydown.enter="handleSubmit">
            <ul v-if="searchList.length>0" >

                    <li v-for="item in searchList">{{item.name}}</li>
            </ul>

            <div v-else>加载中....</div>
            
            </div>

            <script src="./lib/axios.js"></script>
            <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'',
                  searchList:[] ,
                
            },
            methods: {

                    handleSubmit(){

                                this.search(this.msg)
                    },

                search(keyword){
                    axios
                    .get("http://127.0.0.1:3000/search?keywords="+keyword)
                    .then((res)=>{
                        //res 就是服务端返回响应对象(返回得查询数值)
                        //res对象中 存在这很多数据与对象得嵌套,我们要从其中把想要的数据剥离出来
                        //我们把查询到的歌曲的数组 复制给this.searchList

                            this.searchList= res.data.result.songs;
                            console.log(this.searchList)
                    });
                }
            },

            mounted () {


                    setTimeout(() => {
                        this.search('大碗宽面')
                    }, 1000);

                this.search()
            }
        });

        axios.get('http://127.0.0.1:3000/search?keywords=海阔天空').then((res) =>{
                    console.log(res)
                    console.log(res.data.result.songs)
                })
      
        </script>
</body>