axios和vue得结合 node.js
程序员文章站
2022-07-04 18:51:28
...
<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>上一篇： 第五天之运算符重载提高_重载()运算符
下一篇： 第五章 运算符【Python基础】