django實現簡單的後臺管理頁面和部分數據展現

如下步驟展現了簡單的流程：

建立工程

配置工程

簡單的模型設計

搜索並簡單修改前臺頁面

表單顯示

搜索重置

過濾器等功能

注：僅供我的回顧用

 

1. 基本方法
action 提交地址
method 指定請求方式，默認不填爲get，post請求安全性更高
csrf_token 註釋或添加到html中可防止校驗

input框
checkbox 多選框
enctype='multipart/form-data' 上傳文件必填參數
multiple 上傳多個文件必填參數
type 爲file可上傳文件

request.method
request.FILES.get
request.FILES.getlist
line in file.chunks()

2. 建立工程並配置
django-admin startproject tzcrm

zh-hans  語言本地化
Asia/Shanghai  時區設置

 

3. 建立並註冊teacher應用
python manage.py startapp teacher

4.建立並配置數據庫 tzcrm

數據庫配置基本信息

NAME
USER
PASSWORD
HOST
PORT
CHARSET

從已有數據庫語句到到建立數據庫語句
show create database crm;

 

 

改成
CREATE DATABASE `tzcrm` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;
就建立出了tzcrm

配置數據庫後出錯以下：
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
解決方式：網上搜索，修改
/home/pyvip/.virtualenvs/tzcrm/lib/python3.6/site-packages/django/db/backends/mysql/base.py
註釋掉如下兩行語句
if version < (1, 3, 13): 　　　　　　　　　　
raise ImproperlyConfigured(‘mysqlclient 1.3.13 or newer is required; you have %s.’ % Database.version) 

注：若是用django2.1.7和pymysql 0.9.3就不會出現此問題

5. 建立模型類，建立數據表，數據遷移
python manage.py makemigrations teacher
python manage.py migrate teacher

 

 

 

6. 切換ipython，給模型添加數據

pip install ipython
python manage.py shell

from teacher.models import Grade, Student
g1 = Grade.objects.create(name='Django框架', num='7')
g2 = Grade.objects.create(name='python進階', num='45')
Student.objects.create(name='心藍', age=16, grade=g1)
Student.objects.create(name='潘毅', age=16, grade=g2)

 

7.建立簡單路由

1）建立模板存放路徑：
①項目根目錄下建立一個templates文件夾，在此文件夾下以應用名再建立一層目錄

②在settings文件中的TEMPLATES字典中的DIRS關鍵字值列表中添加
os.path.join(BASE_DIR, 'templates')

③配置簡單的HTTPResponse響應，測試路由配置是否正確

2）建立靜態文件存儲路徑
①在項目根目錄下建立文件夾static，用於存放靜態文件

②settings文件中最後添加
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
這個 STATICFILES_DIRS 必定要寫對，不然沒法加載靜態文件

③去bootstrap 3網站找比較好看的模板
https://v3.bootcss.com/getting-started/
起步菜單
下翻找到Carousel(https://v3.bootcss.com/examples/dashboard/)，其實是一個後臺模板
右鍵--》查看網頁源代碼
全選複製
在模板應用路徑下建立一個base.html文件並粘貼

④修改7->1）->③中配置的響應爲
return render(request, 'teahcer/base.html')

⑤從新啓動django服務，訪問頁面
http://127.0.0.1:8000/teacher/students/

⑥啓動服務後，會有許多404錯誤，這些是未找到的靜態文件，能夠直接打開對應網址，複製並在項目static目錄下建立css,js,img等目錄存放這些

⑦在base.html 中還有一些兼容配置，支持ie9等的，能夠將其刪除，以避免影響性能

⑧引入css：
在base.html開頭位置 添加 {% load static %}
在使用css的位置，用 {% static 'teacher/css/dashboard.css' %} 替換並指定當前路徑
注：此處teacher爲static目錄下的應用名稱目錄

 

2）挖坑抽取模板
①目標是將原模板修改爲以下樣子

 

 

②參照原網站樣式修改base.html中的信息

③對標題和Section title以及table-responsive挖坑

 

 

 

 

 

④在模板路徑下建立學生列表文件student_list.html

⑤在student_list.html中繼承base模板，以下
{% extends 'teacher/base.html' %}
{% block title %}學生列表{% endblock %}
{% block content %}{% endblock %}

⑥修改student list視圖函數對應的路由模板
def student_list_view(request):
# return HttpResponse('學生列表')
return render(request, 'teacher/student_list.html')

⑦啓動django服務看效果

8. 查詢數據並顯示到頁面

1）修改視圖函數

 

 

2）將數據庫的值顯示到頁面

 

3）添加搜索功能
①搜索框頁面樣式
https://v3.bootcss.com/css/#tables
到bootcss 3網站-->全局css樣式-->表單，找到以下內容，複製粘貼

 

初步修改成以下，並添加到緊鄰 <h2 class="sub-header">{{ section }}</h2> 的位置
<div class="container" style="margin-bottom: 10px">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="在此輸入想搜索的人名" name="name">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</div>

btn-primary 控制搜索按鈕爲藍色
最外層添加div並使style="margin-bottom: 10px",確保搜索框與表格之間有10px間距，且對齊

②視圖函數實現搜索功能
def student_list_view(request):
# return HttpResponse('學生列表')
section = '學生列表'
students = Student.objects.all()
search_info = request.GET.get('search_info', None)
# 查詢
if search_info:
if search_info.isdigit():
students = students.filter(phone=search_info)
else:
students = students.filter(name=search_info)

context = {
'students': students,
'section': section,
'search_info': search_info,
}

return render(request, 'teacher/student_list.html', context=context)

③實現按鈕重置， 參考
<div class="container" style="margin-bottom: 10px">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">姓名</label>
<input type="text" class="form-control" id="exampleInputName2"
placeholder="在此輸入姓名或電話查詢" name="search_info"
value="{{ search_info|default:'在此輸入姓名或電話查詢' }}">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<a href="{% url 'teacher:student_list' %}" class="btn btn-primary"
role="button">重置</a>
</form>
</div>

 

9. 自定義過濾器處理性別顯示爲數字的狀況
①在應用下建立python包 templatetags
注意：
此文件夾名稱必須是templatetags，
必須是一個python包，
必須在要應用過濾器的應用目錄下

②在文件夾templatetags文件夾下建立python文件 teacher_customer_filter.py
自定義過濾器
from django.template import Library

register = Library()

def my_male(value):
'''
轉換性別的過濾器
:param value:
:return:
'''
mp = {
0: '女',
1: '男',
}
return mp[value]
# 註冊
register.filter(my_male)

③在html中應用過濾器函數
<td>{{ student.sex|my_male }}</td>

遺留：支持中英文的過濾器呢？
# 上面的裝飾器寫法
@register.filter(name='aaa')
def my_male(value, lang='zh'):
'''
轉換性別的過濾器，支持中英文
:param value:
:return:
'''
# 經過嵌套字典給出中英文切換
mp = {
'zh': {0: '女', 1: '男'},
'en': {0: 'female', 1: 'male'}
}
return mp[lang][value]

<td>{{ student.sex|my_male:'en' }}</td>