第13章節-Python3.5-Django實現使用者登入212

阿啦卜發表於2018-07-21
PythonDjango

  • 讓很多app都共享的靜態檔案, 建立一個static目錄專門放靜態檔案:

    image.png

  • 把jquery.min.js複製到static目錄下再建立 commons.css 檔案(目錄如下):

    image.png
image.png
  • commons.css程式碼如下:
body{
    background: gray;
}

  • 然後想把它引用到login.html方法:

image.png
  • 修改settings.py 檔案在最後一行修改新增以下程式碼:
STATIC_URL = `/static/`

# os.path.join(BASE_DIR, `static`), 的逗號很重要,不加會報錯
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, `static`),
)
image.png

  • 修改login.html:

    image.png

    image.png

  • login.html 程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/commons.css">
    <style>
        label{
            width:80px;
            text-align: right;
            display:inline-block;
        }
    </style>
</head>
<body>
    <!--/* action="/login/" 指向urls.py 的login,以post方式提交表單 */-->
    <from action="/login" method="post">
        <p>
            <label for="username">使用者名稱: </label>
            <input id="username" type="text" />
        </p>
        <p>
            <label for="password">密碼: </label>
            <input id="password" type="text" />
            <input type="submit" value="提交" />
        </p>
    </from>
    <script src="/static/jquery.min.js"></script>

</body>
</html>

  • 執行django檔案效果圖:

    image.png

  • 知識點:

1、配置模板的路徑
    
        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`,
                        ],
                    },
                },
            ]
    2、配置靜態目錄
        static
    
        STATICFILES_DIRS = (
            os.path.join(BASE_DIR, `static`),
        )

        
        <link rel="stylesheet" href="/static/commons.css" />


相關文章