Django2.2 学习笔记 (6)_从数据库提取数据展示到前端html页面中

最新推荐文章于 2022-07-10 22:39:32 发布

原创最新推荐文章于 2022-07-10 22:39:32 发布 · 2.6k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Django

Django 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Django2.2中从数据库获取数据，并将这些数据有效地展示到前端HTML页面上，通过views.py的编写和前端页面的设计，实现了数据的完整展示。

1、从数据库提取数据展示到前端html页面中

if request.method =="GET":
    var_dict={}
    all_messages = Message.objects.all()
    # 如果不为空
    if all_messages:
        message = all_messages[0]
        var_dict = {"message": message}

    return render(request, "message_form.html",var_dict)

2、完整版views.py页面

from django.shortcuts import render

# Create your views here.
from apps.message_form.models import Message

def message_form(request):
    if request.method =="GET":
        var_dict={}
        all_messages = Message.objects.all()
        # 如果不为空
        if all_messages:
            message = all_messages[0]
            var_dict = {"message": message}
            return render(request, "message_form.html",var_dict)

    if request.method == "POST":
        name=request.POST.get("name","")
        address = request.POST.get("address", "")
        email = request.POST.get("email", "")
        message_txt = request.POST.get("message", "")

        message = Message()
        message.name = name
        message.address =address
        message.email =email
        message.message= message_txt
        message.save()
        return render(request, "message_form.html", {"message": message})

2、完整版前端页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<form action="/message_form/" method="post" class="smart-green">
    <h1>留言信息
        <span>请留下你的信息.</span>
    </h1>
    <label>
        <span>姓名 :</span>
        <input id="name" type="text" value="{{message.name}}" name="name" class="error" placeholder="请输入您的姓名"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>邮箱 :</span>
        <input id="email" type="email" value="{{message.email}}" name="email" placeholder="请输入邮箱地址"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>联系地址 :</span>
        <input id="address" type="text" value="{{message.address}}" name="address" placeholder="请输入联系地址"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>留言 :</span>
        <textarea id="message" name="message"  placeholder="请输入你的建议"></textarea>
        <div class="error-msg"></div>
    </label>
    <div class="success-msg"></div>
    <label>
        <span>&nbsp;</span>
        <input type="submit" class="button" value="提交"/>
    </label>
    {%csrf_token%}
</form>

</body>
</html>