AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Django系统开发（中）

2024-01-25 63
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Django系统开发

Django系统开发（上）：


7.模板的继承


  • 部门列表
  • 添加部门
  • 编辑部门


定义模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    {% block css %}{% endblock %}
</head>
<body>
<h1>标题</h1>
<div>
    {% block content %}{% endblock %}
</div>
<h1>底部</h1>
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>


继承模板

{% extends 'test.html' %}
{% block css %}
  ...
{% endblock %}
{% block content %}
    <h1>首页</h1>
{% endblock%}
{% block js %}
  ...
{% endblock %}


将部门列表，添加部门，编辑部门改造成继承模板


父模板（导航条，CSS，JS）

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.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 class="active"><a href="#">部门管理 <span class="sr-only">(current)</span></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">姓名 <span class="caret"></span></a>
                    <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>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{% block content %}{% endblock %}
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
</body>
</html>


添加部门：

{% extends 'layout.html' %}
{% block content %}
<div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" href="/depart/add">新建部门</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>
</div>
{% endblock %}


编辑部门：

{% extends 'layout.html' %}
{% block content %}
    <div>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" href="/depart/add">编辑部门</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>
    </div>
{% endblock %}


部门列表：

{% extends 'layout.html' %}
{% block content %}
<div>
    <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">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                部门列表
            </div>
            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                <tr>
                    <td>{{ obj.id }}</td>
                    <td>{{ obj.title }}</td>
                    <td>
                        <a class="btn-primary btn-xs" href="/depart/{{ obj.id }}/edit">编辑</a>
                        <a class="btn-danger btn-xs" href="/depart/delete?nid={{ obj.id }}">删除</a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}


8.用户管理


插入数据：

insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("刘备","666",23,100.68,"2023-01-01",1,1);
insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("关羽","999",23,99.68,"2023-01-02",1,2);
insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id) values("张飞","333",23,98.68,"2023-01-03",1,2);



在视图函数中获取数据库数据，传递给HTML

def user_list(request):
    queryset = models.UserInfo.objects.all()
    """
    for obj in queryset:
        print(obj.name, obj.password, obj.age, obj.account, obj.create_time.strftime("%Y-%m-%d"), obj.get_gender_display(), obj.depart.title)
    """
    return render(request, 'user_list.html', {"queryset": queryset})


新知识点 - 转换语法（在Python中的使用）：


obj.create_time.strftime(“%Y-%m-%d”)

obj.get_gender_display()

obj.depart.title


在模板语法中循环展示数据

{% for obj in queryset %}
<tr>
    <td>{{ obj.id }}</td>
    <td>{{ obj.name }}</td>
    <td>{{ obj.password }}</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-primary btn-xs">编辑</a>
        <a class="btn-danger btn-xs">删除</a>
    </td>
</tr>
{% endfor %}


新知识点 - 转换语法（在模板语法中的使用）：


obj.create_time|date:“Y-m-d”

get_gender_display

obj.depart.title


新建用户：


  • 原始方法
- 用户提交数据没有校验。
- 错误，页面上应有错误提示。
- 页面上，每一个字段都需要重新写一遍。
- 关联的数据，手动去获取并展示循环展示在页面


  • Django组件
  • Form组件（简便）
  • ModelForm组件（超级简便）


8.1 初识Form


1.views.py

class MyForm(Form):   # 定义一个类 在里面定义定义输入框，渲染到HTML中，则可以在HTML中调用成Input框
    user = forms.CharField(widget=forms.Input)
    pwd = forms.CharField(widget=forms.Input)
    email = forms.CharField(widget=forms.Input)
    account = forms.CharField(widget=forms.Input)
    create_time = forms.CharField(widget=forms.Input)
    depart = forms.CharField(widget=forms.Input)
    gender = forms.CharField(widget=forms.Input)
def user_add(request):
    if request.method == "GET":
        form = MyForm()
        return render(request, 'user_add.html', context, {"form":form})


2.user_add.html


一个个生成Input框

<form method="post">
    {{ form.user }}   <!-- 通过渲染传入的form，使用模板语法，生成Input框 -->
    {{ form.pwd }}
    {{ form.email }}
    <!-- <input type="text" class="form-control" placeholder="姓名" name="user"/> -->
</form>


循环生成Input框

<form method="post">
    {% for field in form %}   <!-- 通过渲染传入的form，使用模板语法，循环生成Input框 -->
      {{ field }}
    {% endfor %}
    <!-- <input type="text" class="form-control" placeholder="姓名" name="user"/> -->
</form>


8.2 ModelForm


models.py

class UserInfo(models.Model):
    name = models.CharField(verbose_name="姓名", max_length=16)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0)
    create_time = models.DateTimeField(verbose_name="入职时间")
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE)
    gender_choices = (
        (1, "男"),
        (2, "女"),
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)


views.py

class MyForm(Form):
    xx = forms.CharField()    # 可自定义字段
    class Meta:
        model = UserInfo    # 实例化UserInfo对象iang
        fields = ["name","password","age","xx"] # 可获取UserInfo中的字段
