菜鸟学做Django--图书管理系统

---

一、数据库展示

创建user ,publisher,book,author数据库名

from django.db import models

# Create your models here.
class User(models.Model):
    username=models.CharField(max_length=128,verbose_name='用户名',null=False)
    password=models.CharField(max_length=128,verbose_name='密码',null=False)
    email=models.CharField(max_length=255,verbose_name='邮箱',null=False)


class Publisher(models.Model):
    id=models.AutoField(primary_key=True)
    name=models.CharField(max_length=32)
    address=models.CharField(max_length=32)



class Book(models.Model):
    id=models.AutoField(primary_key=True)
    title=models.CharField(max_length=32)
    price=models.DecimalField(max_digits=5,decimal_places=2,default=10.01)
    inventory=models.IntegerField(verbose_name="库存数")
    sale_num=models.IntegerField(verbose_name="卖出数")
    publisher=models.ForeignKey(to='Publisher',on_delete=models.CASCADE)



class Author(models.Model):
    id=models.AutoField(primary_key=True)
    name=models.CharField(max_length=32)
    book=models.ManyToManyField(to='Book')

二、视图（view）展示

import redis
from django.http import HttpResponse
from django.shortcuts import render,redirect
from app01.models import Publisher,Book,Author,User
# from alipay import AliPay
# Create your views here.
from django.views import View
from django.core.mail import send_mail
import random
class Index(View):
    def get(self,request):
        return render(request,'index.html',locals())
    def post(self,request):
        return render(request,'index.html',locals())


from bookproject.settings import REDIS_CON


def vercode(user):
    res1 = ""
    for i in range(4):
        num = random.randint(0, 9)
        res1 += str(num)
    REDIS_CON.set(f'{user}', res1)
    print(type(user))
    REDIS_CON.expire(f'{user}', 300)
    return res1
class Send_email(View):
    def get(self,request):
        subject='邮箱标题'
        from_email='3246609065@qq.com'
        a= request.GET.get('email')
        message = vercode(a)
        recipient_list = [a,]
        send_mail(subject=subject, message=message, from_email=from_email, recipient_list=recipient_list)
        return render(request,'sendemail.html',locals())
    def post(self,request):
        msg = ''
        yzm=request.POST.get('yzm')

        a=request.POST.get('username')

        b=request.POST.get('password')

        c=request.POST.get('email')

        d = REDIS_CON.get(c)
        if a=='' or b=='' or c=='':
            msg='信息不能为空'
            return render(request, 'sendemail.html', locals())
        if yzm != d:
            msg='验证码不正确'
            return render(request, 'sendemail.html', locals())
        User.objects.create(username=a,password=b,email=c).save()
        msg='注册成功'
        return render(request, 'sendemail.html', locals())



class Login(View):
    def get(self,request):
        return render(request,'login.html',locals())
    def post(self,request):
        return render(request,'login.html',locals())



class Add_Publisher(View):
    def get(self,request):
        return render(request,'add_publisher.html',locals())
    def post(self,request):
        error_msg=''
        name=request.POST.get('name')
        address=request.POST.get('address')
        if name=='' or address=='':
            error_msg = '信息不能为空'
            return render(request, 'add_publisher.html', locals())
        Publisher.objects.create(name=name,address=address).save()
        error_msg='提交成功'
        return redirect('/app01/publisher_list/',locals())


class Publisher_List(View):
    def get(self,request):
        publisher_obj_list = Publisher.objects.all()
        return render(request,'publisher_list.html',locals())
    def post(self,request):
        publisher_obj_list=Publisher.objects.all()
        return render(request, 'publisher_list.html', locals())

class Delete_Publisher(View):
    def get(self,request):
        id=request.GET.get('id')
        Publisher.objects.filter(id=id).delete()
        return redirect('/app01/publisher_list/',locals())



