zoukankan      html  css  js  c++  java
  • django前端渲染多对多关系(比如一本书的作者有哪些)

    自己遇到的问题是,前端渲染不出多对多关系,咨询Yuan后解决,特此记录。

    urls.py

    from django.conf.urls import url
    from book import views
    
    urlpatterns = [
        url(r'^index/', views.index),
        url(r'^add/', views.add),
        url(r'^delete/', views.delete),
        url(r'^modify/', views.modify),
    ]

    models.py

    from django.db import models
    
    # Create your models here.
    
    
    class Publisher(models.Model):
        name = models.CharField(max_length=30, verbose_name="名称")
        address = models.CharField("地址", max_length=50)
        city = models.CharField('城市', max_length=60)
        state_province = models.CharField(max_length=30)
        country = models.CharField(max_length=50)
        website = models.URLField()
    
        class Meta:
            verbose_name = '出版商'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            return self.name
    
    
    class Author(models.Model):
        name = models.CharField(max_length=30)
    
        def __str__(self):
            return self.name
    
    
    class AuthorDetail(models.Model):
        # sex = models.BooleanField(max_length=1, choices=((0, ''), (1, ''),))
        sex = models.CharField(max_length=32)
        email = models.EmailField()
        address = models.CharField(max_length=50)
        birthday = models.DateField()
        author = models.OneToOneField(Author)
    
        def __str__(self):
            return '(%s,%s,%s)' % (self.sex, self.email, self.address)
    
    
    class Book(models.Model):
        title = models.CharField(max_length=100)
        price = models.DecimalField(max_digits=5, decimal_places=2, default=10)
        authors = models.ManyToManyField('Author')
        publisher = models.ForeignKey('Publisher')
        publication_date = models.DateField(default='2017-08-20')
    
        def __str__(self):
            return self.title

    views.py

    def index(request):
        all_book_list = Book.objects.all()  # 获取所有book对象
        if request.method == "POST":  # 搜索框的POST请求和数据
            key_word = request.POST.get('key_word')
            all_book_list = Book.objects.filter(title__contains=key_word)
        return render(request, "book/index.html", {"all_book_list": all_book_list})

    book/book.index.html

    <!--{% load book_to_author %}-->
    {% load staticfiles %}
    
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>内部管理系统</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            ul{
                padding: 20px 30px 20px 50px;
            }
            ul li {
                margin: 30px ;
            }
            {#   分割    #}
            .outer{
                margin: 100px auto;
                 70%;
                height: 400px;
                border: 1px solid rebeccapurple;
                position: relative;
            }
            .search_form {
                position: absolute;
                top: 10px;
                left: 750px;
            }
            .table-content {
                position: absolute;
                top: 50px;
            }
            .form {
                display: inline-block;
            }
            .add-button{
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="{% static "dist/css/bootstrap.css" %}">
    </head>
    <body>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
           <a href="#book" data-toggle="tab">书籍管理</a>
        </li>
        <li>
            <a href="/author/index">作者管理</a>
        </li>
        <li>
            <a href="/publisher/index">出版社管理</a>
        </li>
        <li class="dropdown">
           <a href="#" id="myTabDrop1" class="dropdown-toggle"
              data-toggle="dropdown">学科<b class="caret"></b>
           </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#yuwen" tabindex="-1" data-toggle="tab">
                    语文</a>
                </li>
                <li><a href="#shuxue" tabindex="-1" data-toggle="tab">
                    数学</a>
                </li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="book">
            <div class="outer">
                <form class="col-lg-2 input-group search_form" action="/index/" method="post">
                    <input class="form-control form" placeholder="Search for..." type="text" name="key_word">
                    <!--<input type="submit" value="666">-->
                     <span class="input-group-btn">
                        <input class="btn btn-default" type="submit">Go2!</input>
                     </span>
                </form>
                <table class="table table-striped table-content">
                <tbody>
                    <tr>
                        <th>编号</th>
                        <th>书名</th>
                        <th>价格</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>出版日期</th>
                        <th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;action</th>
                    </tr>
                  {% for book in all_book_list %}
                       <tr>
                            <td>{{ book.id  }}</td>
                            <td>{{ book.title }}</td>
                            <td>{{ book.price }}</td>
                            <td>{{ book.authors }}</td>  //这块是问题点
                            <td>{{ book.publisher }}</td>
                            <td>{{ book.publication_date|date:'Y-m-d'}}</td>
                           <td>
                               <a href="/book/delete/?id={{ book.id }}"><button  type="button" class="btn btn-danger">删除</button></a>
                               <!-- Button trigger modal -->
                               <button type="button" class="btn btn-primary modify" data-toggle="modal" data-target="#myModal">编辑</button>
                           </td>
                       </tr>
                    {% endfor %}
                </tbody>
    
    
    
                </table>
                <a href="/book/add/"><button type="button" class="btn btn-primary add-button">添加</button></a>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">编辑模式</h4>
                  </div>
                <form action="/book/modify/" method="post">
                    <div class="modal-body">
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">ID</span>
                        <input type="text" class="form-control BookId" aria-describedby="basic-addon1" name="BookId">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">书名</span>
                        <input type="text" class="form-control BookName" aria-describedby="basic-addon1" name="BookName">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">价格</span>
                        <input type="text" class="form-control Price" aria-describedby="basic-addon1" name="Price">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">作者</span>
                        <input type="text" class="form-control Author" aria-describedby="basic-addon1" name="Author">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">出版社</span>
                        <input type="text" class="form-control Publisher" aria-describedby="basic-addon1" name="Publisher">
                        </div>
                        <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">出版日期</span>
                        <input type="text" class="form-control Publication_date" aria-describedby="basic-addon1" name="Publication_date">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="modify_confirm">Save changes</button>
                    </div>
                </form>
                </div>
              </div>
            </div>
        </div>
        <div class="tab-pane fade" id="author">
        </div>
        <div class="tab-pane fade" id="publisher">
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>语文。。。。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>数学。。。。。</p>
        </div>
    </div>
        <!--page bottom js-->
        <script src="{% static "dist/js/BookManagerSystem_book.js" %}"></script>
    </body>
    </html>

    在前端模板语言中,如上方式使用

    <td>{{ book.authors }}</td>  

    结果:

    使用

    <td>{{ book.authors.all }}</td>  

    结果

    使用:

    {% for book_author in {{ book.authors.all }} %}
             <td>{{ book_author }}</td>
    {% endfor %}  

     效果

    使用:

    {% for book_author in book.authors.all %}
              <td>{{ book_author }}</td>
     {% endfor %}  

     效果

    正确的做法:

                {% for book in all_book_list %}
                       <tr>
                            <td>{{ book.id  }}</td>
                            <td>{{ book.title }}</td>
                            <td>{{ book.price }}</td>
                           <td>
                                {% for book_author in book.authors.all %}
                                    {{ book_author }}
                                {% endfor %}
                           </td>  //将循环放在td标签内
                            <td>{{ book.publisher }}</td>
                            <td>{{ book.publication_date|date:'Y-m-d'}}</td>
                           <td>
                               <a href="/book/delete/?id={{ book.id }}"><button  type="button" class="btn btn-danger">删除</button></a>
                               <!-- Button trigger modal -->
                               <button type="button" class="btn btn-primary modify" data-toggle="modal" data-target="#myModal">编辑</button>
                           </td>
                       </tr>
                    {% endfor %}

    效果

    哎~~~踩坑的地方,以为在{% for %} 内部循环的时候变量也要使用{{变量名}},其实不用,另外td和元素的嵌套关系没设置正确~~~

  • 相关阅读:
    SurfaceView之绘制sin曲线
    双缓冲技术解决方案之二:内容不交叉时,可以增量绘制
    双缓冲技术解决方案之一:保存所有要绘制内容,全屏重绘
    双缓冲技术局部更新原理之派生自View
    双缓冲技术局部更新原理之派生自SurfaceView
    SurfaceView双缓冲技术引入
    SurfaceView动态背景效果实现
    SurfaceView概述和基本使用
    Bitmap添加水印效果
    Bitmap之compress图片压缩
  • 原文地址:https://www.cnblogs.com/robinunix/p/7454970.html
Copyright © 2011-2022 走看看