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>// 引入apiimport {getFavouriteList} from '../../api/my_api'// 生命周期，进来就加载import {onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'//vueimport {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(/^\.\.\//, '')}`;}//  然后定义 onLoadonLoad(() => {// 加载景点列表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、效果图