3.2.配置表单页面

生成应用

$ python manage.py startapp message

模板

编写模板文件

templates/message.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<form action="/form/" method="post" class="smart-green">
    <h1>留言信息
        <span>请留下你的信息.</span>
    </h1>
    <label>
        <span>姓名 :</span>
        <input id="name" type="text" name="name" class="error" placeholder="请输入您的姓名"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>邮箱 :</span>
        <input id="email" type="email" value="" name="email" placeholder="请输入邮箱地址"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>联系地址 :</span>
        <input id="address" type="text" value="" name="address" placeholder="请输入联系地址"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>留言 :</span>
        <textarea id="message" name="message" placeholder="请输入你的建议"></textarea>
        <div class="error-msg"></div>
    </label>
    <div class="success-msg"></div>
    <label>
        <span>&nbsp;</span>
        <input type="submit" class="button" value="提交"/>
    </label>
    <input type='hidden' name='csrfmiddlewaretoken' value='SfHkbL4feo1G00sJQtbO7TtLN4c2BUwa'/>
</form>

</body>
</html>

配置模板位置

hello_django/settings.py

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ...
    },
]

静态文件

编写css文件

static/css/style.css

.smart-green {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    background: #F8F8F8;
    padding: 30px 30px 20px 30px;
    font: 12px Arial, Helvetica, sans-serif;
    color: #666;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.smart-green h1 {
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 20px 0px 20px 40px;
    display: block;
    margin: -30px -30px 10px -30px;
    color: #FFF;
    background: #9DC45F;
    text-shadow: 1px 1px 1px #949494;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #89AF4C;
}

.smart-green h1 > span {
    display: block;
    font-size: 11px;
    color: #FFF;
}

.smart-green label {
    display: block;
    margin: 0px 0px 5px;
}

.smart-green label > span {
    float: left;
    margin-top: 10px;
    color: #5E5E5E;
}

.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
    color: #555;
    height: 30px;
    line-height: 15px;
    width: 100%;
    padding: 0px 0px 0px 10px;
    margin-top: 2px;
    border: 1px solid #E5E5E5;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    font: normal 14px/14px Arial, Helvetica, sans-serif;
}

.smart-green textarea {
    height: 100px;
    padding-top: 10px;
}


.smart-green .button {
    background-color: #9DC45F;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-border-radius: 5px;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    text-shadow: 1px 1px 1px #949494;
}

.smart-green .button:hover {
    background-color: #80A24A;
}

.error-msg {
    color: red;
    margin-top: 10px;
}

.success-msg {
    color: #80A24A;
    margin-top: 10px;
    margin-bottom: 10px;
}

配置静态文件位置

hello_django/settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

配置数据库

配置数据库信息

hello_django/settings.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'hello_django',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'PORT': '3306'
    }
}

生成数据表

$ python manage.py makemigrations
$ python manage.py migrate

提示：若生成数据表时报错：No modele named MySQLdb。原因是没有安装mysql的驱动，通过以下命令安装
$ workon hello_django      # 进入虚拟环境
$ pip install mysql-python # 安装mysql驱动

配置url

先编写views，再配置url

编写views

message/views.py

def form_view(request):
    return render(request, 'message.html')

配置url

hello_django/urls.py

from message.views import form_view

urlpatterns = [
    path(r'^form/$', form_view),
    path('polls/', include('polls.urls')), # 包含其他urls.py
    path('admin/', admin.site.urls),
]

不创建views，直接配置url

通过TemplateView

hello_django/urls.py

from django.views.generic import TemplateView

urlpatterns = [
    ...
    path('', TemplateView.as_view(template_name='index.html'), name='index'),
    ...
]

Previous11.0.常见问题 Next3.3.orm介绍与model设计

Last updated 5 years ago

hashtag生成应用

hashtag模板

hashtag编写模板文件

hashtag配置模板位置

hashtag静态文件

hashtag编写css文件

hashtag配置静态文件位置

hashtag配置数据库

hashtag配置数据库信息

hashtag生成数据表

hashtag配置url

hashtag先编写views，再配置url

hashtag编写views

hashtag配置url

hashtag不创建views，直接配置url

生成应用

模板

编写模板文件

配置模板位置

静态文件

编写css文件

配置静态文件位置

配置数据库

配置数据库信息

生成数据表

配置url

先编写views，再配置url

编写views

配置url

不创建views，直接配置url