class Edit_Publisher(View):
    def get(self,request):
        id=request.GET.get('id')
        publisher_obj=Publisher.objects.get(id=id)
        publisher_obj_list=Publisher.objects.all()
        return render(request,'edit_publisher.html',locals())
    def post(self,request):
        id=request.POST.get('id')
        name = request.POST.get('name')
        address=request.POST.get('address')
        publisher_obj=Publisher.objects.get(id=id)
        publisher_obj.name = name
        publisher_obj.address = address
        publisher_obj.save()
        publisher_obj_list=Publisher.objects.all()
        return redirect('/app01/publisher_list/',locals())


class Book_List(View):
    def get(self,request):
        book_obj_list = Book.objects.all()
        return render(request,'book_list.html',locals())
    def post(self,request):
        return render(request,'book_list.html',locals())



class Add_Book(View):
    def get(self,request):
        publisher_obj_list=Publisher.objects.all()
        return render(request,'add_book.html',locals())
    def post(self,request):
        name=request.POST.get('title')
        publisher_id=request.POST.get('publisher_id')
        price=request.POST.get('price')
        inventory=request.POST.get('inventory')
        sale_num=request.POST.get('sale_num')
        Book.objects.create(title=name,publisher_id=publisher_id,price=price,inventory=inventory,sale_num=sale_num).save()
        return redirect('/app01/book_list/',locals())




class Delete_Book(View):
    def get(self,request):
        id=request.GET.get('id')
        Book.objects.filter(id=id).delete()
        return redirect('/app01/book_list')




class Edit_Book(View):
    def get(self,request):
        id=request.GET.get('id')
        book_obj=Book.objects.filter(id=id).first()
        publisher_list=Publisher.objects.all()
        return render(request,'edit_book.html',locals())
    def post(self,request):
        id=request.POST.get('id')
        name=request.POST.get('name')
        price=request.POST.get('price')
        inventory=request.POST.get('inventory')
        sale_num=request.POST.get('sale_num')
        publisher_id=request.POST.get('publisher_id')
        Book.objects.filter(id=id).update(title=name,publisher_id=publisher_id,price=price,inventory=inventory,sale_num=sale_num)
        return redirect('/app01/book_list/',locals())




class Author_list(View):
    def get(self,request):
        ret_list = []

        author_obj_list = Author.objects.all()
        for author_obj in author_obj_list:
            book_obj_list = author_obj.book.all()
            print(author_obj)
            print(book_obj_list)
            ret_dic = {}
            ret_dic['author_obj'] = author_obj
            ret_dic['book_list'] = book_obj_list
            ret_list.append(ret_dic)
        return render(request,'author_list.html',locals())
    def post(self,request):
        return render(request, 'author_list.html', locals())





class Add_Author(View):
    def get(self,request):
        book_obj_list=Book.objects.all()
        return render(request,'add_author.html',locals())
    def post(self,request):
        name=request.POST.get('name')
        book_ids=request.POST.getlist('books')
        author_obj=Author.objects.create(name=name)
        author_obj.book.set(book_ids)
        return redirect('/app01/author_list/',locals())




class Delete_Author(View):
    def get(self,request):
        id=request.GET.get('id')
        Author.objects.filter(id=id).delete()
        return redirect('/app01/author_list/',locals())

class Edit_Author(View):
    def get(self,request):
        id=request.GET.get('id')
        author_obj=Author.objects.get(id=id)
        book_obj_list=Book.objects.all()
        return render(request,'edit_author.html',locals())
    def post(self,request):
        id=request.POST.get('id')
        name=request.POST.get('name')
        book_ids=request.POST.getlist('books')
        author_obj=Author.objects.filter(id=id).first()
        author_obj.name = name
        author_obj.book.set(book_ids)
        author_obj.save()
        return redirect('/app01/author_list/',locals())

三、路由（urls）展示

from django.contrib import admin
from django.conf.urls import url
from django.urls import path
from app01 import views

 from app01.views import Add_Publisher,Publisher_List,Delete_Publisher,Edit_Publisher

