实现点赞功能的大致思路如下：
1. 在数据库
中创建一张表，用来存储
用户点赞的音乐信息。表的结构可以包含以下字段：
用户ID、音乐ID、
点赞时间等。
2. 在音乐列表
中添加一个
点赞按钮，并绑定点击事件。
3. 在点击事件
中，发送请求到后端，将
用户ID和音乐ID传递给后端，后端将这些信息存储到数据库
中。
4. 在音乐列表
中，根据
用户ID和音乐ID判断该
用户是否已经
点赞过该音乐，如果已经
点赞，则将
点赞按钮设置为已选
中状态。
5. 在显示音乐列表时，根据数据库
中存储的
点赞信息，对每个音乐的
点赞数进行统计，并显示在页面上。
以下是一个
简单的
实现例子：
前端代码：
```html
<template>
<div>
<div v-for="music in musicList" :key="music.id">
<h3>{{ music.name }}</h3>
<p>
点赞数：{{ music.likeCount }}</p>
<button @click="likeMusic(music)">
点赞</button>
</div>
</div>
</template>
<
script>
export default {
data() {
return {
musicList: []
}
},
methods: {
getMusicList() {
// 发送请求获取音乐列表数据
// 省略代码...
},
likeMusic(music) {
// 发送
点赞请求
// 省略代码...
music.likeCount++
music.isLiked = true
}
},
mounted() {
this.getMusicList()
}
}
</
script>
```
后端代码：
```java
script
// 引入数据库相关模块
const mysql = require('mysql')
const dbConfig = require('../config/db')
// 创建数据库连接池
const pool = mysql.createPool(dbConfig)
//
点赞接口
exports.likeMusic = (req, res) => {
const userId = req.body.userId
const musicId = req.body.musicId
const likeTime = new Date()
// 将
点赞信息存储到数据库
中
pool.query('INSERT INTO like_music (user_id, music_id, like_time) VALUES (?, ?, ?)', [userId, musicId, likeTime], (error, results) => {
if (error) {
console.log(error)
res.status(500).send('
点赞失败')
} else {
res.send('
点赞成功')
}
})
}
// 获取音乐列表接口
exports.getMusicList = (req, res) => {
// 查询所有音乐信息
pool.query('SELECT * FROM music', (error, results) => {
if (error) {
console.log(error)
res.status(500).send('获取音乐列表失败')
} else {
// 查询每首音乐的
点赞数
results.forEach((music, index) => {
pool.query('SELECT COUNT(*) AS like_count FROM like_music WHERE music_id = ?', [music.id], (error, results) => {
if (error) {
console.log(error)
} else {
music.likeCount = results[0].like_count
music.isLiked = false
}
// 所有查询都完成后，返回结果给客户端
if (index === results.length - 1) {
res.send(results)
}
})
})
}
})
}
```
需要注意的是，以上代码仅作参考，具体
实现可能会有所
不同，例如前端代码
中的请求方式、接口地址等等。另外，为了简化示例，代码
中没有包含参数校验、异常处理等部分，请在实际开发
中自行添加。
最低0.47元/天 解锁文章
2983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
