第十一课时通讯录列表前后端调用

Vue通讯录列表前后端交互实现

最新推荐文章于 2022-09-18 07:15:00 发布

原创

最新推荐文章于 2022-09-18 07:15:00 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

本篇博客介绍如何在Vue应用中实现通讯录列表的前后端数据调用。在phoneBook.vue组件中，首先定义数据“phonBooks”，接着通过HTTP请求获取数据并赋值。之后利用Vue的props特性，将查询结果传递到List.vue组件中。在List.vue中，遍历接收到的数据以生成列表展示。特别地，前端请求图片时，需要配置SpringBoot的静态资源处理，确保/image/路径的请求能正确映射到服务器的图片目录。

phoneBook.vue获取数据

除了list，其他的Search等小组件，也是会用到这个列表查询出来的数据。所以我们将这个数据放到 PhoneBook里面去，然后通过标签将查询到的数据传到组件中去。
phoneBook.vue ：定义数据“phonBooks”->数据赋值->通过标签传值到list组件。

<div>
  <phone-book-header></phone-book-header>
  <phone-book-search></phone-book-search>
  //标签传值到list组件中去
  <phone-book-list :phoneBooks="phoneBooks"></phone-book-list>
</div>

export default {
   
   
	name: "PhoneBook",
	data(){
   
   
	  return{
   
   
		phoneBooks:{
   
   } //定义数据
	  }
	},
....

getPhoneBooks(){
   
   
	let token=window.local