当前位置：首页 > uni-app

uniapp点赞源码

2026-02-06 10:45:50uni-app

uniapp点赞功能实现

前端页面代码（Vue模板部分）

<template>
  <view class="like-container">
    <view @click="handleLike" :class="['like-btn', isLiked ? 'liked' : '']">
      <uni-icons :type="isLiked ? 'heart-filled' : 'heart'" size="24" color="#ff5a5f"></uni-icons>
      <text>{{ likeCount }}</text>
    </view>
  </view>
</template>

JavaScript逻辑部分

uniapp点赞源码

<script>
export default {
  data() {
    return {
      isLiked: false,
      likeCount: 0
    }
  },
  methods: {
    handleLike() {
      this.isLiked = !this.isLiked
      this.likeCount += this.isLiked ? 1 : -1

      // 实际项目中这里需要调用API接口
      uni.request({
        url: 'https://your-api.com/like',
        method: 'POST',
        data: {
          action: this.isLiked ? 'like' : 'unlike',
          item_id: '123' // 替换为实际项目ID
        },
        success: (res) => {
          console.log(res.data)
        }
      })
    }
  }
}
</script>

CSS样式部分

<style>
.like-btn {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 20px;
  background-color: #f8f8f8;
}

.like-btn.liked {
  background-color: #fff0f0;
}

.like-btn text {
  margin-left: 5px;
  color: #666;
}
</style>

后端接口实现（Node.js示例）

Express路由处理

uniapp点赞源码

const express = require('express')
const router = express.Router()

// 模拟数据库存储
let likesDB = {}

router.post('/like', (req, res) => {
  const { action, item_id } = req.body

  if (!likesDB[item_id]) {
    likesDB[item_id] = 0
  }

  if (action === 'like') {
    likesDB[item_id] += 1
  } else {
    likesDB[item_id] = Math.max(0, likesDB[item_id] - 1)
  }

  res.json({
    code: 200,
    data: {
      count: likesDB[item_id]
    }
  })
})

数据库设计（MySQL示例）

CREATE TABLE `likes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL COMMENT '用户ID',
  `item_id` int(11) NOT NULL COMMENT '内容ID',
  `item_type` varchar(20) NOT NULL COMMENT '内容类型',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `user_item` (`user_id`,`item_id`,`item_type`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

优化建议

防抖处理

let timer = null
handleLike() {
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 原有逻辑
  }, 300)
}

本地缓存

onLoad() {
  const cachedLike = uni.getStorageSync('like_status_123')
  if (cachedLike) {
    this.isLiked = cachedLike.status
    this.likeCount = cachedLike.count
  }
}

// 在请求成功后
uni.setStorageSync('like_status_123', {
  status: this.isLiked,
  count: this.likeCount
})

以上代码提供了uniapp实现点赞功能的完整示例，包含前端交互、后端接口和数据库设计。实际项目中需要根据具体需求调整参数和逻辑。