【银角大王——Django课程——用户表的基本操作】

Django课程——用户表的基本操作

    • 模板的继承
    • 用户管理
      • 用户列表展示
      • 新建用户
        • Django组件
          • 原始方法【麻烦,太原始】
          • form组件
          • modelform组件
        • 使用modelsform组件编写添加页面

模板的继承

(1)先写一个页面模板————这个案例中的模板基本上就是一个导航栏,然后就是链接的框架导入——占位符可以用在任何需要的地方
代码:


{% load static %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    为啥只能使用这种引用,好无语,配置文件中应该咋改嘞-->
<!--    <link rel="stylesheet" type="text/css" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">-->
<!--    <link rel="stylesheet" type="text/css" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">-->
<!--    去除圆角样式-->
<!--    <style>-->
<!--        .navbar{ -->
<!--        border-radius:0;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css'%}">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">联通用户管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">


        <li><a href="/depart/list/">部门管理 </a></li>
        <li><a href="/user/list/">用户管理 </a></li>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>

        <li class="dropdown " >
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">庞恬 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="#">个人资料</a></li>
                  <li><a href="#">我的信息</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">注销</a></li>
              </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

<div>


     {% block content %}{% endblock %}



</div>





<!--这个不知道会不会有效哦-->
    <script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script>



</body>
</html>

在这里插入图片描述

(2)继承模板,并完整添加占位符的内容

代码:


{% load static %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    为啥只能使用这种引用,好无语,配置文件中应该咋改嘞-->
<!--    <link rel="stylesheet" type="text/css" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">-->
<!--    <link rel="stylesheet" type="text/css" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">-->
<!--    去除圆角样式-->
<!--    <style>-->
<!--        .navbar{ -->
<!--        border-radius:0;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css'%}">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">联通用户管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">


        <li><a href="/depart/list/">部门管理 </a></li>
        <li><a href="/user/list/">用户管理 </a></li>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>

        <li class="dropdown " >
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">庞恬 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="#">个人资料</a></li>
                  <li><a href="#">我的信息</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">注销</a></li>
              </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

<div>


     {% block content %}{% endblock %}



</div>





<!--这个不知道会不会有效哦-->
    <script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script>



</body>
</html>

在这里插入图片描述

用户管理

用户列表展示

(1)在urls中编写
在这里插入图片描述
代码:

urlpatterns = [

    #用户管理
    path('user/list/', views.user_list),


]

(2)在views.py中编写函数
在这里插入图片描述

#用户管理
#用户列表显示
def user_list(request):
    #获取所有用户列表
    query_set=models.UseInfo.objects.all();

    #循环遍历
    #for obj in query_set:
        #strftime("%Y-%m-%d")取时间显示函数
        #get_列名_display()————————找这种性别类型,已经用元组定义了的,choices
        #所属部门——外键连接,显示方法
        #obj.depart_id 数据库中原始的数据
        #关联系跨表——取外键对应值——对象
        #obj.depart.title
        #原始方法拿
        #
        #xx=models.Department.objects.filter(id=obj.depart_id).first()
        #xx.title
       # print(obj.id,obj.name,obj.account,obj.from_time.strftime("%Y-%m-%d"),obj.get_gender_display(),obj.depart.title)


    return render(request,'user_list.html',{"query_set":query_set})

(3)继承了模板的用户列表

{% extends 'layout.html' %}

{% block content %}
 <div class="container">
      <div style="margin-bottom: 10px">
<!--        新建部门按钮-->
            <a class="btn btn-success" href="#" >
              <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
              新建用户
            </a>

      </div>


    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        用户列表
      </div>
      <div class="panel-body">
        <p>欢迎进入到用户管理页面,请安全操作!</p>
      </div>

      <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>密码</th>
              <th>年龄</th>
              <th>账户余额</th>
              <th>入职时间</th>
              <th>所属部门</th>
              <th>性别</th>
              <th>操作</th>
          </tr>
        </thead>
        <tbody>
<!--        数据库部门列表循环-->
          {% for obj in query_set %}
          <tr>
              <td>{{obj.id}}</td>
              <td>{{obj.name}}</td>
              <td>{{obj.password}}</td>
              <td>{{obj.age}}</td>
              <td>{{obj.account}}</td>
              <td>{{obj.from_time|date:"Y-m-d"}}</td>
              <td>{{obj.depart.title}}</td>
              <td>{{obj.get_gender_display}}</td>
              <td>
<!--                Django框架中传递参数的正则表达式-->
              <a class="btn btn-primary btn-xs"  href="#">编辑</a>
<!--                通过get请求传递参数跳转页面-->
              <a class="btn btn-danger btn-xs" href="#" >删除</a>
              </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>



  </div>



{% endblock%}

(4)入职时间,性别,部门外键的用法,看代码的时候要发现——在函数中和在页面渲染中的方法不一样。

  1. 入职时间:
obj.from_time.strftime("%Y-%m-%d")
<td>{{obj.from_time|date:"Y-m-d"}}</td>
  1. 性别:
    在表结构中的定义
    在这里插入图片描述
obj.get_gender_display()
<td>{{obj.get_gender_display}}</td>
  1. 部门属性——它是一个外键:在框架中生成的表名称将自动加一个id,表示这是与其他表连接的
    在这里插入图片描述
depart=models.ForeignKey(to="Department",to_field="id",on_delete=models.CASCADE)
<td>{{obj.depart.title}}</td>

效果图:
在这里插入图片描述

新建用户

Django组件
原始方法【麻烦,太原始】
form组件

用法:(此代码只是用来展示用法——不可直接复制)
在views中定义一个类:该类封装所有的属性——实例化后来使用

#views.py文件
class MyForm(Form):
	user=forms.CharField(widget=formsInput)
	pwd=forms.CharField(widget=formsInput)
	email=forms.CharField(widget=formsInput)
	....

def user_add(request):
	if request.method=="GET":
		#直接实例化,然后再HTML中去使用
		form=MyForm()
		return render(request,'user_add.html',{'form':form})
		
<!--html文件-->
<form method='post'>
<!--不用在像以前一样,写input框,直接封装为特定的框-->
<!--{{form.user}}-->
<!--{{form.pwd}}-->
<!--也可以直接循环form来简洁代码-->
{% for field in form %}
	{{field}}
{% endfor %}
</form>

modelform组件

用法:它是基于models.py文件来的
也就是基于表
在这里插入图片描述

#views.py文件
class MyForm(ModelForm):
	#可在自定义
	xx=form.CharField...("...")
	class Meta:
		model=UserInfo
		fields=["name","password","age","xx".....]
def user_add(request):
	if request.method=="GET":
		#直接实例化,然后再HTML中去使用
		form=MyForm()
		return render(request,'user_add.html',{'form':form})
<!--html文件-->
<form method='post'>
<!--不用在像以前一样,写input框,直接封装为特定的框-->
<!--{{form.user}}-->
<!--{{form.pwd}}-->
<!--也可以直接循环form来简洁代码-->
{% for field in form %}
	{{field}}
{% endfor %}
</form>

使用modelsform组件编写添加页面

原始方法的缺点:

  1. 用户提交数据没有校验
  2. 页面上没有响应的提示错误
  3. 页面上的字段需要我们都写一遍,太重复
  4. 关联的数据,手动去获取并要循环展示在页面上

(1)在urls.py中编写
在这里插入图片描述
代码如下:

urlpatterns = [
    path('user/model/form/add/',views.user_model_form_add),
]

(2)在view.py编写
在这里插入图片描述
代码如下:

#############################################modelForm实例####################################################
#modelForm实例
from django import forms

class UserModelForm(forms.ModelForm):
    class Meta:
        model = models.UseInfo
        fields = ["name","password","age","account","from_time","depart","gender"]
        # widgets={
        #     "name":forms.TextInput(attrs={"class":"form-control"}),
        #     "password": forms.PasswordInput(attrs={"class": "form-control"}),
        #
        #
        # }
    def __init__(self,*args,**kwargs):
        super().__init__(*args ,**kwargs)
        #循环找到所有插件,添加了class=“form-control”样式
        for name ,field in self.fields.items():
            # print(name,field)
            #某一项去除样式
            # if name=="password":
            #     continue
            field.widget.attrs = {"class":"form-control","placeholder":field.label}

(3)在HTML中编写
在这里插入图片描述
代码如下:

{% extends 'layout.html' %}



{% block content %}

        <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"> 新建用户 </h3>
            </div>
            <div class="panel-body">
                <form method="post">
<!--                    隐含参数-->
                      {% csrf_token %}
                      {% for field in form %}
                              <div class="form-group">
                                <label >{{ field.label }}</label>
                                  {{ field }}
        <!--                        <input type="text" class="form-control"  placeholder="标题" name="user">-->
                              </div>
                      {% endfor %}

                      <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>


{% endblock %}

<!-- <form method="post">-->
<!--   {% csrf_token %}-->
<!--&lt;!&ndash;     label通过表中中文命名连接(verbose_name='姓名')&ndash;&gt;-->
<!--     {% for field in form %}-->

<!--            {{ field.label}}:{{field}}-->

<!--     {% endfor %}-->



<!--&lt;!&ndash;   {{form.name.label}}:{{form.name}}&ndash;&gt;-->
<!--&lt;!&ndash;   {{form.password.label}}:{{form.password}}&ndash;&gt;-->
<!--&lt;!&ndash;   {{form.age.label}}:{{form.age}}&ndash;&gt;-->



<!-- </form>-->

(4)widgets.py源码
在这里插入图片描述
(5)数据校验
【单独补!!!!!!!】

(6)最终页面
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/590143.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无言:破局之道:顿悟+坚持——早读(逆天打工人爬取热门微信文章解读)

致无言 引言Python 代码第一篇 洞见 7年跟踪调查北京28个精英家庭&#xff1a;为什么顶尖大学孩子大多来自有钱家庭&#xff1f;第二篇 人民日报 来了&#xff01;新闻早班车要闻社会政策 结尾 控制你的情绪 否则它将控制你 在紧张的游戏中 控制情绪 避免冲动行为 是每个玩家的…

学习java的继承

1.什么是继承 java中提供了一个关键字&#xff0c;extends&#xff0c;可以让一个类与另一个类建立起父子关系。 例如 public class B extends A { --- } 在这里&#xff0c;我们称A类为父类&#xff08;也被称为基类或者超类&#xff09;B类称为子类&#xff08;或者是派生…

IDEA 申请学生许可证

如果你有学生账号&#xff0c;并且账号是 EDU 结尾的&#xff0c;可以申请 IDEA 的学生许可证。 有效期一年&#xff0c;完全免费。 在界面上输入邮件地址&#xff0c;然后单击按钮提交。 邮件中单击链接 JetBrains 会把一个带有链接的邮件发送到你的邮箱中。 单击邮箱中的…

【CTF MISC】XCTF GFSJ0512 give_you_flag Writeup(图像处理+QR Code识别)

give_you_flag 菜狗找到了文件中的彩蛋很开心&#xff0c;给菜猫发了个表情包 解法 图片的最后一帧好像闪过了什么东西。 用 Photoshop 打开&#xff0c;检查时间轴。 找到一张二维码&#xff0c;但是缺了三个角&#xff08;定位图案&#xff09;&#xff0c;无法识别。 找一…

C语言----贪吃蛇(补充)

各位看官好&#xff0c;我想大家应该已经看过鄙人的上一篇博客贪吃蛇了吧。鄙人在上一篇博客中只是着重的写了贪吃蛇的实现代码&#xff0c;但是前期的一些知识还没有具体的介绍&#xff0c;比如确认光标位置&#xff0c;句柄等。那么我这一篇博客就来补充上一篇博客所留下来的…

使用 Wireshark 实现 ARP 嗅探监听网络

前言 Wireshark是一个开源的网络协议分析工具&#xff0c;用于捕获和分析网络数据包。它可以在多个操作系统上运行&#xff0c;并提供了强大的功能和用户友好的界面。 通过Wireshark&#xff0c;用户可以捕获网络流量&#xff0c;并对其进行深入的分析。它支持多种协议的解析…

计算机网络-408考研

后续更新发布在B站账号&#xff1a;谭同学很nice http://【计算机408备考-什么是计算机网络&#xff0c;有什么特点&#xff1f;】 https://www.bilibili.com/video/BV1qZ421J7As/?share_sourcecopy_web&vd_source58c2a80f8de74ae56281305624c60b13http://【计算机408备考…

一文读懂Mysql数据库索引原理

MyISAM 存储引擎索引实现&#xff1a; MyISAM 索引文件&#xff08;磁盘上表对应.MYI&#xff09;和数据文件&#xff08;MYD&#xff09;是分离的&#xff08;非聚集&#xff09; InnoDB 存储引擎索引实现&#xff1a; InnoDB 索引实现&#xff08;聚集&#xff09; 表数据文…

Bert基础(二十)--Bert实战:机器阅读理解任务

一、机器阅读理解任务 1.1 概念理解 机器阅读理解&#xff08;Machine Reading Comprehension, MRC&#xff09;就是给定一篇文章&#xff0c;以及基于文章的一个问题&#xff0c;让机器在阅读文章后对问题进行作答。 在机器阅读理解领域&#xff0c;模型的核心能力体现在对…

【Cpp】类和对象#拷贝构造 赋值重载

标题&#xff1a;【Cpp】类和对象#拷贝构造 赋值重载 水墨不写bug 目录 &#xff08;一&#xff09;拷贝构造 &#xff08;二&#xff09;赋值重载 &#xff08;三&#xff09;浅拷贝与深拷贝 正文开始&#xff1a; &#xff08;一&#xff09;拷贝构造 拷贝构造函数&…

49. 【Android教程】HTTP 使用详解

在你浏览互联网的时候&#xff0c;绝大多数的数据都是通过 HTTP 协议获取到的&#xff0c;也就是说如果你想要实现一个能上网的 App&#xff0c;那么就一定会和 HTTP 打上交道。当然 Android 发展到现在这么多年&#xff0c;已经有很多非常好用&#xff0c;功能非常完善的网络框…

线性神经网络示例

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个线性神经网络模型pytorch程序,最后打印5个条件分别的影响力。 一 在这个场景中&#xff0c;一个线性神经网络&…

ubuntu与redhat的不同之处

华子目录 什么是ubuntu概述 ubuntu版本简介桌面版服务器版 安装部署部署后的设置设置root密码关闭防火墙启用允许root进行ssh登录更改apt源安装所需软件 网络配置Netplan概述配置详解配置文件DHCP静态IP设置设置 软件安装方法apt安装软件作用常用命令配置apt源 deb软件包安装概…

浅拷贝与深拷贝面试问题及回答

1. 浅拷贝和深拷贝的区别是什么&#xff1f; 答&#xff1a; 浅拷贝&#xff08;Shallow Copy&#xff09;仅复制对象的引用而不复制引用的对象本身&#xff0c;因此原始对象和拷贝对象会引用同一个对象。而深拷贝&#xff08;Deep Copy&#xff09;则是对对象内部的所有元素进…

Git客户端(TortoiseGit)使用详解

1.概述 使用TortoiseGit比直接使用git 客户端和命令实现代码版本管理更为方便&#xff0c;本文根据实际使用情况作一些记录&#xff0c;特别是对于解决冲突的处理。 2.Git安装与配置 下载 Git - Downloads&#xff0c; 可参考Git安装步骤完成Git的安装与配置。 3.TortoiseG…

Linux学习之IP协议

前言&#xff1a; 在学习IP协议i前&#xff0c;我们其实知道网络协议栈是一层层的&#xff0c;上层封装好之后就传给下层&#xff0c;对于我们治安学习到的TCP协议&#xff0c;在对数据进行封装之后&#xff0c;并不是直接就将数据进行传输&#xff0c;而是交给下一层网络层进…

【CTF-Crypto】修复RSA证书入门汇总

证书修复 文章目录 证书修复基础知识Truncated 1Truncated 2Jumbled 基础知识 为什么要引入证书&#xff1f; 在正常题目中&#xff0c;大部分直接给出了数字&#xff0c;但是数字在现实世界中传输不稳定&#xff0c;容易在某处出现错误&#xff0c;所以我们将所有的数字信息…

[嵌入式系统-61]:RT-Thread-内核:原子操作的支持, 原子操作与互斥锁的比较

目录 原子操作 1. 原子操作简介 2. 原子操作的优点 3. RT-Thread 原子操作的实现与使用方法 4. RT-Thread 原子操作 API 原子读 原子写 原子数据交换 原子加 原子减 原子异或 原子与 原子或 原子标志检查与置位 原子标志清除 原子比较与交换 5. 综合示例 原子…

有公网IP的好处?

1. 维护远程连接需求的解决方案 公网IP是指可以通过互联网直接访问的IP地址&#xff0c;相对于私有IP地址而言具有重要的好处。公网IP的最大好处之一是解决了各行业客户的远程连接需求。由于天联组网操作简单、跨平台应用、无网络要求以及独创的安全加速方案等原因&#xff0c…

牛客美团2024年春招第一场笔试【技术】解题

1.小美的平衡矩阵 小美拿到了一个n∗n的矩阵&#xff0c;其中每个元素是 0 或者 1。 小美认为一个矩形区域是完美的&#xff0c;当且仅当该区域内 0 的数量恰好等于 1 的数量。 现在&#xff0c;小美希望你回答有多少个i∗i的完美矩形区域。你需要回答1≤i≤n的所有答案 输出…