基于Flask框架,HTML5,CSS3,Javascript,并使用MySQL数据库,完成一个评论区功能,其中每个ul中嵌套两个li标签,分别渲染评论内容和回复内容两部分,回复内容在渲染上只要不与评论内容处于一个纵线即可直观区分它们之间的关系
时间: 2024-06-11 16:06:32 浏览: 112
。下面是一个简单的实现:
app.py
```python
from flask import Flask, render_template, request, redirect, url_for
import pymysql
app = Flask(__name__)
# MySQL数据库配置
db = pymysql.connect(
host='localhost',
user='root',
password='password',
database='comments',
charset='utf8mb4'
)
# 首页
@app.route('/')
def index():
# 查询所有评论
cursor = db.cursor()
cursor.execute('SELECT * FROM comments')
comments = cursor.fetchall()
cursor.close()
return render_template('index.html', comments=comments)
# 提交评论
@app.route('/submit', methods=['POST'])
def submit():
name = request.form.get('name')
content = request.form.get('content')
parent_id = request.form.get('parent_id')
cursor = db.cursor()
cursor.execute('INSERT INTO comments (name, content, parent_id) VALUES (%s, %s, %s)', (name, content, parent_id))
db.commit()
cursor.close()
return redirect(url_for('index'))
if __name__ == '__main__':
app.run(debug=True)
```
index.html
```html
<!DOCTYPE html>
<html>
<head>
<title>评论区</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
}
ul {
list-style: none;
margin: 20px 0;
padding: 0;
}
ul ul {
border-left: 2px solid #ccc;
margin-left: 20px;
padding-left: 20px;
}
ul li {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
ul li:nth-child(odd) {
background-color: #fff;
}
.reply-form {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.reply-form input[type=text] {
width: 100%;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.reply-form input[type=submit] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>评论区</h1>
<form action="{{ url_for('submit') }}" method="post">
<input type="text" name="name" placeholder="姓名"><br>
<textarea name="content" placeholder="评论内容"></textarea><br>
<input type="hidden" name="parent_id" value="0">
<input type="submit" value="提交评论">
</form>
<ul>
{% for comment in comments %}
<li>
<p>{{ comment[1] }}</p>
<p><a href="#" onclick="showReplyForm({{ comment[0] }})">回复</a></p>
<ul>
{% for reply in comment[2] %}
<li>
<p>{{ reply[1] }}</p>
<p><a href="#" onclick="showReplyForm({{ reply[0] }})">回复</a></p>
<ul>
{% for subreply in reply[2] %}
<li>
<p>{{ subreply[1] }}</p>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<div id="reply-form-{{ comment[0] }}" class="reply-form" style="display:none">
<form action="{{ url_for('submit') }}" method="post">
<input type="text" name="name" placeholder="姓名"><br>
<textarea name="content" placeholder="回复内容"></textarea><br>
<input type="hidden" name="parent_id" value="{{ comment[0] }}">
<input type="submit" value="提交回复">
</form>
</div>
</li>
{% endfor %}
</ul>
<script>
function showReplyForm(id) {
var form = document.getElementById('reply-form-' + id);
form.style.display = 'block';
}
</script>
</body>
</html>
```
comments表结构
```sql
CREATE TABLE `comments` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`content` text NOT NULL,
`parent_id` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
运行app.py后,在浏览器中访问http://localhost:5000即可看到评论区界面。在表单中输入姓名和评论内容,点击提交评论按钮即可添加一条评论。点击回复链接,会显示一个回复表单,输入姓名和回复内容,点击提交回复按钮即可添加一条回复。回复的层级可以无限嵌套。
阅读全文