Question

我正在尝试在Django中使用Templateview来呈现一个页面，其中包含用于添加到数据库以及从数据库检索某些信息并显示它的选项。我基于https://www.youtube.com/watch?v=VxOsCKMStuw

上的教程

views.py：

class TestView(TemplateView):
    template_name = 'app/sensor_name_tmpl.html'

    def get(self, request):
        form = SensorForm()
        posts = Sensor.objects.all()

        args = {'form': form, 'posts': posts}
        return render(request, self.template_name, args)


    def post(self, request):
        form = SensorForm(request.POST)
        if form.is_valid():
            form.save()
            text = form.cleaned_data['post']
            form = SensorForm()
            return redirect('sensor_name_tmpl:sensor_name_tmpl')

        args = {'form': form, 'text': text}
        return render(request, self.template_name, args)

urls.py：

urlpatterns = [
    path('', views.index, name='index'),
    url(r'^form1/$', views.get_sensor_name, name='GiveSensorName1'),
    #url(r'^form2/$', TestView.as_view(), name='sensor_name_tmpl.html'),
    path('form2/', TestView.as_view(), name='app/sensor_name_tmpl.html'),
    url(r'^nested_admin/', include('nested_admin.urls')),
]

HTML模板：

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $('#toggle').click(function() {
            $('form').toggle('slow');
            });
        </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello world!</title>
  </head>


  <body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

<!--    <form style="display:none;" method="post">-->
        <form method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form1.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>

                <br>
                <br>

                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form2.as_table}}
                </table>
                  <div class="mx-sm-2">
                        <input type="submit" value="Submit">
                  </div>
                <br>
                <br>

                <h3 class="text-success">View Sensors</h3>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sensor ID</th>
                            <th scope="col">Sensor Name</th>
                        </tr>
                    </thead>
                <tbody>
                {%for obj in obj%}
                    <tr>
                        <td>{{obj.sensor_id}}</td>
                        <td>{{obj.sensor_name}}</td>
<!--                        <th scope="row">1</th>-->
                    </tr>
                {% endfor %}
                </tbody>
                </table>





            </div>
        <div>
    </form>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  </body>
</html>

该页面呈现了模板，但未使用表单域或数据库中的数据填充模板。

Answer 1

问题出在HTML模板上，其中form1和form2现在已替换为form，而for循环中的“ obj”已替换为“ posts”。现在，该模板如下所示：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $('#toggle').click(function() {
            $('form').toggle('slow');
            });
        </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello world!</title>
  </head>


  <body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

<!--    <form style="display:none;" method="post">-->
        <form method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>

                <br>
                <br>

                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form.as_table}}
                </table>
                  <div class="mx-sm-2">
                        <input type="submit" value="Submit">
                  </div>
                <br>
                <br>

                <h3 class="text-success">View Sensors</h3>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sensor ID</th>
                            <th scope="col">Sensor Name</th>
                        </tr>
                    </thead>
                <tbody>
                {%for obj in posts%}
                    <tr>
                        <td>{{obj.sensor_id}}</td>
                        <td>{{obj.sensor_name}}</td>
<!--                        <th scope="row">1</th>-->
                    </tr>
                {% endfor %}
                </tbody>
                </table>





            </div>
        <div>
    </form>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  </body>
</html>

如何通过2种方法（获取和发布）使用TemplateView

1 个答案: