Python Web開發之Django的靜態文件

程序員曾經問我： Web開發時，會有前端工程師，會有美工，就算我不懂HTML、CSS和JS的應用是不是也是可以的？

不可以，我肯定的回答。你這家伙很明顯是要偷懶啊。其實前端、后端真沒那么涇渭分明的。

1

別的不說，就說你學習Python的Web框架，Django時，里面的靜態文件就是指HTML、CSS和JS。這時，你到哪找前端？到哪找美工？

再者說了，網頁靜態三劍客，是學習Web開發的基礎，連基礎都沒打好，你就想上天么？

其實，無論你是學習Java中的JSP，C#中的Asp.net或Python中的Django時，最終返回給瀏覽器的都是HTML，附加CSS和JS。

2

自從喬布斯公開懟Adobe Flash插件，說它有漏洞后，HTML5加快了腳本，獲得眾多廠家的支持，特別是瀏覽器企業。

在移動互聯網時代，瀏覽器除了跑在PC上外，還跑在手機、平臺，電視等終端上面，而最新的瀏覽器，都是支持HTML5的。我想，它才是真正的跨平臺吧。

HTML5簡稱為H5,而經常提H5的，不再是程序員，而是做銷售、做運營的哪些人，因為他們經常用H5來做營銷和推廣。

3

如果你見到一個頁面很丑，很丑，你會怎么做？--直接關閉，別無他法。在這個看顏值的時代，頁面也是要很美很美的。而美化H5的，便是CSS了。

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制,屬于表現層的布局語言。說白了，CSS就是HTML的化妝師。它會通過多種方式，讓HTML變得更美，更動人。

4

提到動人，可不能光說不練，得行動起來，跟人互動。Web前端的互動技術，是由JavaScript，簡稱JS承擔的。它是一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言。

以前大家都從基本的JS腳本語言編寫，每次都重復的編程，浪費時間不說，繁瑣的工作，讓眾多程序員，望而卻步。

后來的后來，有一些牛人，把一些常用的，加上一些效果，封裝成js庫，于是就是出現了jquery，Bootstrap，Node.Js，Amaze等框架，同時還加入了對一些UI的操作。

5

于是后期的程序員，學JS，很少從原始開始學了，而是學以上一些框架中的API使用。經過一段時段后，另一些大牛，發現目前在用的這些框架，過于龐大了，而且很多功能基本上都用不到，于是他們就想化繁為簡。

就這樣，React.js、Vue.js等框架就出現了，程序員也開心的在使用中。

其實，差不多所有js框架都有人都在使用，只是多少的問題。目前用的較多的是Vue.js和React.js。

開發增刪改查時，往往會先開發新增功能，因為有了新增功能，才有了錄入數據的窗口。有了數據，你要刪、要改、要查，才能水到渠成，順理成章。在Web開發中，新增數據，往往是通過表單的方式進行錄入的。

9.1 新建forms

為了方便表單的處理，Django3.0專門提供了對應的框架。應用時，你可以用鼠標右鍵department目錄，新建一個forms.py文件。

from django import forms
from django.forms import widgets
from django.core.exceptions import ValidationError
import re


class DepartmentForm(forms.Form):
    name=forms.CharField(
        label='部門名稱:',
        required=True,
        max_length=120,
        error_messages={
            'required': '部門名稱不能為空，請輸入!',
            'max_length': '部門名稱太長了!'},
        widget=widgets.TextInput(attrs={"placeholder": 
                                 "請輸入部門名稱", "class": "form-control"}))

    leader=forms.CharField(
        label='負 責 人:',
        required=True,
        max_length=60,
        error_messages={
            'required': '負責人不能為空，請輸入!',
            'max_length': '負責人名字太長了!'},
        widget=widgets.TextInput(attrs={"placeholder": 
                                 "請輸入負責人", "class": "form-control"}))

    phone=forms.CharField(
        label='手 機 號:',
        required=True,
        error_messages={
            'required': '手機號不能為空，請輸入!'},
        widget=widgets.NumberInput(attrs={"placeholder": 
                                  "請輸入手機號", "class": "form-control"}))

    choice=(("集團總部", "集團總部"), ("華南區域", "華南區域"), 
              ("華北區域", "華北區域"), ("華東區域", "華東區域"),)
    region=forms.CharField(
        label='所在區域:',
        initial='集團總部',
        widget=widgets.Select(choices=choice, 
                              attrs={"class": "form-control"}))

    address=forms.CharField(
        required=False,
        label='辦公位置:',
        max_length=200,
        widget=widgets.TextInput(attrs={"placeholder": "辦公所在位置", 
                                        "class": "form-control"}))

    longitude=forms.DecimalField(
        required=False,
        label='區域經度:',
        widget=widgets.NumberInput(attrs={"placeholder": "區域所在經度", 
                                          "class": "form-control"}))

    latitude=forms.DecimalField(
        required=False,
        label='區域緯度:',
        widget=widgets.NumberInput(attrs={"placeholder": "區域所在緯度", 
                                          "class": "form-control"}))

    # 手機號驗證
    def clean_phone(self):
        phone=self.cleaned_data.get('phone')
        mobile_re=re.compile(r'^(13[0-9]|15[012356789]|17[678]
                               |18[0-9]|14[57])[0-9]{8}$')
        if not mobile_re.match(phone):
            raise ValidationError('請輸入正確的手機號!')
        return phone

