1.前端基礎
html：看一下標籤
css：裝飾頁面，操縱頁面佈局
js：前端專用語言
jquery：是js的一個封裝庫，語法和js稍微不太一樣
2.快速美化頁面
bootstrap庫找到css鏈接：https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
bootstrap.min.css中間min的意思是壓縮版本，上線時候用
不帶min的是開發版本
把這兩個鏈接通過瀏覽子打開後下載下來
創建如下圖所示文件夾，然後直接把下載下來的文件拷貝到bootstrap目錄下，會發現帶min文件跑到了不帶min文件下
3.引用
爲了避免每個文件都寫一次引用，所以需要用到模版繼承。在template/personal_info目錄下創建base.html文件，用來放公共的部分
很多樣式都可以上bootstraps官網上找到，然後自己修改下
# first_project/personal_info/forms.py from django import forms from personal_info.models import Person class PersonCreateForm(forms.ModelForm): class Meta: # 配置中心，前端的東西都可以在這裏修改，比如css，需要的時候再查一下就可以 model = Person # 把model導進來 fields = '__all__' # 代表所有字段，也可以挨個寫一下 widgets = { 'name':forms.TextInput(attrs={'id':'name_id', 'class':'form-control'}), # 可以開發模式打開網頁，找到name那行，看到新加了id的字段 'gender':forms.Select(attrs={'id':'gender_id', 'class':'form-select'}), 'age':forms.NumberInput(attrs={'id':'age_id', 'class':'form-control'}), 'address':forms.TextInput(attrs={'id':'address_id', 'class':'form-control'}), 'id_card':forms.TextInput(attrs={'id':'id_card_id', 'class':'form-control'}), 'temperature':forms.NumberInput(attrs={'id':'temperature_id', 'class':'form-control', 'step':'0.1 '}), } labels = { # labels沒辦法在這裏加class, 通過filter去做 'name':'名字' # 可以看到頁面中的原本英文'name'變成了'名字' }
# first_project/personal_info/templatetags/mytags.py from functools import reduce from django import template register = template.Library() # register的名字是固定的,不可改變 @register.filter(is_safe=False) def add_filter(value, rounded=2): assert isinstance(value, list) return round(sum(value), rounded) @register.simple_tag # 官方推薦方式 def add_tag(*args, **kwargs): args = args[0] assert isinstance(args, list) result = reduce(lambda x, y: x + y, args) rounded = kwargs.get('rounded') or 2 result = round(result, rounded) return result @register.filter(is_safe=False) def label_class(value, cls): # 爲了改label加class return value.label_tag(attrs={'class': cls})
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 子模版只需要寫block裏面的內容即可 --> <title>{% block title_content %}{% endblock %}</title> <!-- 這個地方的rel="stylesheet是必須的--> <link href="{% static 'personal_info/libs/bootstrap/bootstrap.css' %}" rel="stylesheet"> </head> <body> <div class="container"> <!-- 這樣會讓兩邊留白居中--> <div class="row"> {% block body_content %}{% endblock %} </div> </div> </body> </html>
{% extends 'personal_info/base.html' %} <!-- 引入基礎模版 -->
{% load mytags %}
{% block title_content %}登記人員信息{% endblock %}
{% block body_content %}
<form action="{% url 'personal_info:person_create' %}" method="post">
{% csrf_token %}
{% for item in form %}
<div class="col-md-6 mb-3">
{{ item|label_class:"form-label" }}
{{ item }}
{{ item.errors}}
</div>
{% endfor %}
<p><button type="submit" class="btn btn-primary">保存</button></p>
</form>
{% endblock %}
{% extends 'personal_info/base.html' %} <!-- 引入基礎模版 -->
{% load mytags %} <!-- 導入自定義tag -->
{% block title_content %}疫情人員登記表{% endblock %}
{% block body_content %}
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">名字</th>
<th scope="col">年齡</th>
<th scope="col">性別</th>
<th scope="col">疑似</th>
</tr>
</thead>
<tbody>
{{ list|add_filter }} <!-- 調用自定義filter -->
{% add_tag list %} <!-- 調用自定義tag -->
<!-- 默認是object_list 模板語言for循環語法 -->
{% for item in object_list %}
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<!-- 不加get_display會顯示數字 -->
<td>{{ item.gender|yesno:"男,女"}}</td>
<td>{% if item.temperature > 37 %}是{% else %}否{% endif %}</td>
</tr>
{% empty %}
<tr>
<!-- 意思是將5列合併成1列 -->
<td colspan="5">暫無數據</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- 這個地方跳轉到 personal_info:person_create url -->
<p><a class="btn btn-primary" href="{% url 'personal_info:person_create' %}">登記</a></p>
{% endblock %}
啓動服務後，效果
保存後->