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的方式,获取文件信息

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

~~以上~~

原文地址:https://www.cnblogs.com/chen170615/p/9869697.html

时间: 2024-10-10 15:19:53

5、第十 - WEB开发进阶 - Django静态文件应用的相关文章

Django静态文件的处理

一.Django中setting.py对静态文件的设置 在setting.py文件中对静态文件的设置主要有: INSTALLED_APPS = ( .... .... 'django.contrib.staticfiles', .... ) STATIC_ROOT = '' STATIC_URL = '/static/' STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.c

Django静态文件输出

一直很纠结的一个问题,网络上也有很多方案,但总感觉不完美. 之前的方案 1 .  在setting.py中     STATIC_ROOT = 'static/'     STATIC_URL = 'static/'      2.  在模板页面中     <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.css">     <script type="text/java

Django静态文件配置、request方法、ORM简介、字段的增删改查

app的创建注意事项: 在Django新创建的app要在seetings.py中添加注册,才会生效 创建app:django-adminapp an startapp app名称 或者 python3 mansge.py startpp名称 手动创建的app不会自带存放html的templates文件夹,需要手动创建 Django静态文件配置 对于前端已经写好了的文件,我们只是拿过来使用,那么这些文件都可以称之为"静态文件"; 静态文件可以是:boostrap一类的前端框架,已经写好了

给大家分享web开发新手修改hosts文件实现本地域名访问的正确方法

1.如何正确修改hosts文件: 一般打开hosts文件里面都会有个示例,按照其格式修改即可 比如以下内容: # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host 即代表打开rhino.acme.com这个网址将解析到102.54.94.97,ip地址与网址间至少有一空格,当然建议通过按Table键来编辑,即美观又不容易编写失误;这也就是通过解

Web的形式发布静态文件

Web的形式发布静态文件 虽然ASP.NET Core是一款"动态"的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件.CSS样式文件和图片文件的请求.针对不同格式的静态文件请求的处理,ASP.NET Core为我们提供了三个中间件,它们将是本系列文章论述的重点.不过在针对对它们展开介绍之前,我们照理通过一些简单的实例来体验一下如何在一个ASP.NET Core应用中发布静态文件.[本文已经同步到<ASP.NET Co

Django静态文件static的配置

Django静态文件static的配置 static文件夹的作用 ? static文件夹一般用于存放css,js,图片等静态文件 配置方式 ? 1.创建static文件夹 ? 2.在settings.py文件中新建一项(如果有则无需新建) STATIC_URL = '/static/' ? 3.在settings.py文件中新建一项 STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] ? 4.引用静态文件中的文件 ? 列如引用一个cs

55 Django静态文件配置

一.Django静态文件配置 1.项目文件夹,新建一个文件夹statics 文件夹 2.在配置文件settings.py中,配置: 文件中有第句: STATIC_URL = '/static/'#静态文件物理地址的别名 在上一句文件中下加一句: 在上一句文件中下加一句: STATICFILES_DIRS=[ os.path.join(BASE_DIR,"statics")] #静态文件的物理地址 3.把静态文件放在statics 文件夹中 4.html文件在引用静态文件时: <s

移动端web开发进阶

三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="appl

移动端web开发进阶(转载)

三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="appl