django初識(以django4.2.11為例)

台友涛發表於2024-03-12
Django

django的url路徑,不是透過註解去實現的,而是在urls.py中去配置的

格式為urlname/,是預設,的路徑http://127.0.0.1:8000/對應path("",views.home)而不是path("/",views.home),如下圖

django初識(以django4.2.11為例)

其中對應的函式為,views.py的函式

比如path("/login",views.login)對應views.py中的login函式,如下圖:

django初識(以django4.2.11為例)

html和flask差不多

注意,表單項必須加{% csrf_token %},必須加,用於校驗,防止跨站攻擊

<!--該介面由bootstrap3.4的css樣式的表單為主體修改而來-->

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的登入頁面</title>

    <!--flask專案中引入的css檔案的(flask專案的css檔案的路徑為在static目錄下)-->
    <link rel="stylesheet"
        href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <style>
    .account{
        /*寬度和高度*/
        width: 500px;
        /*邊框*/
        border: 1px solid rgb(102, 97, 97);
        /*左右居中*/
        margin-left: auto;
        margin-right: auto;
        /*上邊距*/
        margin-top: 100px;
        /*內邊距*/
        padding: 20px 40px;
        /*陰影 水平方向 垂直方向 模糊距離*/
        box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
    }
    .account h3{
        /*文字居中*/
        text-align: center;
        /*加粗*/
        font-weight: bold;
    }
    #error{
        color: red;
        margin: 10px

    }
    #great{
        color: rgb(0, 255, 0);
        margin: 10px

    }
    
    
</style>
</head>
<body>
    <div class="account">
        <!--form表單-->
        <form action="/login/" method="post" onsubmit="return validateForm2()">
            {% csrf_token %}<!--用於校驗,防止跨站攻擊,必須加-->

            <h3>使用者登入</h3>
            <!-- 使用者名稱輸入框 -->
            <div class="form-group">
                <label>使用者名稱</label>
                <input class="form-control" id="Username"
                       placeholder="請輸入使用者名稱/手機號" name="username">
            </div>
            
            <!-- 密碼輸入框 -->
            <div class="form-group">
                <label>密碼</label>
                <input type="password" class="form-control"
                       id="Password" placeholder="請輸入密碼"
                       name="password">
            </div>
    
            <!-- 協議及同意核取方塊 -->
            <div class="checkbox">
                <a href="/使用者協議/">《某某協議》</a>
                <label>
                    <input type="checkbox" name="agree" id="agreementCheckbox">我已詳細閱讀此協議
                </label>
            </div>
            <div id="error">{{msg}}</div>
            <div id="great">{{msg2}}</div>
            <!-- 提交按鈕 -->
            <button type="submit" class="btn btn-primary">登 錄</button>
        </form>
        <!--註冊頁面-->
        <a href="/register/">去註冊</a>
    </div>
    
    <script>
    function validateForm2() {
        // 驗證使用者名稱和密碼是否為空
        var username = document.getElementById("Username").value;
        var password = document.getElementById("Password").value;
        var error = document.getElementById("error");
        

    
        if (!username || !password) {
            error.innerHTML = "使用者名稱和密碼不能為空";
            return false;
        }
    
        // 驗證是否同意協議
        var agreeCheckbox = document.getElementById("agreementCheckbox");
        if (!agreeCheckbox.checked) {//沒有勾選"我已詳細閱讀此協議"
        error.innerHTML = '請先同意使用者協議';
            return false;
        }
    
        // 透過所有驗證，允許提交表單
        return true;
    }
    
    function validateForm() {
        // 驗證使用者名稱和密碼是否為空
        var username = document.getElementById("Username").value;
        var password = document.getElementById("Password").value;
        
    
        if (!username || !password) {
            alert('使用者名稱和密碼不能為空');
            return false;
        }
    
        // 驗證是否同意協議
        var agreeCheckbox = document.getElementById("agreementCheckbox");
        if (!agreeCheckbox.checked) {//沒有勾選"我已詳細閱讀此協議"
            alert('請先同意使用者協議');
            return false;
        }
    
        // 透過所有驗證，允許提交表單
        return true;
    }
    </script>
</body>
</html>

相關文章