urlpatterns = [
    # path('admin/', admin.site.urls),
    # path('register/', views.Register.as_view()),
    # path('login/', views.Login.as_view()),
    path('publisher_list/', views.Publisher_List.as_view()),  # 出版社列表
    path('add_publisher/', views.Add_Publisher.as_view()),  # 添加出版社
    path('edit_publisher/', views.Edit_Publisher.as_view()),  # 修改出版社
    path('delete_publisher/', views.Delete_Publisher.as_view()),  # 删除出版社
    path('book_list/', views.Book_List.as_view()),  # 图书列表
    path('add_book/', views.Add_Book.as_view()),  # 图书列表
    path('delete_book/', views.Delete_Book.as_view()),  # 图书删除
    path('edit_book/', views.Edit_Book.as_view()),  # 修改图书
    path('author_list/', views.Author_list.as_view()),  # 作者列表
    path('add_author/', views.Add_Author.as_view()),  # 添加作者
    path('edit_author/', views.Edit_Author.as_view()),  # 编辑作者
    path('delete_author/', views.Delete_Author.as_view()),  # 删除作者
    # path('send_email/', views.send_email),
    # path('sendemail/', views.sendEmail),
    # path('test_alipay/', views.test_alipay),  # 删除作者
    path('sendemail/', views.Send_email.as_view()),
    path('login/', views.Login.as_view()),
    path('index/', views.Index.as_view()),

]

四、各前端展示

1.add_author.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
   <!--这是表格-->
  <form action="" method="post">
  <h3 style="color: #3c763d">添加作者</h3>
    {% csrf_token %}
    <p>
        作者名称： <input type="text"  name="name">
    </p>
    <p>
        书本名称：
       <select  multiple  name="books" >
       {% for book_obj in book_obj_list %}
            <option value="{{ book_obj.title }}">{{ book_obj.title }}</option>
       {% endfor %}
      </select>
   </p>

    <p>
       <button type="submit" class="btn">提交</button>
  </p>

</form>

  </body>
</html>

2.publisher_list.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
    <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
   <h3 style="color: #3c763d">出版社列表</h3>
   <!--这是表格-->
    <a href="/app01/add_publisher/">添加出版社</a>
<table border="1" class = "table table-hover table-bordered">
        <thead>
            <tr>
                <th>序号</th>
                <th>出版社id</th>
                <th>名称</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
      <tbody>
       {% for publisher_obj in publisher_obj_list %}
            <tr>
               <td> {{ forloop.counter }}</td>
               <td> {{ publisher_obj.id }}</td>
               <td> {{ publisher_obj.name }}</td>
               <td> {{ publisher_obj.address }}</td>
               <td><a href="/app01/edit_publisher/?id={{ publisher_obj.id }}">修改</a></td>
               <td><a href="/app01/delete_publisher/?id={{ publisher_obj.id }}">删除</a></td>
            </tr>
       {% endfor %}
      </tbody>
</table>
  <!--这是页码-->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


  </body>
</html>

3.add_publisher.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>图书管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1 class="text-center">图书管理系统</h1>
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
  <form action="" method="post">
  <h3 style="color: #3c763d">添加出版社</h3>
    {% csrf_token %}
    <p>
        出版社名称： <input type="text"  name="name">
    </p>
    <p>
        出版社地址：<input type="text" name="address">
    </p>
    <p>
       <button type="submit" class="btn">提交</button>
    </p>

</form>
{{ error_msg }}

  </body>
</html>

