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

已于 2023-10-04 12:51:35 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： Django入门 文章标签： django python 后端
于 2023-10-03 21:01:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiaidaidai/article/details/132644175
版权

模板的继承

新建layout.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="nav-header">
                <button type="button" class="navbar-toggle collapse" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar">Toggle navigation</span>
                    <span class="icon-bar">Toggle navigation</span>
                    <span class="icon-bar">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#">联通用户管理系统</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/list">部门管理</a></li>
                    <li><a href="#">Link</a></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">shanshan<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>

    <srcipt src="{% static 'js/jquery-3.6.0.min.js' %}"></srcipt>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
</html>

index.html

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

{% extends 'layout.html' %}

{% block content %}
    <h1>首页</h1>
{% endblock %}

depart_list.html：

{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/depart/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                部门列表
            </div>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.title }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                            <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

depart_add.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 %}
                    <div class="form-group">
                        <label>标题</label>
                        <input type="text" class="form-control" placeholder="标题" name="title">
                    </div>

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

depart_edit.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 %}
                    <div class="form-group">
                        <label>标题</label>
                        <input type="text" class="form-control" placeholder="标题" name="title" value="{{ row_object.title }}">
                    </div>

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

用户列表：

增加urls.py

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

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

def user_list(request):
    queryset = models.UserInfo.objects.all()
    '''
    使用python语法直接获取想要的数据
    for obj in queryset:
        print(obj.name, obj.create_time.strftime("%Y-%m-%d-%H-%M"), obj.get_gender_display(), obj.depart.title)
    '''
    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（模板语法中的日期格式化）

