Django前后端交互---插入数据

最新推荐文章于 2024-08-03 22:21:30 发布

百度pkq

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量467

点赞数

分类专栏： Django Pycharm学习文章标签： django html python

本文链接：https://blog.csdn.net/wangaolong0427/article/details/120840280

版权

Pycharm学习同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Django

14 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、创建一条记录的前端
- - - 当forms.py中的类创建好之后，如何使用？
二、和数据库进行交互

一、创建一条记录的前端

create.html继承了index.html.index中存储的是bootstrap的启用代码，bootstrap中有源码，但是还是贴上吧

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
          crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
</head>
    {% include 'aoapp/navbar.html' %}
    <!-- 这里导入的是bootstrap样式的导航栏 -->

<body>
<div>
</div>
{% block content %}

{% endblock %}


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
</body>

</html>

{% extends 'aoapp/index.html' %}
{% block title %}创建{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div style="height: 150px"></div>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="card shadow">
                            <div class="card-header text-center text-light bg-dark">
                                <h3 class="card-title">Customer Form</h3>

                            </div>
                            <div class="card-body">
                                <form action="{% url 'create' %}" method="post">
                                    {% csrf_token %}
                                    {#                                    csrf攻击模式令牌，加上才能传输数据给表单#}
                                    {{ c_form.as_p }}
                                    <div class="text-center">
                                        <button type="submit" name="c_button" class="btn btn-primary">提交</button>

                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-2"></div>
                </div>

            </div>
            <div class="col-md-6">
                <div style="height: 150px"></div>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="card shadow">
                            <div class="card-header text-center text-light bg-dark">
                                <h3 class="card-title">Order Form</h3>

                            </div>
                            <div class="card-body">
                                <form action="{% url 'create' %}" method="post">
                                {#表单提交方式，从urls.py中找到name=create的函数，并去执行这个函数#}
                                    {% csrf_token %}
                                    {#    csrf攻击模式令牌，加上才能传输数据给表单#}
                                    {{ o_form.as_p }}
                                    {#将前端界面显示为p标签形式#}
                                    <div class="text-center">
                                        <button type="submit" name="o_button" class="btn btn-primary">提交</button>

                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-2"></div>
                </div>

            </div>
        </div>
    </div>
{% endblock %}

紧接着在app文件夹下的urls.py文件中写入，name='create’是表单能够传入到后端views.py中找到对应的create方法关键。

urlpatterns = [
    path('',homepage),
    path('create/',create,name='create'),
]

由于前端界面可以使用表单提供的选择框和各种提示语句，所以可以在后端配置forms.py文件
在app文件夹中创建forms.py，在其中写入前后端映射的代码

from django import forms

from django.forms import ModelForm

from aoapp.models import Customer, Order


class CustomerForm(ModelForm):
    #映射Customer表，在前端生成相应的输入框和元数据
    class Meta:
        # 将表和模型建立关系
        model = Customer
        # fields 表示需要展示在前端输入的字段
        fields = [
            'name',
            'phone',
            'email'
        ]
        #输入框前面的提示词
        labels = {
            'name': '姓名',
            'phone': '电话',
            'email': '邮箱',
        }
        # 输入框的形式
        widgets = {
            'name': forms.TextInput(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入姓名',
            }),
            'phone': forms.TextInput(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入电话',
            }),
            'email': forms.TextInput(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入邮箱',
            }),
        }


class OrderForm(ModelForm):
    class Meta:
        model = Order
        # 表示全部可输入字段
        fields = '__all__'
        #录入时间字段除外
        exclude = ['time_created']
        labels = {
            'customer': '顾客',
            'product': '商品',
            'status': '订单状态',
        }
        widgets = {
            # 添加选择框，选择已建立主外键关系或者约束的数据
            'customer': forms.Select(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入顾客',
            }),
            'product': forms.Select(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入商品',
            }),
            'status': forms.Select(attrs=
            {
                'class': 'form-control',
                'placeholder': '请输入订单状态',
            }),
        }

当forms.py中的类创建好之后，如何使用？

在views.py中去寻找create方法，在其中调用方法，如下:


def create(request):
    c_form=CustomerForm()
    o_form=OrderForm()

    print(request.POST)
'''<QueryDict: {'csrfmiddlewaretoken': ['86VGWp7wsHqfe6WeWraKRL0IfDR7O374La0azoMdxwTOTV7aAmfwYP8GZ51SWNo2'], 'name': ['王澳龙'], 'phone': ['17700742745'], 'email': ['3453@168.com'], 'c_button': ['']}>
这是点击左边提交之后获得的数据，加上c_button 这个名字的原因，是为了在后端判断点击的是创建哪个表的数据记录，如果点击的是右边的按钮，就会传入o_button。
'''

    context = {
        'c_form': c_form,
        'o_form': o_form,
    }
    return render(request, "aoapp/create.html", context)

