uniapp点赞源码
以下是一个基于UniApp的点赞功能实现示例，包含前端交互和基础后端逻辑模拟：
前端页面实现
<template>
<view class="container">
<view class="like-container" @click="handleLike">
<image
:src="isLiked ? '/static/liked.png' : '/static/like.png'"
class="like-icon"
/>
<text>{{ likeCount }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLiked: false,
likeCount: 0
}
},
methods: {
handleLike() {
this.isLiked = !this.isLiked
this.likeCount = this.isLiked ? this.likeCount + 1 : this.likeCount - 1
// 实际项目中这里应该调用API
uni.request({
url: 'https://your-api.com/like',
method: 'POST',
data: {
postId: 123,
action: this.isLiked ? 'like' : 'unlike'
}
})
}
}
}
</script>
<style>
.like-container {
display: flex;
align-items: center;
padding: 10px;
}
.like-icon {
width: 20px;
height: 20px;
margin-right: 5px;
}
</style>后端模拟实现（Node.js示例）
const express = require('express')
const app = express()
app.use(express.json())
let likesData = {}
app.post('/like', (req, res) => {
const { postId, action } = req.body
if (!likesData[postId]) {
likesData[postId] = 0
}
if (action === 'like') {
likesData[postId]++
} else {
likesData[postId] = Math.max(0, likesData[postId] - 1)
}
res.json({
success: true,
count: likesData[postId]
})
})
app.listen(3000)关键功能说明
- 状态管理：使用
isLiked布尔值记录当前点赞状态 - 计数器：
likeCount实时显示点赞数量 - 防抖处理：实际项目中应添加防抖逻辑防止快速重复点击
- 数据持久化：需要配合数据库实现点赞数据的持久化存储
扩展功能建议
- 添加动画效果提升用户体验
- 实现用户鉴权确保点赞操作真实性
- 使用本地缓存减少API请求
- 考虑并发情况下的数据一致性
以上代码需要根据实际项目需求进行调整，特别是后端API部分需要连接数据库实现完整功能。