別看內容挺多的，其實都是重復的，知道其中一項的類型屬性定義，其他的也妥妥的了。類型屬性之前整理過，這里就不重復出現了，有關表單的控件，往下看。

1. 表單控件

Web開發語言的控件，其實就是對HTML標簽的封裝和提供相關配置，目的是為了方便實現表單功能，方便程序員快速實現數據收集的功能。表單控件內容如下。

2. 控件屬性

表單控件屬性中，關鍵的點在于驗證。在form中自定義驗證規格有3種方式，第1種是隨意定義函數名，然后用validators屬性指定，函數要先定義；第2種是用約定成俗的方法，以clean_字段名定義函數名，表單在驗證時，會自動讀取；第3種，是在clean()函數內進行統一定義。表單控件屬性選項一覽表。

9.2 業務邏輯

有了表單forms.py，沒有業務邏輯views.py的助力，它在模板中將手足無措，華而不實。在views.py中實現的代碼來了。

from django.shortcuts import render
from department.forms import DepartmentForm
from department.models import Department


# 判斷部門名稱是否已存在
def name_exist(name):
    is_exist=Department.objects.filter(name=name).exists()
    if is_exist:
        return True
    else:
        return False


# 添加數據
def create(request):
    form=DepartmentForm()
    if request.method=='POST':
        msg=''
        form=DepartmentForm(request.POST)
        if form.is_valid():
            name=form.cleaned_data.get('name')
            if name_exist(name):
                form.add_error('name', "部門名稱已存在,請確認!")
                msg=''
            else:
                department=Department()
                department.name=name
                department.leader=form.cleaned_data.get('leader')
                department.phone=form.cleaned_data.get('phone')
                department.region=form.cleaned_data.get('region')
                department.address=form.cleaned_data.get('address')
                department.longitude=form.cleaned_data.get('longitude')
                department.latitude=form.cleaned_data.get('latitude')
                department.save()
                msg='恭喜你,創建部門信息成功!'
                # 重置表單內容(清空)
                form=DepartmentForm()
        return render(request, 'department/create.html', 
                      {'form': form, 'msg': msg})
    else:
        return render(request, 'department/create.html', {'form': form})

9.3 urls配置

有關業務邏輯在views.py實現之后，需要在department/urls.py里進行配置，才能提供地址供用戶進行訪問。

from django.urls import path
from . import views

app_name='department'
urlpatterns=[
    path('create/', views.create, name='create'),
]

對了，別忘記在sales/urls.py中進行登記。

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns=[
    path('base/', include('base.urls')),
    path('department/', include('department.urls')),
    path('admin/', admin.site.urls),
]

9.4 模板文件

一切業務相關的工作準備就緒，就差模板靚麗轉身。在templates/department下，新建模板文件create.html。有了模板文件，表單Form就有了展露才華的機會。

表單布局，如果想要以表格的方式見人，可選用form.as_table；如果想要以段落的方式，可選用form.as_p；如果想要以序列的方式見人，可選用form.as_ul。具體選用哪種，請看需求文檔中界面的要求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增部門</title>
</head>
<body>
{{ msg }}
<form action="{% url 'department:create' %}" method="post" novalidate>
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">保存</button>
    <button type="reset">清空</button>
</form>
</body>
</html>

溫馨提示：在html5的form中加入novalidate屬性，是為了禁用其自帶的校驗功能。

用form.as_p布局的效果，可能不是你喜歡的類型，但測試form.as_p和form.as_ul之后，你就不會這樣想了。因為它們會讓你大失所望，大跌眼鏡。布局盡管不太如意，但請你不要捶胸頓足，因為捶胸很痛的。

運行項目之后，在瀏覽器輸入http://127.0.0.1:8000/department/create/，輸出結果如下。

好了，有關部門管理系統的表單內容，老陳講完了，如果覺得對你有所幫助，希望你能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關注我，沒錯的。

#Python##Django##程序員##Web##項目實戰#

正的大師,永遠都懷著一顆學徒的心！

一、項目簡介

基于Django自動化資產監控管理系統

二、實現功能

支持用戶管理
支持認證預授權
支持數據展示
支持資產監控
支持監控域名
支持支持主機
支持網站索引
支持網絡資產
支持資源消耗管理
支持錯誤日志管理
支持配置信息管理

三、技術選型

html5
js
css
python
Django

四、界面展示

存儲要進行監控的域名資產

存儲子域名對應IP相關開放端口，服務，所在地區

存儲所有獲取存活的子域名

判斷該子域名是否進行網頁爬行

存儲所有子域名標題，語言，服務器類型等信息

存儲所有監控子域名的網頁內容

作為數據展示表的外鍵關聯，數據一致

掃描端主機資源消耗

掃描過程中錯誤日志

五、源碼地址

私信回復：資產管理

在線咨詢

上一篇：全國青少年普法網登錄平臺青少年普法網官網學生登錄入
下一篇：jQuery全屏滾動插件fullPage.js

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商