uni-app实战项目，跟着做完你就可以独立作战了（二）

傷城~ 2022-10-06 04:55 192阅读 0赞

# 实现内容切换 #

## 实现内容左右滑动 ##

我们新建list组件

里面使用swiper基础组件  
我们将首页这一部分剪切过来  
![在这里插入图片描述][20210611110106735.png]  
![在这里插入图片描述][2021061111015060.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]  
这样就可以正常内容左右滑动切换了  
但是有一个问题，不能上下滚动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
我们将list组件放到容器中，然后设置一下样式  
但我们还需要在组件中设置样式来撑起高度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
这样就可以上下滚动了  
暂时代码

<template>
    	<swiper class="home-swiper">
    		<swiper-item class="swiper-item">
    			<list-scrool class="list-scrool">
    				<list-card mode="base" ></list-card>
    				<list-card mode="image" ></list-card>
    				<list-card mode="column" ></list-card>
    				<list-card mode="base" ></list-card>
    				<list-card mode="image" ></list-card>
    				<list-card mode="column" ></list-card>
    			</list-scrool>
    		</swiper-item>
    		<swiper-item class="swiper-item">
    			<list-scrool class="list-scrool">
    				<list-card mode="base" ></list-card>
    				<list-card mode="image" ></list-card>
    				<list-card mode="column" ></list-card>
    				<list-card mode="base" ></list-card>
    				<list-card mode="image" ></list-card>
    				<list-card mode="column" ></list-card>
    			</list-scrool>
    		</swiper-item>
    	</swiper>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    
    			};
    		}
    	}
    </script>
    
    <style lang="scss">
    	.home-swiper {
    		height: 100%;
    		.swiper-item{
    			height: 100%;
    			overflow: hidden;
    			.list-scrool{
    				height: 100%;
    			}
    		}
    	}
    </style>

改造：  
我们在list组件下新建list-item.vue文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
我们要设置高度哦

.list-scrool{
    		height: 100%;
    	}

list.vue组件中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]  
我们给子组件传值  
![在这里插入图片描述][20210611112445717.png]  
子组件接收并循环  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]  
这样我们的内容区域和选项卡区域可以对的上了 都是6块

## 实现内容与选项卡关联 ##

实现左右滑动内容，选项卡对应高亮

我们在list组件中写一个change事件来监听变化  
再用$emit传给首页index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]  
在首页中  
我们接收事件 并且定义一个变量 传给选项卡  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]  
在tab选项卡中  
我们接收值，并且在watch事件中监听变化赋值给activeIndex即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]

## 实现选项卡与内容关联 ##

实现点击选项卡，内容区域变化  
之前我们在tab选项卡组件中定义了点击事件及传值给父组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]  
在首页父组件中

点击选项卡传值过来后将值赋给变量activeIndex，然后在传给内容组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]  
在list组件中我们接收传递过来的activeIndex值  
swiper有一个属性current可以指定调整到索引为多少的内容区域，所以我们将activeIndex赋值过去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]

# 数据初始化 #

> 我们将静态内容从数据库获取放到页面中

新建云函数

![在这里插入图片描述][20210614084530345.png]

get\_list中编写  
获取到内容之后，我们要过滤掉content字段（使用field），然后返回给客户端  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]  
我们在如下地方写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]  
然后我们在list组件中写调用函数，在created中调用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]  
获取到值以后，我们赋值给list 然后在传递给子组件list-item  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]  
list-item在接收到值以后循环一下，然后将mode类赋值给mode属性  
然后在传递item过去，将内容替换  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]

我们在list-card组件中接收传递过来的值item  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]  
我们在上面做一个更改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]  
完整代码在下方