{% 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">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                用户列表
            </div>
            <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 queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.password }}</td>
                        <td>{{ obj.age }}</td>
                        <td>{{ obj.account }}</td>
                        <td>{{ obj.create_time|date:"Y-m-d" }}</td>
                        <td>{{ obj.get_gender_display }}</td>
                        <td>{{ obj.depart.title }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="#">编辑</a>
                            <a class="btn btn-danger btn-xs" href="#">删除</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

测试

鸡鸭扣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Django框架下静态模板的继承操作示例
09-18
主要介绍了Django框架下静态模板的继承操作,结合实例形式分析了Django框架模板继承操作的相关原理与操作注意事项,需要的朋友可以参考下
Django继承自带user表并重写的例子
09-18
今天小编就为大家分享一篇Django继承自带user表并重写的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Django模板继承 extend标签实例代码详解
10-16
主要介绍了Django模板继承 extend标签实例代码，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Python Django 母版和继承解析
09-18
主要介绍了Python Django 母版和继承解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django项目框架搭建，快速入门Django
大河之犬的博客
10-11 3459
命令，Django会重新生成一个新的数据库迁移文件，记录表结构之间的差异，命令规则是对上一个迁移文件的序列号加1，如0002_xxxx、0003_xxxx。freeze会列出当前的虚拟环境中安装的依赖包及其版本号，它的输出格式与requirements.txt文件内容格式完全一样，所以，可以将其输出进行重定向，得到依赖清单。标识对于时区的处理，如果设置为True，不论TIME_ZONE设置的是什么，存储到数据库中的时间都是UTC时间。这个变量标记的是当前项目的根URL配置，是Django路由系统的入口点。
django项目初始化：扩展django自带的用户表，继承django自带的用户表
weixin_46371752的博客
05-01 1453
如何继承django自带的auth表,继承django自带的用户表,如何设置django自带的用户表,如何设置django自带的auth表,
python web框架 flask基础入门教程
最新发布
weixin_43327597的博客
11-06 514
{% block content %} {% endblock %}之间的内容会被补充道layout.html网页里，补充的地方就在。只需要在app.run()的时候传入host=‘0.0.0.0’，那么你搭建的网站，链接局域网的就都可以访问了。注意过滤器其实非常非常重要，他的作用性很大，可以帮助我们处理各种各样的字符，数字等转换。对应的{% block content %} {% endblock %}之间。通过上面方法程序，我们就可以实现这样的结果。刚才输入的数据就会被导入数据库。
【Django 网页Web开发】06. 模板继承的主题导航栏案例 高效开发 便捷维护（保姆级图文）
MZH
06-16 798
【Django 网页Web开发】06. 模板继承的主题导航栏案例 高效开发 便捷维护（保姆级图文）
Django 之 模板继承 及 函数应用
Mr.刘_博客小站
12-22 372
模板继承 一个网站由很多html页面组成，通常大部分html页面都有公共的布局如 导航栏，侧边栏，页面底部等。这些公共部分可以单独抽离出来的模板称为母版，给所有的html页面继承，继承母版的模板称为子板，这样使页面容易修改且更加简洁。 一个html页面只能继承一个母版，通常母版的内容比子板的内容要多
模板的继承
douyunqian668的博客
10-24 436
母版：定义一个html为标准，别的模板继承它 ：如下： {% extends "layout.html" %} {% block body%}                                                                 用户名                             端口号
Django模板导入母版继承和自定义返回Html片段过程解析
09-18
主要介绍了Django模板导入母版继承和自定义返回Html片段过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django之使用haystack+whoosh实现搜索功能
09-18
在Django中实现搜索功能，我们常常会借助于全文检索框架，本文主要讲解如何使用Django结合haystack和whoosh库来实现这一功能。haystack是一个高级搜索接口，它允许开发者选择不同的搜索引擎（如Elasticsearch、Solr...
Django之模板层的实现代码
09-18
此外，Django支持模板继承、模板标签和模板过滤器，这些都是构建动态网站时的重要工具。 总结来说，Django的模板层是一个强大的工具，它允许开发者和设计师各自专注于他们的专业领域，提高了开发效率和代码质量。...
Django教程
qq_27104997的博客
11-18 1753
django 基础教程
Django基础4——模板系统
百慕卿君博客
08-25 1026
1、变量概念，全局变量用法。 2、if语句、for语句。 3、内置过滤器、自定义过滤器。 4、模板继承、模板导入、引用静态文件。
django -- 母版继承
weixin_30709061的博客
07-14 123
csrf_token 在之前我们提交post请求的时候，都是在setting.py文件里注释掉了'django.middleware.csrf.CsrfViewMiddleware'这一行，这是因为form表单提交数据时，Django防止恶意者进行攻击，出于安全的考虑，试想一下，你自己写的django后台，别人写了一个页面，action里地址写的是你的服务器的地址，如果这个人写的代码是攻击你...
Flask 学习笔记 --12
丰伟磊的博客
07-31 331
add articles;
Django基础入门⑦：Django模板继承
weixin_50804299的博客
06-22 9182
本节介绍了模板继承的使用，以及它的优势，Django 官网建议，在父模板中应尽量多的使用 {% block %} 标签，这样可以给我们更多的选择空间。block 标签需要成对出现，使用 {{ endblock }} 作为结束标签；定义 block 标签名字，子模板中具有同样名称的 block 块完成对父模板的替换；子模板不需要定义父模板中的所有 block，未定义时，子模板将原样使用父模板中的内容；
django+MySQL+vue+html实现用户登陆注册
05-17
实现用户登陆注册需要以下步骤： 1. 安装 Django 和 MySQL 数据库，并创建一个 Django 项目。 2. 配置 MySQL 数据库信息，在 Django 项目的 settings.py 文件中设置 DATABASES。 3. 创建一个 Django 应用，在应用中定义用户模型，并在 settings.py 文件中设置 AUTH_USER_MODEL。 4. 在应用中创建视图函数和 URL，用于处理用户注册和登陆请求。 5. 使用 Vue 和 HTML 实现用户注册和登陆页面，并通过 Ajax 请求与 Django 后端交互。 下面是具体的实现步骤： 1. 安装 Django 和 MySQL 数据库，并创建一个 Django 项目。 假设你已经安装好了 Django 和 MySQL 数据库，并创建了一个名为 myproject 的 Django 项目。 2. 配置 MySQL 数据库信息，在 Django 项目的 settings.py 文件中设置 DATABASES。 打开 myproject/settings.py 文件，找到 DATABASES 配置项，将其配置为： ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'mydatabase', 'USER': 'mydatabaseuser', 'PASSWORD': 'mypassword', 'HOST': 'localhost', 'PORT': '3306', } } ``` 其中，'NAME'、'USER'、'PASSWORD'、'HOST'、'PORT' 分别为你的 MySQL 数据库的名称、用户名、密码、主机地址和端口号。 3. 创建一个 Django 应用，在应用中定义用户模型，并在 settings.py 文件中设置 AUTH_USER_MODEL。 打开终端，进入到 myproject 目录下，执行以下命令创建一个名为 accounts 的 Django 应用： ```bash python manage.py startapp accounts ``` 打开 accounts/models.py 文件，定义用户模型： ```python from django.contrib.auth.models import AbstractUser class User(AbstractUser): pass ``` 这里使用 Django 内置的 AbstractUser 模型，继承它并添加一些额外的字段和方法。 打开 myproject/settings.py 文件，将 AUTH_USER_MODEL 设置为 accounts.User： ```python AUTH_USER_MODEL = 'accounts.User' ``` 这样就成功定义了一个用户模型，并且将其作为认证系统的用户模型。 4. 在应用中创建视图函数和 URL，用于处理用户注册和登陆请求。 打开 accounts/views.py 文件，定义用户注册和登陆的视图函数： ```python from django.shortcuts import render from django.contrib.auth import authenticate, login from django.contrib.auth.decorators import login_required from django.http import JsonResponse from .forms import RegistrationForm, LoginForm def registration(request): if request.method == 'POST': form = RegistrationForm(request.POST) if form.is_valid(): form.save() return JsonResponse({'success': True}) else: return JsonResponse({'success': False, 'errors': form.errors}) else: form = RegistrationForm() return render(request, 'registration.html', {'form': form}) def user_login(request): if request.method == 'POST': form = LoginForm(request.POST) if form.is_valid(): username = form.cleaned_data['username'] password = form.cleaned_data['password'] user = authenticate(request, username=username, password=password) if user is not None: login(request, user) return JsonResponse({'success': True}) else: return JsonResponse({'success': False, 'errors': {'__all__': ['Invalid login credentials']}}) else: return JsonResponse({'success': False, 'errors': form.errors}) else: form = LoginForm() return render(request, 'login.html', {'form': form}) @login_required def home(request): return render(request, 'home.html') ``` 这里使用了 Django 内置的认证系统，authenticate 和 login 函数分别用于验证用户和登录用户。 接下来，打开 accounts/forms.py 文件，定义用户注册和登陆表单： ```python from django import forms from django.contrib.auth.forms import UserCreationForm, AuthenticationForm from django.core.exceptions import ValidationError from django.utils.translation import gettext_lazy as _ from .models import User class RegistrationForm(UserCreationForm): email = forms.EmailField(required=True) class Meta: model = User fields = ('username', 'email', 'password1', 'password2') def clean_email(self): email = self.cleaned_data.get('email') if User.objects.filter(email=email).exists(): raise ValidationError(_('Email already exists')) return email class LoginForm(AuthenticationForm): class Meta: model = User fields = ('username', 'password') ``` 这里使用了 Django 内置的表单类 UserCreationForm 和 AuthenticationForm，分别用于用户注册和用户登陆。 最后，打开 accounts/urls.py 文件，定义 URL 路由： ```python from django.urls import path from . import views app_name = 'accounts' urlpatterns = [ path('register/', views.registration, name='registration'), path('login/', views.user_login, name='login'), path('home/', views.home, name='home'), ] ``` 这里定义了三个 URL 路由，分别用于用户注册、用户登陆和用户主页。 5. 使用 Vue 和 HTML 实现用户注册和登陆页面，并通过 Ajax 请求与 Django 后端交互。 打开 templates/registration.html 文件，定义用户注册页面： ```html {% extends 'base.html' %} {% block content %} <h2>Register</h2> <form id="registration-form"> {% csrf_token %} <div class="form-group"> <label>Username:</label> {{ form.username }} </div> <div class="form-group"> <label>Email:</label> {{ form.email }} </div> <div class="form-group"> <label>Password:</label> {{ form.password1 }} </div> <div class="form-group"> <label>Confirm password:</label> {{ form.password2 }} </div> <button type="submit" class="btn btn-primary">Register</button> </form> <div id="registration-errors" class="text-danger"></div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> const registrationForm = document.querySelector('#registration-form'); const registrationErrors = document.querySelector('#registration-errors'); registrationForm.addEventListener('submit', (event) => { event.preventDefault(); const formData = new FormData(registrationForm); axios.post('{% url "accounts:registration" %}', formData) .then(response => { if (response.data.success) { window.location.href = '{% url "accounts:home" %}'; } else { registrationErrors.innerHTML = Object.values(response.data.errors).join('<br>'); } }) .catch(error => { console.error(error); }); }); </script> {% endblock %} ``` 这里使用了 Bootstrap 和 Axios，分别用于样式和 Ajax 请求。当用户提交注册表单时，通过 Axios 发送 POST 请求到后端，如果注册成功，则跳转到用户主页，否则在页面上显示错误信息。 打开 templates/login.html 文件，定义用户登陆页面： ```html {% extends 'base.html' %} {% block content %} <h2>Login</h2> <form id="login-form"> {% csrf_token %} <div class="form-group"> <label>Username:</label> {{ form.username }} </div> <div class="form-group"> <label>Password:</label> {{ form.password }} </div> <button type="submit" class="btn btn-primary">Login</button> </form> <div id="login-errors" class="text-danger"></div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> const loginForm = document.querySelector('#login-form'); const loginErrors = document.querySelector('#login-errors'); loginForm.addEventListener('submit', (event) => { event.preventDefault(); const formData = new FormData(loginForm); axios.post('{% url "accounts:login" %}', formData) .then(response => { if (response.data.success) { window.location.href = '{% url "accounts:home" %}'; } else { loginErrors.innerHTML = Object.values(response.data.errors).join('<br>'); } }) .catch(error => { console.error(error); }); }); </script> {% endblock %} ``` 这里与注册页面类似，通过 Axios 发送 POST 请求到后端，如果登陆成功，则跳转到用户主页，否则在页面上显示错误信息。 打开 templates/home.html 文件，定义用户主页： ```html {% extends 'base.html' %} {% block content %} <h2>Welcome, {{ request.user.username }}!</h2> <p>You are logged in.</p> {% endblock %} ``` 这里只是简单地显示一些欢迎信息。 最后，打开 templates/base.html 文件，定义网站的基础模板： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}My Website{% endblock %}</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> {% if request.user.is_authenticated %} <li class="nav-item active"> <a class="nav-link" href="{% url "accounts:home" %}">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="{% url "logout" %}">Logout</a> </li> {% else %} <li class="nav-item"> <a class="nav-link" href="{% url "accounts:registration" %}">Register</a> </li> <li class="nav-item"> <a class="nav-link" href="{% url "accounts:login" %}">Login</a> </li> {% endif %} </ul> </div> </nav> <div class="container mt-4"> {% block content %}{% endblock %} </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </body> </html> ``` 这里使用了 Bootstrap 的导航条和响应式布局，根据用户是否已经登录来显示不同的导航链接。 至此，一个简单的 Django+MySQL+Vue+HTML 实现用户登陆注册的 web 应用就完成了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鸡鸭扣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值