在Django框架下,HTML写一个笔记列表界面,用表格展示笔记,每个笔记包含修改和删除按钮,界面顶部显示欢迎用户以及新增笔记按钮
时间: 2023-05-31 16:04:34 浏览: 52
以下是一个简单的笔记列表界面的HTML代码示例,使用了表格来展示笔记,每个笔记包含修改和删除按钮,界面顶部显示欢迎用户以及新增笔记按钮:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>笔记列表</title>
</head>
<body>
<h1>欢迎 {{ user }}!</h1>
<a href="{% url 'add_note' %}">新增笔记</a>
<table>
<thead>
<tr>
<th>标题</th>
<th>内容</th>
<th>创建时间</th>
<th>修改时间</th>
<th></th>
</tr>
</thead>
<tbody>
{% for note in notes %}
<tr>
<td>{{ note.title }}</td>
<td>{{ note.content }}</td>
<td>{{ note.created_at }}</td>
<td>{{ note.updated_at }}</td>
<td>
<a href="{% url 'edit_note' note.id %}">修改</a>
<a href="{% url 'delete_note' note.id %}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
```
在上面的代码中,我们通过Django的模板语言,在HTML中使用了一些变量和标签来动态生成页面内容,具体解释如下:
- `{{ user }}`:用于显示当前登录用户的用户名,这个变量需要在后端视图函数中传递给模板。
- `{% url 'add_note' %}`:用于生成新增笔记按钮的链接地址,其中`add_note`是我们在urls.py中定义的URL名称,这个标签会自动将URL名称映射为对应的URL地址。
- `{% for note in notes %}`和`{% endfor %}`:用于遍历所有笔记对象,`notes`是在后端视图函数中传递给模板的笔记列表变量,`note`则代表每一个笔记对象,我们可以通过`note.title`、`note.content`等属性来获取笔记的具体信息。
- `{% url 'edit_note' note.id %}`和`{% url 'delete_note' note.id %}`:用于生成修改和删除笔记按钮的链接地址,`edit_note`和`delete_note`也是我们在urls.py中定义的URL名称,`note.id`则是当前笔记对象的唯一标识符,用于区分不同的笔记对象。