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}
}]