def user_add(request):
    if request.method == "GET":
        form = MyForm()
        return render(request, 'user_add.html', context, {"form":form})


  • 部门管理
  • 用户管理
  • 用户列表
  • 新建用户
- ModelForm，针对数据库中的某个表。
- Form


8.3 编辑用户


  • 点击编辑，跳转到编辑页面（将编辑行的ID携带过去）
  • 编辑页面（存放默认数据，根据ID获取并设置到页面中）
  • 提交：
  • 错误提示
  • 数据校验
  • 在数据库更新


9.靓号管理


9.1 表结构


根据表结构的需求，在models.py中创建类（由类生成数据库中的表）

class PrettyNum(models.Model):
    mobile = models.CharField(verbose_name="手机号", max_length=11)
    price = models.IntegerField(verbose_name="价格", default=0)
    level_choices = (
        (1, "1级"),
        (2, "2级"),
        (3, "3级"),
        (4, "4级"),
        (5, "5级"),
    )
    level = models.SmallIntegerField(verbose_name="级别", choices=level_choices, default=1)
    status_choices = (
        (1, "已占用"),
        (2, "为占用"),
    )
    status = models.SmallIntegerField(verbose_name="状态", choices=status_choices, default=2)


模拟创建一些数据：

mysql> select * from app01_prettynum;
+----+-------------+-------+-------+--------+
| id | mobile      | price | level | status |
+----+-------------+-------+-------+--------+
|  1 | 12345678911 |    10 |     1 |      1 |
|  2 | 12345678911 |    10 |     1 |      1 |
|  3 | 12345678911 |    10 |     1 |      1 |
+----+-------------+-------+-------+--------+


9.2 靓号列表


  • URL
  • 函数
  • 获取所有的靓号
  • 结合html+render将靓号罗列出来
id  手机号 价格  级别（中文）  状态（中文）

def pretty_list(request):
    """ 靓号列表 """
    queryset = models.PrettyNum.objects.all().order_by("-id")
    return render(request, 'pretty_list.html', {"queryset": queryset})

{% extends 'layout.html' %}
{% block content %}
    <div>
        <div class="container">
            <div style="margin-bottom: 10px">
                <a class="btn btn-success" href="/pretty/add">
                    <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-th-list" aria-hidden="true"></span>
                    靓号列表
                </div>
                <!-- Table -->
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>手机号</th>
                        <th>价格</th>
                        <th>级别</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in queryset %}
                        <tr>
                            <td>{{ obj.id }}</td>
                            <td>{{ obj.mobile }}</td>
                            <td>{{ obj.price }}</td>
                            <td>{{ obj.get_level_display }}</td>
                            <td>{{ obj.get_status_display }}</td>
                            <td>
                                <a class="btn-primary btn-xs" href="/user/{{ obj.id }}/edit">编辑</a>
                                <a class="btn-danger btn-xs" href="/user/{{ obj.id }}/delete">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}


Django系统开发（下）：https://developer.aliyun.com/article/1427948

文章标签：
Python
数据库
JavaScript
前端开发
Brucye
目录
相关文章
wljslmz
|
3月前
|
SQL 中间件 数据库
Django 架构详解
【8月更文挑战第24天】
wljslmz
98 0
攒了一袋星辰
|
5月前
|
前端开发 JavaScript 数据库
Django项目之图书管理系统
Django项目之图书管理系统
攒了一袋星辰
40 0
by灵感
|
6月前
|
BI Python
103-Django开发投票选举系统
这是一个基于 Python 3.11 和 Django 的全功能投票选举系统，提供用户认证、首页展示、投票功能、投票内容管理、数据统计与展示、用户管理和权限分配。系统支持第三方登录、搜索过滤、投票详情查看、选项选择及统计，并具有良好的扩展性和第三方系统集成能力。适用于各种选举场景，如学校选举、公司投票或在线调查。
by灵感
53 0
Brucye
|
6月前
|
存储 前端开发 JavaScript
Django系统开发（下）
Django系统开发
Brucye
70 0
Brucye
|
6月前
|
关系型数据库 MySQL 数据库
Django系统开发（上）
Django系统开发
Brucye
60 0
oxcxgh4wwskfm
|
设计模式 前端开发 JavaScript
django搭建图书管理系统
django搭建图书管理系统
oxcxgh4wwskfm
194 0
小杰911
|
存储 前端开发 JavaScript
基于Django的学生信息管理系统的设计与实现
基于Django的学生信息管理系统的设计与实现
小杰911
529 0
准时准点睡觉
|
数据库 Python
Django的基础学习
Django基本的项目安装和运行
准时准点睡觉
98 0
Django的基础学习
foofish
|
安全 关系型数据库 测试技术
Django 最佳实践
Django 最佳实践
foofish
167 0
Masters
|
数据库连接 数据库 Python
Django的基础学习（上）
Django的基础学习
Masters
94 0