写一个uniapp评论删除功能
时间: 2024-04-30 12:18:19 浏览: 205
uni-app实现点赞评论功能
首先要确定你的后端是如何存储评论的,这里以数据库为例,假设你的评论表结构如下:
```sql
CREATE TABLE `comment` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`content` varchar(255) NOT NULL,
`user_id` int(11) NOT NULL,
`created_at` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
然后在 Uniapp 中,你需要创建一个页面用来展示评论列表,并且为每一个评论添加一个删除按钮。当用户点击删除按钮时,需要向后端发起一个请求来删除对应的评论。
以下是一个示例页面代码:
```html
<template>
<view>
<view v-for="comment in comments" :key="comment.id">
<text>{{ comment.content }}</text>
<button @tap="deleteComment(comment)">删除</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
comments: []
}
},
methods: {
async fetchComments() {
const res = await uni.request({
url: '/api/comments',
method: 'GET'
})
this.comments = res.data
},
async deleteComment(comment) {
const res = await uni.request({
url: `/api/comments/${comment.id}`,
method: 'DELETE'
})
if (res.statusCode === 200) {
this.comments = this.comments.filter(c => c.id !== comment.id)
} else {
uni.showToast({
title: '删除评论失败',
icon: 'none'
})
}
}
},
mounted() {
this.fetchComments()
}
}
</script>
```
在这个页面中,我们首先定义了一个 `comments` 数组用来存储评论列表。然后在 `mounted` 钩子中调用 `fetchComments` 方法来获取评论列表。在 `fetchComments` 方法中,我们使用 `uni.request` 方法向后端发起一个 GET 请求,获取评论列表并更新 `comments` 数组。
在每一个评论项中,我们添加了一个删除按钮,并且在 `deleteComment` 方法中调用了 `uni.request` 方法来向后端发起一个 DELETE 请求,删除对应的评论。如果删除成功,我们在 `comments` 数组中过滤掉被删除的评论,然后页面会自动更新。如果删除失败,我们使用 `uni.showToast` 方法弹出一个提示框。
在后端中,我们需要添加一个接口来处理 DELETE 请求,删除对应的评论。以下是一个示例代码:
```javascript
const express = require('express')
const mysql = require('mysql2/promise')
const app = express()
const port = 3000
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'test'
})
app.use(express.json())
app.delete('/api/comments/:id', async (req, res) => {
const conn = await pool.getConnection()
try {
const [rows] = await conn.query('DELETE FROM comment WHERE id = ?', [req.params.id])
if (rows.affectedRows === 1) {
res.sendStatus(200)
} else {
res.sendStatus(404)
}
} catch (err) {
console.error(err)
res.sendStatus(500)
} finally {
conn.release()
}
})
app.listen(port, () => {
console.log(`Server is listening on port ${port}.`)
})
```
在这个示例后端代码中,我们首先创建了一个 MySQL 连接池,然后使用 `express.json` 中间件来处理请求体。在 `/api/comments/:id` 接口中,我们使用 `pool.query` 方法来执行 DELETE 语句,删除对应的评论。如果删除成功,我们返回 200 状态码,否则返回 404 状态码。如果出现错误,我们返回 500 状态码。最后在 `app.listen` 方法中启动服务器。
这样,你就可以实现一个简单的评论删除功能了。当然,你需要根据自己的实际需求来适当修改以上代码。
阅读全文