2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图

1、先添加一个获取收藏景点的列表请求

【在文件my_api.js文件中添加】

// 引入公共的请求封装
import http from './my_http.js'

// 登录接口（适配服务端返回 Token）
export const login = async (code, avatar) => {
		const res = await http('/login/getWXSessionKey', {code,avatar});
};


// 获取bannner列表
export const getBannerList = () => {
	return http('/banner/list')
}

// 获取景点类型列表（支持传入typeId参数）
export const getTypeList = () => {
	return http('/type/list')
}

// 获取景点列表
export const getAttractionList = (typeId) => {
	// 如果有typeId就拼接到URL，没有就不加
	const url = typeId ? `/attraction/list?typeId=${typeId}` : '/attraction/list'
	return http(url)
}
// 获取景点详情
export const getAttractionInfo = (attractionId) => {
	return http(`/attraction/getInfo/${attractionId}`)
}

// 获取收藏列表
export const getFavouriteList = () => {
	// 如果有typeId就拼接到URL，没有就不加
	return http('/favourite/list')
}

2、favourite.vue页面源码【复用首页的瀑布流】

<template>
	<view class="container">

		<!-- 景点列表 瀑布流 -->
		<view class="attraction-list">
			<!-- 左侧 -->
			<up-waterfall v-model="attractionList" ref="uWaterfallRef">
				<template v-slot:left="{leftList}">
					<view class="attraction-warter" v-for="(item,index) in leftList" :key="index"
						@click="goAttractionDetail(item)">
						<!-- 景点封面 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="formatImagePath(item.attraction.cover)"
							:index="index"></up-lazy-load>

						<!-- 景点标题 -->
						<view class="attraction-title">
							{{item.title}}
						</view>
						<!-- 景点简介 -->
						<view class="attraction-introduction">
							{{item.introduction}}
						</view>
						<!-- 景点营业时间 -->
						<view class="attraction-times">
							营业时间:{{item.attraction.inbusinessTime1}}~{{item.attraction.inbusinessTime2}}
						</view>
						<!-- 景点其他信息 -->
						<view class="attraction-other">
							<!-- 是否需要预约 -->
							<view class="attraction-pay">
								{{item.enableAppointment?"要预约":"免预约"}}
							</view>
							<!-- 是否需要付费 -->
							<view class="attraction-appointment">
								{{item.enablePay?"购买门票":"无需门票"}}
							</view>
						</view>
						<!-- 是否需要推荐 -->
						<view class="isDot">
							推荐
						</view>
					</view>
				</template>
				<!-- 右侧 -->
				<template v-slot:right="{rightList}">
					<view class="attraction-warter" v-for="(item,index) in rightList" :key="index"
						@click="goAttractionDetail(item)">
						<!-- 景点封面 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="item.attraction.cover"
							:index="index"></up-lazy-load>

						<!-- 景点标题 -->
						<view class="attraction-title">
							{{item.title}}
						</view>
						<!-- 景点简介 -->
						<view class="attraction-introduction">
							{{item.introduction}}
						</view>
						<!-- 景点营业时间 -->
						<view class="attraction-times">
							营业时间:{{item.attraction.inbusinessTime1}}~{{item.attraction.inbusinessTime2}}
						</view>
						<!-- 景点其他信息 -->
						<view class="attraction-other">
							<!-- 是否需要预约 -->
							<view class="attraction-pay">
								{{item.enableAppointment?"需要预约":"免预约"}}
							</view>
							<!-- 是否需要付费 -->
							<view class="attraction-appointment">
								{{item.enablePay?"购买门票":"无需门票"}}
							</view>
						</view>
						<!-- 是否需要推荐 -->
						<view class="isDot">
							推荐
						</view>
					</view>
				</template>

			</up-waterfall>
		</view>
		<view v-if="showTopBtn" @click="toTop" class="topClass">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
	// 引入api
	import {
		getFavouriteList
	} from '../../api/my_api'
	// 生命周期，进来就加载
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	//vue
	import {
		ref,
		reactive
	} from 'vue'


	//景点列表
	const attractionList = ref([])
	//滚动是否显示↑箭头图标按钮
	const showTopBtn = ref(false)

	// 先定义 loadAttractionList 函数
	const loadAttractionList = () => {
		getFavouriteList().then(res => {
			attractionList.value = res
		})

	}
	// 在数据中或方法里转换路径
	const formatImagePath = (path) => {
		if (!path) return '';
		// 如果已经是绝对路径（/static/...），直接返回
		if (path.startsWith('/') || path.startsWith('http')) return path;
		// 否则补全路径
		return `/static/${path.replace(/^\.\.\//, '')}`;
	}
	//  然后定义 onLoad
	onLoad(() => {
		
		// 加载景点列表
		loadAttractionList()

	})

	// 跳转景点详情页面
	const goAttractionDetail = (item) => {
		uni.navigateTo({
			url: `/pages/attraction_details/attraction_details?attractionId=${item.id}`
		});
	};

	// 页面触底
	onReachBottom(() => {
		console.log("触底啦")
		//多点假数据，实现瀑布流效果
		setTimeout(() => {
			addRandomData()
		}, 1000)
	})


	//检测上下互动的滚动条
	onPageScroll((e) => {
		// console.log("滚动啦")
		if (e.scrollTop > 0) {
			showTopBtn.value = true
		} else {
			showTopBtn.value = false
		}
	})

	// 回到顶部
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
</script>
<style>
	page {
		background-color: #cee0ff;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx;

		.attraction-list {
			margin-top: 20rpx;

			// 瀑布流
			.attraction-warter {
				margin: 10rpx 10rpx 10rpx 0rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				position: relative;

				// 景点标题
				.attraction-title {
					font-size: 30rpx;
					margin-top: 10rpx;
					color: #303133;
				}

				// 景点简介
				.attraction-introduction {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #c2c6ce;
				}

				// 景点时间
				.attraction-times {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #777;
				}

				// 景点其他信息
				.attraction-other {
					display: flex;
					margin-top: 10rpx;

					// 景点是否需要付费
					.attraction-pay {
						border: 1px solid orange;
						color: orange;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
					}

					// 景点是否需要预约
					.attraction-appointment {
						border: 1px solid #00afff;
						color: #00afff;
						margin-left: 20rpx;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
					}
				}

				// 推荐
				.isDot {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					font-size: 24rpx;
					color: #fff;
					line-height: 32rpx;
					background-color: red;
					text-align: center;
					border-radius: 10rpx;
					padding: 4rpx 10rpx;
				}
			}
		}

		// 回到顶部
		.topClass {
			position: fixed;
			bottom: 120rpx;
			right: 30rpx;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 20rpx;
			width: 44rpx;
			height: 44rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>

3、后端接口的返回类型

【收藏太多了，去掉了一些数据，仅供参考】

[{
	"id": 139,
	"userId": 4,
	"attractionId": 1,
	"createTime": "2025-05-18T19:09:56",
	"attraction": {
		"id": 1,
		"title": "定州塔",
		"cover": "http://localhost:9001/attraction/1.png",
		"introduction": "中华第一塔",
		"start": null,
		"browse": null,
		"img": null,
		"description": "定州塔，又名开元寺塔、料敌塔，位于河北省定州市城区，是中国现存最高的砖塔，高达83.7米。这座八角十一级密檐式实心砖塔，始建于北宋咸平四年（1001年），至今已历经千年风雨。\n定州塔不仅是佛教圣地开元寺的标志性建筑，也曾作为军事瞭望塔，在北宋抵御契丹（辽国）南侵时发挥过重要作用，因此得名“料敌塔”。塔身自下而上逐层收缩，呈优美的锥形，每层都装饰有精美的砖雕，包括佛龛、佛像、飞天等，展现了宋代高超的砖雕艺术。\n定州塔采用独特的建造工艺，内部用黄土和砖块夯实，外部用砖块砌筑，形成类似“空心墙”的结构，使其具有良好的抗震性能。历经多次地震，至今仍巍然屹立。\n定州塔不仅是定州市的标志性建筑，也是全国重点文物保护单位，是研究宋代佛教建筑和军事防御的重要实物资料。它以其悠久的历史、独特的建筑风格、精美的砖雕艺术和深厚的文化内涵，成为中国古代建筑艺术的瑰宝，吸引着无数游客前来参观。\n",
		"inbusinessTime1": "06:00:00",
		"inbusinessTime2": "18:00:00",
		"address": "河北省保定市定州市中山中路南侧\r\n",
		"province": null,
		"city": null,
		"area": null,
		"longitude": "115",
		"latitude": "38.51",
		"location": null,
		"enableType": "true",
		"typeId": "4",
		"enableAppointment": "false",
		"enablePay": "false",
		"tel": null
	}
}, {
	"id": 141,
	"userId": 4,
	"attractionId": 2,
	"createTime": "2025-05-18T19:09:56",
	"attraction": {
		"id": 2,
		"title": "石家庄动物园",
		"cover": "http://localhost:9001/attraction/8.png",
		"introduction": "与萌宠零距离，开启奇妙动物之旅！",
		"start": null,
		"browse": null,
		"img": null,
		"description": "石家庄动物园位于河北省石家庄市，是一座大型的综合性动物园，旨在饲养、繁殖、研究和保护各种动物，同时为公众提供观赏和教育的机会。动物园内环境优美，设施齐全，旨在为动物提供一个接近自然的生活环境，同时也为游客创造一个舒适、安全的观赏体验。\n园内分为多个区域，包括猛兽区、食草动物区、鸟语林、爬行馆等，每个区域都根据动物的习性进行了精心设计。在这里，游客可以近距离观察到狮子、老虎、大象、长颈鹿、熊猫等众多珍稀动物。此外，动物园还定期举办各种教育活动和互动体验，如动物喂食、科普讲座等，旨在提高公众的生态保护意识。\n石家庄动物园不仅是家庭休闲的好去处，也是学校组织学生进行生物多样性教育的理想场所。通过实地观察和学习，动物园激发人们对自然的兴趣和对动物的同情心，促进社会公众的生态保护意识。\n总之，石家庄动物园以其丰富的动物种类、优美的环境和丰富的教育活动，为游客提供了一个寓教于乐的场所，是石家庄市重要的旅游景点之一。\n",
		"inbusinessTime1": "06:00:00",
		"inbusinessTime2": "18:00:00",
		"address": "河北省石家庄市鹿泉区观景大街与山前大道交叉口西南处",
		"province": null,
		"city": null,
		"area": null,
		"longitude": "114.30 \r\n",
		"latitude": "38.06\r\n",
		"location": null,
		"enableType": "false",
		"typeId": "1",
		"enableAppointment": "false",
		"enablePay": "false",
		"tel": null
	}
}, {
	"id": 142,
	"userId": 4,
	"attractionId": 3,
	"createTime": "2025-05-18T19:09:56",
	"attraction": {
		"id": 3,
		"title": "河北博物院",
		"cover": "http://localhost:9001/attraction/3.png",
		"introduction": "穿越千年历史，感受燕赵文化的厚重与辉煌！",
		"start": null,
		"browse": null,
		"img": null,
		"description": "河北博物院，位于河北省石家庄市，是省级综合性博物馆，国家一级博物馆。它犹如一颗璀璨的明珠，闪耀着燕赵大地的文明之光。\n博物院占地广阔，建筑宏伟，馆藏丰富，拥有各类文物藏品高达XX万件。这些藏品涵盖了从史前时期到近代的各个历史阶段，包括陶瓷、青铜器、书画、玉器等多个门类，尤以满城汉墓出土文物、河北古代瓷器、石家庄出土文物、明清书画以及河北近现代历史文物等最具特色。\n河北博物院的基本陈列以“慷慨燕赵，自强不息”为主题，通过“石器时代的河北”、“河北商代文明”、“慷慨悲歌——燕赵古国”、“战国雄风——古中山国”、“大汉绝唱——满城汉墓”等展览，生动展现了河北悠久的历史和灿烂的文化。其中，“大汉绝唱——满城汉墓”展览，展示了满城汉墓出土的珍贵文物，包括金缕玉衣、长信宫灯等国宝级文物，令人叹为观止。\n此外，河北博物院还经常举办各种临时展览和学术交流活动，为社会公众提供了丰富的文化大餐。它不仅是收藏、研究、展示文物的重要场所，也是进行爱国主义教育、历史文化教育的重要基地，是人们了解河北、认识中华文明的重要窗口。\n",
		"inbusinessTime1": "06:00:00",
		"inbusinessTime2": "18:00:00",
		"address": "河北省石家庄市长安区东大街 4 号\r\n",
		"province": null,
		"city": null,
		"area": null,
		"longitude": "114.44",
		"latitude": "38.14\r\n",
		"location": null,
		"enableType": "true",
		"typeId": "2",
		"enableAppointment": "false",
		"enablePay": "false",
		"tel": null
	}
}]

4、效果图