• 十二、Django之模板的继承+用户列表

    模板的继承

    新建layout.html：

    1. {% load static %}
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    8.     <style>
    9.         .navbar{
    10.             border-radius: 0;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <nav class="navbar navbar-default">
    16.         <div class="container">
    17.             <div class="nav-header">
    18.                 <button type="button" class="navbar-toggle collapse" data-toggle="collapse"
    19.                 data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    20.                     <span class="sr-only">Toggle navigationspan>
    21.                     <span class="icon-bar">Toggle navigationspan>
    22.                     <span class="icon-bar">Toggle navigationspan>
    23.                     <span class="icon-bar">Toggle navigationspan>
    24.                 button>
    25.                 <a class="navbar-brand" href="#">联通用户管理系统a>
    26.             div>
    27.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    28.                 <ul class="nav navbar-nav">
    29.                     <li><a href="/list">部门管理a>li>
    30.                     <li><a href="#">Linka>li>
    31.                 ul>
    32.                 <ul class="nav navbar-nav navbar-right">
    33.                     <li><a href="#">登录a>li>
    34.                     <li class="dropdown">
    35.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
    36.                         aria-expanded="false">shanshan<span class="caret">span>a>
    37.                         <ul class="dropdown-menu">
    38.                             <li><a href="#">个人资料a>li>
    39.                             <li><a href="#">我的信息a>li>
    40.                             <li role="separator" class="divider">li>
    41.                             <li><a href="#">注销a>li>
    42.                         ul>
    43.                     li>
    44.  
    45.                 ul>
    46.             div>
    47.         div>
    48.     nav>
    49.  
    50.     <div>
    51.         {% block content %}{% endblock %}
    52.     div>
    53.  
    54.     <srcipt src="{% static 'js/jquery-3.6.0.min.js' %}">srcipt>
    55.     <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}">script>
    56. body>
    57. html>

    index.html

    简单的demo，用来测试模板继承

    1. {% extends 'layout.html' %}
    2.  
    3. {% block content %}
    4.     <h1>首页h1>
    5. {% endblock %}

    depart_list.html：

    1. {% extends 'layout.html' %}
    2. {% block content %}
    3.     <div class="container">
    4.         <div style="margin-bottom: 10px">
    5.             <a class="btn btn-success" href="/depart/add/">
    6.                 <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">span>
    7.                 新建部门
    8.             a>
    9.         div>
    10.  
    11.         <div class="panel panel-default">
    12.             <div class="panel-heading">
    13.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    14.                 部门列表
    15.             div>
    16.             <table class="table table-bordered">
    17.                 <thead>
    18.                     <tr>
    19.                         <th>IDth>
    20.                         <th>名称th>
    21.                         <th>操作th>
    22.                     tr>
    23.                 thead>
    24.                 <tbody>
    25.                 {% for obj in queryset %}
    26.                     <tr>
    27.                         <th>{{ obj.id }}th>
    28.                         <td>{{ obj.title }}td>
    29.                         <td>
    30.                             <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑a>
    31.                             <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除a>
    32.                         td>
    33.                     tr>
    34.                 {% endfor %}
    35.                 tbody>
    36.             table>
    37.         div>
    38.     div>
    39. {% endblock %}

    depart_add.html：

    1. {% extends 'layout.html' %}
    2. {% block content %}
    3.     <div class="container">
    4.         <div class="panel panel-default">
    5.             <div class="panel-heading">
    6.                 <h3 class="panel-title">新建部门h3>
    7.             div>
    8.             <div class="panel-body">
    9.                 <form method="post">
    10.                     {% csrf_token %}
    11.                     <div class="form-group">
    12.                         <label>标题label>
    13.                         <input type="text" class="form-control" placeholder="标题" name="title">
    14.                     div>
    15.  
    16.                          <button type="submit" class="btn btn-primary">提 交button>
    17.                 form>
    18.             div>
    19.         div>
    20.     div>
    21. {% endblock %}

    depart_edit.html：

    1. {% extends 'layout.html' %}
    2. {% block content %}
    3.     <div class="container">
    4.         <div class="panel panel-default">
    5.             <div class="panel-heading">
    6.                 <h3 class="panel-title">修改部门h3>
    7.             div>
    8.             <div class="panel-body">
    9.                 <form method="post">
    10.                     {% csrf_token %}
    11.                     <div class="form-group">
    12.                         <label>标题label>
    13.                         <input type="text" class="form-control" placeholder="标题" name="title" value="{{ row_object.title }}">
    14.                     div>
    15.  
    16.                      <button type="submit" class="btn btn-primary">提 交button>
    17.                 form>
    18.             div>
    19.         div>
    20.     div>
    21. {% endblock %}

    用户列表：

    增加urls.py

    path("user/list/", views.user_list),

    增加views.py（get_字段_display()）

    1. def user_list(request):
    2.     queryset = models.UserInfo.objects.all()
    3.     '''
    4.     使用python语法直接获取想要的数据
    5.     for obj in queryset:
    6.         print(obj.name, obj.create_time.strftime("%Y-%m-%d-%H-%M"), obj.get_gender_display(), obj.depart.title)
    7.     '''
    8.     return render(request, "user_list.html", {"queryset": queryset})

    关于获得实际的性别字段：

    Django自动封装了一个方法，get_字段_display()，会根据我们在models.py里自定义的元组，
    一般形式为(数据库的值，实际想显示的值)。显示数据库的值实际映射的中文。

    关于获得关联的表的实际部门名称：

    当然可以自己写映射，譬如

    temp = models.Department.objects.filter(id=obj.depart_id).first().title

    但是Django自动封装了类似一个方法，只要我们在models.py里写了

    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE)

    那么他会根据id自动去关联的表中获取那一行数据的depart对象

    新建user_list.html（模板语法中的日期格式化）

    1. {% extends 'layout.html' %}
    2. {% block content %}
    3.     <div class="container">
    4.         <div style="margin-bottom: 10px">
    5.             <a class="btn btn-success" href="#">
    6.                 <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">span>
    7.                 新建用户
    8.             a>
    9.         div>
    10.  
    11.         <div class="panel panel-default">
    12.             <div class="panel-heading">
    13.                 <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    14.                 用户列表
    15.             div>
    16.             <table class="table table-bordered">
    17.                 <thead>
    18.                     <tr>
    19.                         <th>IDth>
    20.                         <th>姓名th>
    21.                         <th>密码th>
    22.                         <th>年龄th>
    23.                         <th>余额th>
    24.                         <th>入职时间th>
    25.                         <th>性别th>
    26.                         <th>所属部门th>
    27.                         <th>操作th>
    28.  
    29.                     tr>
    30.                 thead>
    31.                 <tbody>
    32.                  {% for obj in queryset %}
    33.                     <tr>
    34.                         <th>{{ obj.id }}th>
    35.                         <td>{{ obj.name }}td>
    36.                         <td>{{ obj.password }}td>
    37.                         <td>{{ obj.age }}td>
    38.                         <td>{{ obj.account }}td>
    39.                         <td>{{ obj.create_time|date:"Y-m-d" }}td>
    40.                         <td>{{ obj.get_gender_display }}td>
    41.                         <td>{{ obj.depart.title }}td>
    42.                         <td>
    43.                             <a class="btn btn-primary btn-xs" href="#">编辑a>
    44.                             <a class="btn btn-danger btn-xs" href="#">删除a>
    45.                         td>
    46.                     tr>
    47.                 {% endfor %}
    48.                 tbody>
    49.             table>
    50.         div>
    51.     div>
    52. {% endblock %}

    测试

  • 相关阅读:
    单片机简介（一）
    js 设计模式（灵活的语言 JavaScript）
    WorkPlus Meet视频会议系统，可私有化部署，保障内部数据安全
    Maven 自动化构建
    用Java使用API接口获取Lazada商品详情
    面向OpenHarmony终端的密码安全关键技术
    串口调速小车1
    基于element-plus2.5.10 table组件实现分类table
    【智能优化算法-麻雀搜索算法】基于萤火虫结合麻雀搜索算法求解单目标优化问题附matlab代码
    SSM框架学习——SpringBoot之基础配置
  • 原文地址：https://blog.csdn.net/zhiaidaidai/article/details/132644175