编程技术文章分享与教程

网站首页 > 技术文章 正文

第14章 在这看颜值的时代，Django的布局也要美化

hmc789 2024-11-25 12:46:55 技术文章 2 ℃

如果要查看每个存在岗位的详细信息，可在index.html里，补上链接到detail函数的内容，同时用CSS稍微把布局美化一下。

14.1 布局美化

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>岗位信息列表</title>
 <style>
 table,table tr th, table tr td {
 border-collapse:collapse;
 border:1px solid #a8aeb2;
 padding: 2px 5px;
 }
 </style>
</head>
<body>
 <table>
 <tr>
 <th>岗位名称</th>
 <th>创建日期</th>
 <th>操作</th>
 </tr>
 {% for post in posts %}
 <tr>
<td><a href='detail/{{post.id}}'>{{ post.name }}</a>
</td>
 <td>{{ post.createDate | date:'Y-n-d H:i' }}</td>
<td><a href='delete/{{post.id}}'>删除</a>
<a href='update/{{post.id}}'>修改</a>
</td>
 </tr>
 {% endfor %}
</table>
</body>
</html>

实现的列表和删除功能贴近现实的应用，而创建和修改，目前数据是写死在视图里的，不符合实际情况，需要进行升级改造，为了实现动态创建或修改数据，需要在模板(html)文件中进行表单定义。

14.2 表单定义

在base/templates/base下新建一个create.html模板文件,其中action指向views.py函数时，是通过url标签指定的。这样做的好处是在后台更改时，模板内容可以保持不变。

模板默认请求的方法是get，如果要指定为post的话，通过<form>里的method进行指定。

{% extends 'base/base.html' %}

{% block title %}创建岗位信息{% endblock %}
{% block content %}
 <h3>新增岗位</h3>
 {{ msg }}
 <form action="{% url 'base:create' %}" method="post">
 {% csrf_token %}
 <label for="name">岗位:</label><input id="name" name="name" type="text" placeholder="请输入岗位"/>
 <input type="submit" value="保存"/>
 </form>
{% endblock %}

有了界面布局，还得有后台对表单的处理，才是有用之道，有关表单的处理，下节见。

Tags：

猜你喜欢

标签列表
最新留言