<template>
    	<view class="list">
    		
    		<view v-if="mode==='base'" class="listcard">
    			<view class="listcard-image">
    				<image :src="item.cover[0]" mode="aspectFill"></image>
    			</view>
    			<view class="listcard-content">
    				<view class="listcard-content_title">
    					<text>{
       {item.title}}</text>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							{
       {item.classify}}
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						{
       {item.browse_count}}浏览
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		
    		<view v-if="mode==='image'" class="listcard mode-column">
    			<view class="listcard-content">
    				<view class="listcard-content_title">
    					<text>{
       {item.title}}</text>
    				</view>
    				<view class="listcard-image">
    					<view v-if="index<3" v-for="(item,index) in item.cover" :key="index" class="listcard-image_item">
    						<image :src="item" mode="aspectFill"></image>
    					</view>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							{
       {item.classify}}
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						{
       {item.browse_count}}浏览
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		<view v-if="mode==='column'" class="listcard mode-image">
    			<view class="listcard-content">
    				<view class="listcard-image">
    					<image :src="item.cover[0]" mode="aspectFill"></image>
    				</view>
    				<view class="listcard-content_title">
    					<text>{
       {item.title}}</text>
    				</view>
    				<view class="listcard-content_des">
    					<view class="listcard-content_des-label">
    						<view class="listcard-content_des-label-item">
    							{
       {item.classify}}
    						</view>
    					</view>
    					<view class="listcard-content_des-browe">
    						{
       {item.browse_count}}浏览
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		props:{
    			mode:{
    				type:String,
    				default:'base'
    			},
    			item:{
    				type:Object,
    				default(){
    					return {}
    				}
    			}
    		},
    		data() {
    			return {
    
    			};
    		}
    	}
    </script>
    
    <style lang="scss">
    	.list{
    		.listcard {
    			display: flex;
    			padding: 10px;
    			margin: 10px;
    			border-radius: 5px;
    			box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
    			box-sizing: border-box;
    		
    			.listcard-image {
    				flex-shrink: 0;
    				width: 60px;
    				height: 60px;
    				border-radius: 5px;
    				overflow: hidden;
    		
    				image {
    					width: 100%;
    					height: 100%;
    				}
    			}
    		
    			.listcard-content {
    				display: flex;
    				flex-direction: column;
    				justify-content: space-between;
    				padding-left: 10px;
    				width: 100%;
    		
    				.listcard-content_title {
    					position: relative;
    					padding-right: 30px;
    					font-size: 14px;
    					color: #333;
    					font-weight: 400;
    					line-height: 1.2;
    		
    					text {
    						overflow: hidden;
    						text-overflow: ellipsis;
    						display: -webkit-box;
    						-webkit-line-clamp: 2;
    						-webkit-box-orient: vertical;
    					}
    		
    				}
    		
    				.listcard-content_des {
    					display: flex;
    					justify-content: space-between;
    					font-size: 12px;
    		
    					.listcard-content_des-label {
    						display: flex;
    		
    						.listcard-content_des-label-item {
    							padding: 0 5px;
    							margin-right: 5px;
    							border-radius: 15px;
    							color: $mk-base-color;
    							border: 1px $mk-base-color solid;
    						}
    					}
    		
    					.listcard-content_des-browe {
    						color: #999;
    						line-height: 1.5;
    					}
    				}
    			}
    		
    			&.mode-column {
    				.listcard-content {
    					width: 100%;
    					padding-left: 0;
    				}
    		
    				.listcard-image {
    					display: flex;
    					margin-top: 10px;
    					width: 100%;
    					height: 70px;
    		
    					.listcard-image_item {
    						margin-left: 10px;
    						width: 100%;
    						border-radius: 5px;
    						overflow: hidden;
    		
    						&:first-child {
    							margin-left: 0;
    						}
    		
    						image {
    							width: 100%;
    							height: 100%;
    						}
    					}
    				}
    		
    				.listcard-content_des {
    					margin-top: 10px;
    				}
    			}
    		
    			&.mode-image {
    				flex-direction: column;
    				.listcard-image {
    					width: 100%;
    					height: 100px;
    				}
    		
    				.listcard-content {
    					padding-left: 0;
    					margin-top: 10px;
    		
    					.listcard-content_des {
    						display: flex;
    						align-items: center;
    						margin-top: 10px;
    					}
    				}
    			}
    		}
    	}
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]  
页面暂时是这样了 有的图片可能因为地址过期获取没有权限展示不出，没有问题的

# 页面内容展示与选项卡相同 #

我们在首先执行的时候传递第一个需要展示的内容  
在改变选项卡高亮和内容区域时再次调用将获取到的tab数组中的name值传递过去

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 23]  
效果  
![在这里插入图片描述][20210614094334763.gif_pic_center]  
但是此时有一个弊端，他不是及时更新，而是启用之前的缓存  
我们要做如下更改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 24]  
list传值也做下更改，将listCatchData\[index\]传过去  
![在这里插入图片描述][20210614101854579.png]  
这样就不会出现如上问题了  
![在这里插入图片描述][20210614102037886.gif_pic_center]

list.vue完整代码

