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

mofsfely2

于 2020-05-25 20:01:33 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏： java1234课程aliyu # vue2+jwt+springboot+mybaits

本文链接：https://blog.youkuaiyun.com/mofsfely2/article/details/106340446

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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