5第十 - WEB开发进阶 - Django静态文件应用

Posted chen170615

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了5第十 - WEB开发进阶 - Django静态文件应用相关的知识,希望对你有一定的参考价值。

  Web Django 网站通常需要提供其他文件,如图像、javascript或CSS。在Django中,我们将这些文件称为“静态文件”。 Django提供了django.contrib.staticfiles方法来管理。

一、Django中静态文件添加流程

 我们先创建一个,存放静态文件目录:static。目录规划存放在在工程项目下,主要存放的文件CSS、JS、图象文件。如图:

模板文件 login.html 如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/common.css" />
</head>
<body>
    <form action="/login" method="post">
        <p>
            <label for="username">用户名:</label>
            <input id="username" type="text" >
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" type="password">
            <input type="submit" name="提交">
        </p>
    </form>
</body>
</html>

 common.css 样式文件,如下:

label{
      width: 80px;
      text-align: right;
      display: inline-block;
}

 调整settings.py标签,找到STATIC_URL ,添加内容,如下图。要不然,在外面是访问不web页面是加载不了样式出来。具体,可以参考官网:https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = \'/static/\'

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

效果页面保持与上一章中的不变:http://127.0.0.1:8000/login/

二、Django中模拟登录获取POST、GET的参数并进行验证

 Django获取用户提供的方式有两种: GET、POST。触发GET的操作一搬是通过URL访问的形式;触发POST的操作一搬是通过表单验证方式提交。

接着前面讲到的案例django_1工程项目,login.html、common.css、及cmdb的APP中的配置。

使用POST的过程中,Django报错的原因和解决方法:

错误信息:

You called this URL via POST, but the URL doesn\'t end in a slash and you have APPEND_SLASH set. Django can\'t redirect to the slash URL while maintaining POST data. Change your form to point to 127.0.0.1:8009/login/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.

 解决方案:

login.html中定义了"/login":

错误原因是在urls.py中做的映射关系不符合逻辑。修改为:path(r\'login\',views.login)如下:

 

案例:浏览器页面模拟信息提交获取客户端POST的值,并进行验证

Django的框架结构如下:

涉及到的文件配置如下:

template/login.html  

<span style="color: red">{{error_msg}}</span> 用来对客户端用户名、密码输入错误提示。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/common.css" />
</head>
<body>
    <form action="/login" method="post">
        <p>
            <label for="username">用户名:</label>
            <input id="username" name="user" type="text" >
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" name="pwd" type="password">
            <input type="submit" name="提交" />
            <span style="color: red">{{error_msg}}</span>  
        </p>
    </form>
</body>
</html>

 static/common.css  样式文件

label{
      width: 80px;
      text-align: right;
      display: inline-block;
}

 django_1/urls.py 映射文件

from django.contrib import admin
from django.urls import path
from cmdb import views

urlpatterns = [
    path(\'admin/\', admin.site.urls),
    path(r\'html/\',views.Home),
    path(r\'login\',views.login)
]

 django_1/settings.py  配置文件

主要配置位置有:INSTALLED_APPS、MIDDLEWARE、TEMPLATES、静态文件目录,其他位置暂不做更改。

#添加APP项目 ‘cmdb’
INSTALLED_APPS = [
    \'django.contrib.admin\',
    \'django.contrib.auth\',
    \'django.contrib.contenttypes\',
    \'django.contrib.sessions\',
    \'django.contrib.messages\',
    \'django.contrib.staticfiles\',
    \'cmdb\' 
]    


#过滤 Csrf 配置项
MIDDLEWARE = [
    \'django.middleware.security.SecurityMiddleware\',
    \'django.contrib.sessions.middleware.SessionMiddleware\',
    \'django.middleware.common.CommonMiddleware\',
    #\'django.middleware.csrf.CsrfViewMiddleware\',
    \'django.contrib.auth.middleware.AuthenticationMiddleware\',
    \'django.contrib.messages.middleware.MessageMiddleware\',
    \'django.middleware.clickjacking.XFrameOptionsMiddleware\',
]

# 添加模板路径 \'DIRS\': [os.path.join(BASE_DIR,\'templates\')]
TEMPLATES = [
    {
        \'BACKEND\': \'django.template.backends.django.DjangoTemplates\',
        \'DIRS\': [os.path.join(BASE_DIR,\'templates\')],  
        \'APP_DIRS\': True,
        \'OPTIONS\': {
            \'context_processors\': [
                \'django.template.context_processors.debug\',
                \'django.template.context_processors.request\',
                \'django.contrib.auth.context_processors.auth\',
                \'django.contrib.messages.context_processors.messages\',
            ],
        },
    },
]

#静态文件配置
STATIC_URL = \'/static/\'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"), STATIC_URL
]

 app子项目、cmdb/views.py  文件

from django.shortcuts import HttpResponse
from django.shortcuts import render
from django.shortcuts import redirect #重定向的跳转的页面


def login(request):

    error_msg = \'\' #设定全局变量

    if request.method == "POST":
        user = request.POST.get(\'user\',None)
        pwd = request.POST.get(\'pwd\',None)

        if user  == "root" and pwd == "chen1203":
            #匹配成功,进行跳转
            return redirect("http://www.gm99.com")
        else:
            # 匹配错误,提示错误
            error_msg = "用户名或密码错误"
    return render(request,\'login.html\',{\'error_msg\':error_msg})

def Home(request):
    return HttpResponse(\'<h1>CMDB</h1>\')

 

测试访问效果:

http://127.0.0.1:8000/login  URL 访问,GET的方式,获取文件信息

当输入用户名、密码匹对成功后,页面完成跳转。

~~以上~~

 

以上是关于5第十 - WEB开发进阶 - Django静态文件应用的主要内容,如果未能解决你的问题,请参考以下文章

Django---进阶0

Django---进阶0

python--第十八天总结(Django进阶)

python django -5 进阶

Python全栈开发之Django进阶

第十七章:Python の Web开发基础 MVC与Django