<template>
    	<swiper class="home-swiper" :current="activeIndex" @change="change">
    		<swiper-item v-for="(item,index) in tab" class="swiper-item" :key="index">
    			<list-item :list="listCatchData[index]"></list-item>
    		</swiper-item>
    	</swiper>
    </template>
    
    <script>
    	import listItem from './list-item.vue'
    	export default {
    		components:{
    			listItem
    		},
    		props:{
    			tab:{
    				type:Array,
    				default(){
    					return []
    				}
    			},
    			activeIndex:{
    				type:Number,
    				default:0
    			}
    		},
    		data() {
    			return {
    				list:[],
    				listCatchData:{}
    			};
    		},
    		created() {
    			// this.get_list(0)
    		},
    		watch:{
    			tab(newVal){
    				if(newVal.length===0) return
    				this.get_list(this.activeIndex)
    			}
    		},
    		methods:{
    			change(e){
    				const {current}=e.detail
    				this.$emit('change',current)
    				this.get_list(current)
    			},
    			get_list(current){
    				this.$api.get_list({
    					name:this.tab[current].name
    				})
    				.then(res=>{
    					// this.list=res.data.data
    					// this.listCatchData[current]=res.data.data
    					this.$set(this.listCatchData,current,res.data.data)
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.home-swiper {
    		height: 100%;
    		.swiper-item{
    			height: 100%;
    			overflow: hidden;
    			.list-scrool{
    				height: 100%;
    			}
    		}
    	}
    </style>

我们将tab选项卡添加一个数据’全部’  
pages/index.vue/index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 25]  
云函数get\_list  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 26]  
![在这里插入图片描述][20210614103054489.gif_pic_center]

我们在list组件的change事件中添加如下代码  
否则会多次请求数据库，会造成服务器压力  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 27]

# 引入加载插件 #

插件市场导入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 28]  
list-item中使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 29]

这里会有一个问题，在最下面会一直存在加载中，所以我们要做判断  
我们在获取列表数据里面加入俩个条件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 30]  
在get\_list中加入下面代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 31]

这样就可以获取每页多少条，我们后面去做判断，划到最后是显示正在加载还是没有更多数据提升  
我们用的list-scrool组件  
![在这里插入图片描述][2021061420030689.png]  
在list-scrool组件中添加上划到底事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 32]  
我们从组件一级一级传出事件到list组件中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 33]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 34]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 35]  
我们在这几处加入代码，为了下滑到底加载更多数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 36]  
这时有一个问题，如果我们在全部页下滑加载完全部数据，划到单独分栏不会加载数据的

我们将page变量删除改为`load:{}` 即可完美解决  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 37]  
加入如下代码在list组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 38]  
然后在list-item组件中接收即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 39]  
再往下划会报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 40]  
加入如下代码，就完美解决了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 41]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 42]  
最后这样如果数据库没有新数据就不会再次发起请求了  
别的页面也能正常运行了  
![在这里插入图片描述][20210615111242705.gif_pic_center]  
我们做一个小小修改，加入一行代码在index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 43]  
加入一行代码在list-item.vue中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 44]  
这样我们就完美解决了

# 收藏功能 #

新建likes组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 45]  
然后再list-card中每个模式标题下面引入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 46]  
再likes中做点击事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 47]  
编写新的云函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 48]  
api中加入  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 49]  
likes组件中加入传值  
![在这里插入图片描述][20210615141049108.png]  
然后我们在likes.vue组件中进行接收

在点击收藏时我们直接调用我们的函数，我们也写了一个变量like，为了让收藏按钮是显示收藏还是为收藏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 50]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 51]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 52]  
但是我们收藏状态在刷新后是不存储的  
我们要做一下修改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 53]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 54]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 55]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 56]  
改变文章收藏状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 57]  
加个收藏提示，是收藏还是取消  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 58]  
到此我们的收藏就完成了

--------------------

# 结束语 #

到现在我们首页就完成了  
敬请期待下一篇： 搜索功能的实现