在这里插入图片描述
尽管能提交了，但是后端只是获得了数据，并未和后端数据库进行交互，所以下面需要和数据库进行交互

二、和数据库进行交互

判断当前按的是哪个按钮：

如果是customer的按钮

    if request.method=='POST':
        if 'c_button' in request.POST:
            c_form=CustomerForm(request.POST)
            if c_form.is_valid():
                name_get=c_form.changed_data['name']
                phone_get=c_form.changed_data['phone']
                email_get=c_form.changed_data['email']
                customer = Customer(name=name_get, phone=phone_get, email=email_get)
                customer.save()
                return redirect('homepage') #创建一个条记录后返回到查询界面将数据库查询的结果更新

如果是order的按钮

 if 'o_button' in request.POST:
            print(request.POST)
            o_form = OrderForm(request.POST)
            if o_form.is_valid():
                customer_get = o_form.cleaned_data['customer']
                product_get = o_form.cleaned_data['product']
                status_get = o_form.cleaned_data['status']
                order = Order.objects.create(customer=customer_get, product=product_get, status=status_get)
                order.save()
                return redirect('homepage')

home.html的内容

{% extends 'aoapp/index.html' %}
{% block title %}首页{% endblock %}
{% block content %}
    <div style="height:30px;"></div>

    <div class=" container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class=" card shadow text-center">
                    <div class="card-header">
                        <h3 class="card-title">Total order</h3>
                    </div>
                    <div class="card-body">
                        <h3>{{ o_count }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class=" card shadow text-center">
                    <div class="card-header">
                        <h3 class="card-title">Order Pending</h3>
                    </div>
                    <div class="card-body">
                        <h3>{{ order_p_count }}</h3>
                    </div>
                </div>
            </div>

            <div class=" col-md-3">
                <div class=" card  shadow text-center">
                    <div class="card-header">
                        <h3 class="card-title">Out of deliverd</h3>
                    </div>
                    <div class="card-body">
                        <h3>{{ order_o_count }}</h3>
                    </div>
                </div>
            </div>

            <div class=" col-md-3">
                <div class=" card shadow text-center">
                    <div class="card-header">
                        <h3 class="card-title">Order Deliverd</h3>
                    </div>
                    <div class="card-body">
                        <h3>{{ order_d_count }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height:10px;"></div>

    <hr>
    <div style="height:10px;"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h3>Total Customer: {{ c_count }}</h3>

            </div>
            <div class="col-md-6">
                <a href="{% url 'create' %}" class="btn btn-outline-primary">Create Customer or Order</a>

            </div>
        </div>
    </div>
    <div style="height: 10px ; "></div>
    <hr>
    <div style="height: 10px ; "></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 text-center">
                <h4>Customer
                </h4>
                <table class="table">
                    <thead class="table-dark">
                    <tr>
                        <th scope="col">C_ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Phone</th>
                        <th scope="col">Email</th>
                        <th scope="col">Time</th>
                        <th scope="col">View</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in customer reversed %}
                        <tr>
                            <th scope="row">{{ i.id }}</th>
                            <td>{{ i.name }}</td>
                            <td>{{ i.phone }}</td>
                            <td>{{ i.email }}</td>
                            <td>{{ i.time_cteated }}</td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 text-center">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <h4>Last 5 Orders</h4>
                    </div>
                    <div class="col-md-4"></div>
                </div>

                <table class="table table-striped">
                    <thead class="thead-dark">
                    <tr>

                        <th scope="col">O_ID</th>
                        <th scope="col">Customer</th>
                        <th scope="col">Product</th>
                        <th scope="col">Time</th>
                        <th scope="col">Status</th>
                        <th scope="col">Update</th>
                        <th scope="col">Delete</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in order reversed %}
                        <tr>

                            <th scope="row">{{ i.id }}</th>
                            <td>{{ i.customer }}</td>
                            <td>{{ i.product }}</td>
                            <td>{{ i.time_created }}</td>
                            <td>{{ i.status }}</td>
                        </tr>
                    {% endfor %}


                    </tbody>
                </table>
            </div>

        </div>
    </div>
    <div style="height: 30px"></div>
{% endblock %}

百度pkq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Django前后端交互---插入数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、创建一条记录的前端当forms.py中的类创建好之后，如何使用？二、和数据库进行交互一、创建一条记录的前端create.html继承了index.html.index中存储的是bootstrap的启用代码，bootstrap中有源码，但是还是贴上吧<!doctype html><html lang="en"><head> <!-- Required meta tag
复制链接

扫一扫

专栏目录