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小时内与您取得联系。

整合营销服务商