[20210611110106735.png]: /images/20221005/d965d5a1dff641449de7c2464a7c5191.png
[2021061111015060.png]: /images/20221005/f564883f54754fd698470c1a989b232f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221005/b1a684c42cb14c049ee06ce4f4a41957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221005/cfe8ebee3c8a4dc58220cdcc910c9792.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221005/23b655ec2c4c400295907baf964d2c24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221005/8c68cbd7e86e4eaa8d609952f53478a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221005/65a780c027fa4caa9150afcdb228b750.png
[20210611112445717.png]: /images/20221005/2b5f4e2226c24c1bbc5e765ff41f4230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]: /images/20221005/bbb55fbc7c6b44a5beabcbb8e542ba71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]: /images/20221005/e4052550ca4d49b8a63df55592e29433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]: /images/20221005/f75f39d9db0f476cbb91b443067764db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]: /images/20221005/33f6c1159d26480a835d62a6b5171f40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]: /images/20221005/ac0326584941495ca17c018ca062d39e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]: /images/20221005/e43ae498ee954852a130b1e700b42f3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]: /images/20221005/19f1ca62bbd84b07b77b04a409a34988.png
[20210614084530345.png]: /images/20221005/3ab165b19e4e408085f62087ee0c330f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]: /images/20221005/cf7777044ef344d898e8c8edfd119f8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]: /images/20221005/71b5d6d658ab4e89987891976731ff48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]: /images/20221005/f76bc9d13c214317a23706cf913c4174.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]: /images/20221005/81f90730d0fc46c48569f81aa29c2c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]: /images/20221005/55d5677e088340c0bf00ffe9c0b4c222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]: /images/20221005/59d73072056342b19c503fcb7e0b3458.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]: /images/20221005/ff89d96c03cd4238a3bcec29d39e8734.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]: /images/20221005/f4f1c1d2e01d409f804c4d0f144220e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]: /images/20221005/46961a836824479ea1f31fd76023d618.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]: /images/20221005/719cf0d42a56459f8625f116fd67fd4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 22]: /images/20221005/9d688d7b75ed4742b2843907c4b93b33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 23]: /images/20221005/19a7a771d77740b6bb6162d7c7e925a4.png
[20210614094334763.gif_pic_center]: /images/20221005/1a42e8081c1d4b77957474e89e2d88b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 24]: /images/20221005/544c139fe84a4fcab63af58204d4bda6.png
[20210614101854579.png]: /images/20221005/9da31ddc80984cb79ed5f2e80b8ffe4b.png
[20210614102037886.gif_pic_center]: /images/20221005/c279ba49c4f44e2da06a00848bddd138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 25]: /images/20221005/c2773076393044169981ac9aef492310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 26]: /images/20221005/1ccf5a00933e419892226dff67614b80.png
[20210614103054489.gif_pic_center]: /images/20221005/069f619b443644b19ff65dcb56008531.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 27]: /images/20221005/1c4575c8c4b743bb879d0c75b24dc9f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 28]: /images/20221005/2175c998a9b34ae896af044c4fc483ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 29]: /images/20221005/d7b6bd2bbd0240da90db76b69dde0fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 30]: /images/20221005/9fde847b8a2946779dbd103e38c760f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 31]: /images/20221005/50a5307832054b8db7884617e537cc3c.png
[2021061420030689.png]: /images/20221005/c8d7f626648f46acae4b12dd55240bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 32]: /images/20221005/8ee0b870339d475a967a06c7cbcd6888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 33]: /images/20221005/fc334c602d8546fa8687e321b6592fbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 34]: /images/20221005/c50e7f2a7f1849689cde299cb976e7bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 35]: /images/20221005/e1b27fa238ea4c6e850e0aa69c424299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 36]: /images/20221005/40ed296935794abe8460092532f99b1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 37]: /images/20221005/3eea56172c03467bb643f22f0a59dd8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 38]: /images/20221005/729a82571e2243089cc625eeba7ab10e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 39]: /images/20221005/89d9188dd66e4268be1bcda7dcb142cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 40]: /images/20221005/9ba0fe06156d4fe5845e945c7b661acd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 41]: /images/20221005/d3858081a67940b09891647494e99f9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 42]: /images/20221005/13893d61234f4f909c644fb4d6c70652.png
[20210615111242705.gif_pic_center]: /images/20221005/111ed32fd40c4179881bf95ee116babf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 43]: /images/20221005/2cec676e37264ee4a7837e9a5ce654f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 44]: /images/20221005/1a7b0072bc7b4e8b8a7aa509ae4fec66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 45]: /images/20221005/cbd0fbc0dd964842a7f0fd78a6755930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 46]: /images/20221005/c4ab3c896ac74c0c8aee50e645f1a0ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 47]: /images/20221005/de4975393efa4086a386191ebc06ddf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 48]: /images/20221005/94bbd67f51904984a2f86ee5a20a5f57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 49]: /images/20221005/588a0851928d474b89a34d1446b86d67.png
[20210615141049108.png]: /images/20221005/291dbee0e66d40e99c19c5cf84ad3a10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 50]: /images/20221005/125f96873d524546b7da377b5ff2c593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 51]: /images/20221005/eac2eb1cbd25489f9a004ac659359d37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 52]: /images/20221005/10fa72ef2ea44c77b7e0081cd86dfa2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 53]: /images/20221005/43f8ffc0b9b54914b17dee64e6dd46a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 54]: /images/20221005/daf13b3a933445388e889e04a8123fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 55]: /images/20221005/6c79f2195068407ca46fa26303b74631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 56]: /images/20221005/2e76553a4d4b443487220ccaef7671af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 57]: /images/20221005/512a15e88ebc45a2bd1a1a425b3c5331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 58]: /images/20221005/09161bdac65740f49c865519aed31349.png