使用Vue+Django+Ant Design实现留言评论模块的示例代码

使用 Vue+Django+Ant Design 实现留言评论模块示例代码 本文将详细介绍如何使用 Vue、Django 和 Ant Design 实现一个留言评论模块的示例代码。该模块包括用户表和留言表，关系为一对多，留言表有父留言字段的 id，并且有自身的一对多关系。 数据库表结构 首先，我们需要创建两个表：user 表和 message 表。user 表用于存储用户信息，message 表用于存储留言信息。两个表的关系为一对多，即一个用户可以有多条留言。 ```sql CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text NOT NULL, `parent_msg_id` int DEFAULT NULL, `user_id` int NOT NULL, PRIMARY KEY (`id`), KEY `user_id` (`user_id`), KEY `message_ibfk_1` (`parent_msg_id`), CONSTRAINT `message_ibfk_1` FOREIGN KEY (`parent_msg_id`) REFERENCES `message` (`id`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `message_ibfk_2` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`) ON DELETE CASCADE ON UPDATE CASCADE ) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8; CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `identity` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8; ``` 后台接口 在 Django 的 views.py 中，我们定义了两个接口：获取留言接口和发布留言接口。 1. 获取留言接口 该接口用于获取所有留言信息，包括父留言和子留言。我们可以使用 Django 的 ORM 框架来实现该接口。 ```python from django.http import JsonResponse from .models import Message def get_messages(request): messages = Message.objects.all() data = [] for message in messages: data.append({ 'id': message.id, 'content': message.content, 'parent_id': message.parent_msg_id, 'user_id': message.user_id }) return JsonResponse(data, safe=False) ``` 2. 发布留言接口 该接口用于发布新的留言信息。我们可以使用 Django 的 ORM 框架来实现该接口。 ```python from django.http import JsonResponse from .models import Message def create_message(request): content = request.POST.get('content') parent_id = request.POST.get('parent_id') user_id = request.POST.get('user_id') message = Message(content=content, parent_msg_id=parent_id, user_id=user_id) message.save() return JsonResponse({'message': '留言发布成功'}, status=201) ``` 前端实现 在前端，我们使用 Vue.js 和 Ant Design 实现留言评论模块的 UI 组件。我们可以使用 Vue 的组件化开发方式来实现该模块。 首先，我们需要创建一个 Message 组件，用于展示留言信息。 ```html <template> <div> <div v-for="(message, index) in messages" :key="index"> <div>{{ message.content }}</div> <div v-if="message.parent_id"> <Message :message="message" /> </div> </div> </template> <script> export default { props: { messages: { type: Array, required: true } } } </script> ``` 然后，我们需要创建一个留言输入框组件，用于发布新的留言信息。 ```html <template> <div> <Input v-model="content" placeholder="请输入留言内容" /> <Button @click="createMessage">发布留言</Button> </div> </template> <script> export default { data() { return { content: '' } }, methods: { createMessage() { // 调用发布留言接口 } } } </script> ``` 总结 本文介绍了如何使用 Vue、Django 和 Ant Design 实现一个留言评论模块的示例代码。该模块包括数据库表结构、后台接口和前端实现三个部分。在实际开发中，我们可以根据需要进行修改和扩展。