首页 > 其他分享 >django初识(以django4.2.11为例)

django初识(以django4.2.11为例)

时间:2024-03-12 16:58:33浏览次数:24  
标签:11 return 为例 views getElementById django4.2 error var document

django的url路径,不是通过注解去实现的,而是在urls.py中去配置的

格式为urlname/,是默认,的路径http://127.0.0.1:8000/对应path("",views.home)而不是path("/",views.home),如下图

其中对应的函数为,views.py的函数

比如path("/login",views.login)对应views.py中的login函数,如下图:

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>

  

 

标签:11,return,为例,views,getElementById,django4.2,error,var,document
From: https://www.cnblogs.com/tytbook/p/18068332

相关文章

  • 2024-03-11 leetcode写题记录
    目录2024-03-11leetcode写题记录206.反转链表题目链接题意解法876.链表的中间结点题目链接题意解法2024-03-11leetcode写题记录206.反转链表题目链接206.反转链表题意给你单链表的头节点head,请你反转链表,并返回反转后的链表。解法链表反转板子题,特殊处理下一个点......
  • 代随想录 第十八天 | ● 513.找树左下角的值 ● 112. 路径总和 113.路径总和ii ● 10
    leetcode:513.找树左下角的值-力扣(LeetCode)思路:是找最深左下角的值,不是找左节点最深的值!!遍历深度,判断最大深度,存储后再与下一个相同深度的比较,先左后右,也就是从左到右的顺序来判断的,所以能找到树下左下角的值classSolution{intmaxdepth=0;intresult=0;......
  • Avalonia 11.1.0-beta1 发布
    11.1.0-beta1Avalonia是dotnet的跨平台UI框架,提供灵活的样式系统,支持Windows、macOS、Linux、iOS、Android和WebAssembly等多种平台。Avalonia已经成熟并已做好生产准备,已被SchneiderElectric、Unity、JetBrains和GitHub等公司使用。 FullChangelog: htt......
  • win11wi-fi图标消失解决方法
    今早我的wi-fi图标没了,我试图解决尝试了以下方法。 1.重启/关机电脑,看是否有用。2.进入到控制面板——计算机管理——服务——WLANAutoConfig,WLANDirect这两个服务,启动类型都设置成自动,并启用它。最后重启电脑看是否有用。!注意【网络和Internet>高级网络设置下有个网络重......
  • 【2024-03-11】提好车了
    20:00手把青秧插满田,低头便见水中天。心地清净方为道,退步原来是向前。                                                 ——《插秧偈》唐·布袋和尚昨天去提了车,整个......
  • 11_外观模式
    外观模式是一种结构型设计模式,它提供了一个统一的接口,用于访问子系统中的一组接口。外观模式通过将客户端与子系统之间的复杂依赖关系解耦,简化了客户端的使用。外观模式有三个主要角色:外观(Facade):提供了一个统一的接口,用于访问子系统中的一组接口。外观封装了子系统的复杂性,简......
  • vivado的使用步骤与仿真详解(LZQ_0311)
    vivado仿真vivado集成了HLS工具,可以直接使用C\C++\systemC语言对Xilinx的FPGA器件进行编程。用户无需手动创建RTL,通过高层次综合生成HDL级的IP核,从而加速IP创建。参考了下面的视频整理出的流程与步骤:vivado视频教程:第一讲:https://www.bilibili.com/video/BV1XU4y1M7n......
  • day20240311周一python学习共100课
    day20240311周一python学习共100课。今天学到了第几课?听懂了吗?今天学10课。学3课,5课。买的好,买的少。父母家境好的家庭,会更轻松。------》第4课:编程语言就是把人的语言,转换成计算机机制能听得懂的语言(二进制语言)。1.写代码2.翻译代码到二进制。 跟着视频操作一遍就......
  • 2024.3.11 软工日报
    今天学习了安卓开发连接数据库的内容,学习时间2小时代码量150  packagecom.example.myapplication;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.ResultSet;publicclassmysqlhelp{publicstaticintgetUserSize(){......
  • 3月11号-完成第一阶段coursera前三期课程
    前三期课程主要包含了互联网发展的历史,从二战英国,波兰对抗德国的密码战所催生的对于计算机的启蒙发明创造,之后计算机从机械结构衍生到电子管结构,中心从欧洲转移到了美国。不得不说,计算机和物理学科以及其他学科紧密相连。无论是二战时构建原始的计算机还是之后美国大学促进互联网......