4.edit_publisher.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>

   <!--这是表格-->
  <form action="" method="post">
  <h3 style="color: #3c763d">编辑书籍</h3>
    {% csrf_token %}
    <p>
        出版社id: <input type="text" name="id" value="{{ publisher_obj.id }}">

    </p>
    <p>
        出版社名称： <input type="text"  name="name" value="{{ publisher_obj.name }}">
    </p>

    <p>
        出版社地址：
        <input type="text" name="address" value="{{ publisher_obj.address }}">
{#         <select name="address" id="">#}
{#             {% for publisher_obj in publisher_obj_list%}#}
{#                 {% if publisher_obj in  publisher_obj.publisher.all%}#}
{#                    <option  selected value="{{ publisher_obj.id }}">{{ publisher_obj.address }}</option>#}
{#                 {% else %}#}
{#                     <option value="{{ publisher_obj.id }}">{{ publisher_obj.address}}</option>#}
{#                 {% endif %}#}
{#             {%endfor %}#}
     </p>
    <p>
        <button type="submit" class="btn">提交</button>
    </p>

</form>


  </body>
</html>

5.book_list.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--分页名称-->
<h1 class="text-center">图书管理系统</h1>
<!--这是导航栏-->
<nav class="navbar navbar-inverse">
    <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
                <li class="active"><a href="/app01/author_list/">作者列表</a></li>
                <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
                <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>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <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>
<!--这是表格-->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-success">
                图书列表
            </h3>
            <a class="tian" style="color:#f82f48;font-weight: 900" href="/app01/add_book/">添加图书</a>
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>图书id</th>
                    <th>名称</th>
                    <th>价格/元</th>
                    <th>库存/册</th>
                    <th>卖出数/册</th>
{#                    <th>作者</th>#}
                    <th>出版社名称</th>
                    <th>出版社地址</th>
                    <th>操作</th>
                </tr>
                </thead>
            <tbody>
               {% for book_obj in book_obj_list %}
                   <tr>
                       <td> {{ forloop.counter }}</td>
                       <td> {{ book_obj.id }}    </td>
                       <td> {{ book_obj.title }} </td>
                       <td> {{ book_obj.price }} </td>
                       <td> {{ book_obj.inventory }} </td>
                       <td> {{ book_obj.sale_num }} </td>
{#                        <td>#}
{#                            {% for author_obj in author_obj_list %}#}
{#                                {% if book_obj in book_obj.book.all %}#}
{#                                    <option  selected value="{{ author_obj.id }}">{{ author_obj.name }}</option>#}
{#                                {% endif %}#}
{#                            {% endfor %}#}
{#                        </td>#}

                       <td> {{ book_obj.publisher.name }}</td>
                       <td> {{ book_obj.publisher.address }}</td>

                       <td>
                            <a href="/app01/edit_book/?id={{ book_obj.id }}">修改</a>
                            <a href="/app01/delete_book/?id={{ book_obj.id }}">删除</a>
                       </td>

                    </tr>
               {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
<!--这是页码-->
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>


</body>
</html>

6.add_book.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
  <form action="" method="post">
  <h3 style="color: #3c763d">添加图书</h3>
    {% csrf_token %}
    <p>
        添加图书名称： <input type="text"  name="title">
    </p>
  <p>
        添加图书价格： <input type="text"  name="price">
    </p>
  <p>
        添加图书库存数： <input type="text"  name="inventory">
    </p>
  <p>
        添加图书卖出数： <input type="text"  name="sale_num">
    </p>
   <p>
        出版社：
       <select multiple name="publisher_id" >
       {% for publisher_obj in publisher_obj_list %}
            <option value="{{ publisher_obj.id }}">{{ publisher_obj.name }}</option>
       {% endfor %}
      </select>
   </p>
    <p>
       <button type="submit" class="btn">提交</button>
    </p>

</form>


  </body>
</html>

7.edit_book.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>

   <!--这是表格-->
  <form action="" method="post">
  <h3 style="color: #3c763d">编辑书籍</h3>
    {% csrf_token %}
    <p>
        图书id :<input type="text" name="id" placeholder="{{ book_obj.id }}" value="{{ book_obj.id }}">

    </p>
    <p>
        图书名称： <input type="text"  name="name" value="{{ book_obj.title }}">
    </p>
  <p>
        图书价格： <input type="text"  name="price" value="{{ book_obj.price }}">
    </p>
  <p>
        图书库存数： <input type="text"  name="inventory" value="{{ book_obj.inventory }}">
    </p>
  <p>
        图书卖出数： <input type="text"  name="sale_num" value="{{ book_obj.sale_num }}">
    </p>
     <p>
         出版社名称:
         <select name="publisher_id" id="publisher_id">
             {% for publisher_obj in publisher_list%}
                 {% if book_obj in  book_obj.book.all%}
                    <option  selected value="{{ publisher_obj.id }}">{{ publisher_obj.name }}</option>
                 {% else %}
                     <option value="{{ publisher_obj.id }}">{{ publisher_obj.name }}</option>
                 {% endif %}
             {%endfor %}


         </select>

     </p>
    <p>
        <button type="submit" class="btn">提交</button>
    </p>

</form>


  </body>
</html>

8.author_list.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
    <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
        <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
   <h3 style="color: #3c763d">作家列表</h3>
   <!--这是表格-->
    <a style="color: #ac2925", href="/app01/add_author/">添加作者</a>
    <table border="1"  class="table table-hover table-bordered">

    <thead>
    <tr>
        <th>序号</th>
        <th>作者id</th>
        <th>作者</th>
        <th style="text-align: center">图书</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for ret_dic in ret_list %}
        <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ ret_dic.author_obj.id}}</td>
        <td>{{ ret_dic.author_obj.name}}</td>
        <td>
            {% for book_obj in ret_dic.book_list %}
                {% if forloop.last%}
                    {{ book_obj.title }}
                {% else %}
                    {{ book_obj.title }} |
                {% endif %}
            {% endfor %}

        </td>

        <td>
             <a href="/app01/edit_author/?id={{ ret_dic.author_obj.id }}">修改</a>
             <a href="/app01/delete_author/?id={{ ret_dic.author_obj.id }}">删除</a>
         </td>

        </tr>
    {% endfor %}

     </tbody>

</table>
  <!--这是页码-->
    <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


  </body>
</html>

9.edit_author.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <!--分页名称-->
    <h1 class="text-center">图书管理系统</h1>
    <!--这是导航栏-->
  <nav class="navbar navbar-inverse">
  <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="/app01/book_list/">首页</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="/app01/book_list/">图书列表<span class="sr-only">(current)</span></a></li>
        <li class="active"><a href="/app01/author_list/">作者列表</a></li>
      <li class="active"><a href="/app01/publisher_list/">出版社列表</a></li>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
   <!--这是表格-->
  <form action="" method="post">
  <h3 style="color: #3c763d">编辑作者</h3>
    {% csrf_token %}
     <p>
        作者id  ： <input type="text"  name="id"  value="{{ author_obj.id }}">
    </p>
    <p>
        作者名称： <input type="text"  name="name"  value="{{ author_obj.name }}">
    </p>
   <p>
        书籍名称：
       <select  multiple name="books" id="" >
        {% for book_obj in book_obj_list %}
           {% if book_obj in book_obj.book.all %}
               <option selected value="{{ book_obj.id }}">{{ book_obj.title }}</option>
           {% else %}
               <option value="{{ book_obj.id }}">{{ book_obj.title }}</option>
           {% endif %}
       {% endfor %}
      </select>
   </p>
    <p>
        <button type="submit" class="btn">提交</button>
    </p>

</form>

  </body>
</html>

10.sendemail.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/layui.css">

    <script src="{% static 'jquery-3.3.1.js' %}"></script>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
<div class="form-group">

    <div class="layui-input-block" style="text-align: center">
        <h1>注册界面</h1><br><br>
        用户名：<input type="text" name="username" value=""><br><br>
        密码：<input type="text" name="password" value=""><br><br>
        <label for="exampleInputName2">邮箱地址</label>
        <input type="text" class="form-control" id="email" name="email" placeholder="请输入电子邮箱"/><br><br>
        邮箱验证码：<input type="text" name="yzm" value=""><br><br>
    </div>
    <div class="layui-input-block" style="text-align: center">
        <input type="button" id="btn" value="发送验证码" onclick="settime(this);send()"/><br><br>
        <input type="submit" value="注册">
    </div>
</div>
</form>

<script type="text/javascript">
    function send() {
        console.log('re')
        $.ajax({
            url: "http://127.0.0.1:8000/app01/sendemail/",
            type: "GET",
            data: "email=" + $("#email").val(),
            success: function (msg) {
                alert("发送邮件了");
            }
        });
    }
    var countdown = 10;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value = "免费获取验证码";
            countdown = 10;
            return;
        } else {
            val.setAttribute("disabled", true);
            val.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
            settime(val)
        }, 1000)
    }

</script>
</body>
</html>

11.login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/layui.js" charset="utf-8"></script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item "><a href="">产品</a></li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>

</ul>
    <div class="layui-form-item">
        <label class="layui-form-label" >密码框</label>

        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

        </div>

        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>

        <div class="layui-input-block">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">江西</option>
            </select>

        </div>
    </div>
        <div>
            <button style="background:blue;border-radius: 50%;width: 150px;height: 150px">提交</button>
        </div>
    <div id="demo0"></div>
<script>
    layui.use(['laypage','layer'],function (){
        var laypage=layui.laypage
        ,layer=layui.layer;
        laypage.render({
            elem:'demo0'
            ,count:data.length
            ,first:'首页'
            ,last:'尾页'
            ,theme:'#ff5722'

        });

    });
</script>
<script src="/static/layui.js" charset="utf-8"></script>
{{ time |date:"Y-m-d:H:i:s" }}
<script src="/static/jquery-3.3.1.js"></script>
<script>
    alert("hello world.");
</script>

</body>
</html>

12.index.html

{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>Title</title>#}
{#</head>#}
{#<body>#}
{#<form action="/app01/sendemail/" method="POST">#}
{#    {% csrf_token%}#}
{#    <button type="submit">邮件</button>#}
{#</form>#}
{#</body>#}
{#</html>#}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 100px;">
            <legend style="text-align: center"><h1 style="color: aqua " >欢迎来到知识的海洋馆</h1></legend>
        </fieldset>
        <hr class="layui-border-orange">

    </div>
    <div style="text-align: center"><button  class="layui-border-red" style="border-radius: 50%;width: 300px;height: 300px"><a style="color:pink"  href="/app01/register/"><h2>请开始注册吧</h2></a></button></div>
    <div style="text-align: center"><button class="layui-border-blue"  style=" border-radius: 50%;width: 300px;height: 300px"><a style="color:red" href="/app01/login/">请开始登录吧</a></button></div>
</body>
</html>

五、settings展示

"""
Django settings for bookproject project.

Generated by 'django-admin startproject' using Django 3.0.3.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import redis

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '_i&8!ot$4yc1-yiul$uow_b$hxznq6*2(-+ibuv_y&zf6gt)63'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'bookproject.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'bookproject.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': "bookshop",
        'USER': "root",
        'PASSWORD':'000000',
        'HOST': '',
        'PORT':3306

    }
}

EMAIL_HOST = 'smtp.qq.com'
# 设置端口号，为数字   使用SSL，端口号465或587
EMAIL_PORT = 25
#设置发件人邮箱
EMAIL_HOST_USER = '@qq.com'
# 设置发件人 授权码
EMAIL_HOST_PASSWORD = ''
EMAIL_FROM = "@qq.cofm"
#nctsmpktpsmseafc
#gynbopmewexcdhid
# 设置是否启用安全链接
EMAIL_USER_TLS = True


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = False



# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]


REDIS_CON = redis.StrictRedis(host = 'localhost',port = 6379)