Django 基础知识



目录结构:

Django 学习第一阶段

HTTP 知识补充:
1. HTTP协议消息的格式:
1. 请求(request)
        请求方法 路径 HTTP/1.1\r\n
        k1:v1\r\n
        ...\r\n
        \r\n
        请求体        <-- 可以有,可以没有

2. 响应(response)
        HTTP/1.1 状态码 状态描述符\r\n
        k1:v1\r\n
        Content-Type: text/html; charset=utf8\r\n
        \r\n
        响应正文       <-- HTML内容
2. Python web框架的本质:
a. 收发socket消息                --> 按照HTTP协议消息格式去解析消息

b. 路径和要执行的函数的对应关系    --> 主要的业务逻辑

c. 字符串替换                    --> 模板(特殊符号 --> 数据)
3. 一个完整得请求流程:
0. 启动服务端,等待客户端(用户的浏览器)来连接
1. 在浏览器地址栏输入URL,与服务端建立连接,浏览器发送请求
2. 服务端收到请求消息,解析请求消息,根据路径和函数的对应关系,找到将要执行的函数
3. 执行函数,打开HTML文件,进行字符串替换,得到一个最终要返回的HTML内容
4. 按照HTTP协议的消息格式要求,把HTML内容回复给用户浏览器(发送响应)
5. 浏览器收到响应的消息之后,按照HTML的规则渲染页面.
6. 关闭连接
Django知识:
1. 安装
1. Django版本 1.11.xx
2. 安装方式
    1. 命令行        --> Python环境(双版本,pip的使用)
        pip3 install django==1.11.11
        pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple/ django==1.11.11
    2. PyCharm安装
Django项目启动
1. 命令行启动
    在项目的根目录下(也就是有manage.py的那个目录),运行:
    python3 manage.py runserver IP:端口--> 在指定的IP和端口启动
    python3 manage.py runserver 端口   --> 在指定的端口启动
    python3 manage.py runserver        --> 默认在本机的8000端口启动
2. PyCharm启动
    点绿色的小三角,直接可以启动Django项目(前提是小三角左边是你的Django项目名)
2. 创建Django项目
1. 创建方式
    1. 命令行创建方式
        1. cd到你要保存Django项目的目录
        2. Django-admin startproject 项目名   --> 会在当前目录创建Django项目
        3. django-admin startproject mysite
    2. PyCharm创建方式
        1. File --> new project --> ...
        2. 创建完之后一定要选在新窗口打开!!!
        3. File --> New project --> 左侧选Django --> 右侧填项目路径,并且勾选python.exe
3. 配置Django项目 项目名/settings.py文件
1. settings.py文件
    1. templates文件夹的位置
    2. Templates(存放HTML文件的配置)       <-- 告诉Django去哪儿找我的HTML文件

2. 静态文件(css/js/图片)
            1. STATIC_URL         --> 静态文件夹的别名(在HTML文件中用的)
            2. STATICFILES_DIRS   --> 静态文件夹的真正路径
            例如:
            # 静态文件保存目录的别名
            STATIC_URL = '/static/'
            # 所有静态文件(css/js/图片)都放在我下面你配置的文件夹中
            STATICFILES_DIRS = [
                os.path.join(BASE_DIR, "static")
            ]

3. 注释掉 csrf 相关的中间件
    #   'django.middleware.csrf.CsrfViewMiddleware',           # 默认在47行

4. Django项目连接的数据库信息              (详情见下面的ORM使用详情)
4. Django WEB请求流程(简版)
1. 启动Django项目,等待用户连接
2. 浏览器在地址栏输入URL,来连接我的Django项目
3. 在urls.py中 找 路径和函数的 对应关系
4. 执行对应的函数
5. 返回响应
5. views.py
1. 专门用来定义处理请求的函数
    1. 基本必备三件套
    from django.shortcuts import HttpResponse, render, redirect
        1. HttpResponse("要返回的内容")             --> 通常用于直接返回数据
        2. render(request, "html文件", {"k1": v1}) --> 返回一个HTML文件或者打开文件进行字符串替换
        3. redirect("URL")                         --> 告诉用户的浏览器去访问其他的URL

2. request相关
        1. request.method     --> 查看请求的方法
        2. request.POST       --> 获取POST请求的数据
6. ORM使用
1. 什么是ORM? 
是一种编程的方法论(模型), 和语言无关.(其他的语言也有类似的实现.)
    import pymysql
    pymysql.connect(
     ...
     ...
    )
    1. 不同的程序员写的SQL水平参差不齐
    2. 执行效率也参差不齐
    python语法   --自动翻译-->  SQL语句
    jQuery                      DOM
    $("#d1")     --自动翻译-->  document.getElementById("d1")

    优点:
        1. 简单,不用自己写SQL语句
        2. 开发效率高
    缺点:
        1. 记忆你这个特殊的语法
        2. 相对于大神些的SQL语句,肯定执行效率有差距       

2. ORM的本质(ORM的对应关系:):
    类    --->    数据表
    对象  --->    数据行
    属性  --->    字段

    按照规定的语法写,自动翻译成对应的SQL语句.

3. ORM的功能:  
        1. 操作数据表    --> 创建表/删除表/修改表
        2. 操作数据行    --> 数据的增删改查
使用Django的ORM详细步骤:
1. 手动创建数据库
    create database 数据库名;

2. 在settings.py里面,配置数据库的连接信息
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',      # 连接的数据库类型
            'NAME': 'day62',                           # 数据库名称
            'HOST': '127.0.0.1',                       # 连接数据库的地址
            'PORT': 3306,                              # 端口
            'USER': 'root',                            # 用户名
            'PASSWORD': '123456',                      # 密码
        }
    }

3. 在项目/__init__.py告诉Django用pymysql模块代替MySQLdb来连接MySQL数据库
    import pymysql
    pymysql.install_as_MySQLdb()

4. 在app下面的models.py文件中定义一个类,这个类必须继承models.Model
    # 出版社
    class Publisher(models.Model):
    id = models.AutoField(primary_key=True)  # 自增的ID主键
    # 创建一个varchar(64)的唯一的不为空的字段
    name = models.CharField(max_length=64, null=False, unique=True)

5. 执行两个命令
    1. python3 manage.py makemigrations   --> 把models.py里面的更改记录到小本本上
    2. python3 manage.py migrate          --> 把更改翻译成SQL语句,去数据库执行
ORM单表的增加和查询:
1. 查询
    models.Publisher.objects.all()
2. 增加
    models.Publisher.object.create(name="张三")
3. 删除
    1. 先找到对象,调用对象的.delete()方法
        publisher_obj = models.Publisher.objects.get(id=7)
        publisher_obj.delete()
    或者
        models.Publisher.objects.get(id=7).delete()
4. 修改
    1. 找到对象,通过修改对象的属性来修改数据库中指定字段的值,要保存
        publisher_obj = models.Publisher.objects.get(id=7)
        publisher_obj.name = "新的出版社名字"
        publisher_obj.save()  --> 把修改提交到数据库
GET 请求和 POST 请求:
1. GET请求和POST请求
    都属于HTTP协议规定的请求方法

2. 什么时候用GET请求?
    1. 浏览器想要得到一个HTML页面的时候  
    2. 搜索引擎查询关键字的时候 (GET请求携带的数据都拼在了URL上)  www.sogo.com/web/?query=迪丽热巴
    3. GET请求携带的数据有长度限制 40k

3. 什么时候用POST?
    1. 向后端提交数据(form表单提交数据)
        1. 大段的数据
        2. 包含隐私的数据
        3. 上传文件

4. 实际中GET和POST的应用场景
    1. GET:
        1. 直接在浏览器地址栏输入URL访问网站
        2. 点击a标签
    2. POST:
        1. 登录注册
        2. 修改(新增)大段的数据
        3. 上传文件
request相关的知识点
1. request.method
    1. GET
    2. POST
2. request.POST     ——> 所有和POST请求相关的数据
3. request.GET      ——> 所有和GET请求相关的数据 


练习:
①:图书管理
1. 创建一个项目
1. django-admin startproject 图书管理
2. cmd 命令终端下创建一个app
    python manage.py startapp app01
2. 配置settings.py文件(此处填写了后续需要配置的所有内容)
1、注释该行内容(大约在47~57行)
 #   'django.middleware.csrf.CsrfViewMiddleware',
2、连接数据库的配置(注释掉原来的 DATABASES)
DATABASES = {
'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME': "book_m_s",
    'HOST': "127.0.0.1",
    'PORT': 3306,
    'USER': 'root',
    'PASSWORD': '123456',
    }
}
3、静态文件的配置
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]
4、app添加
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]
3. __init__.py文件,引入pymysql模块,使用mysql数据库
import pymysql
pymysql.install_as_MySQLdb()
4. app01/modles.py文件,创建数据表
from django.db import models
# Create your models here.
# 出版社表
class Publisher(models.Model):
    # 自增的ID主键
    id = models.AutoField(primary_key=True)
    # 创建一个varchar(64)的唯一的不为空的字段,且不能为空,且不重复
    name = models.CharField(max_length=64, null=False, unique=True)

# 书籍表
class Book(models.Model):
    # 自增的ID主键
    id = models.AutoField(primary_key=True)
    # 创建一个varchar(64)的唯一的不为空的字段,且不能为空,且不重复
    title = models.CharField(max_length=64, null=False, unique=True)
    # 告诉ORM我这张表和Publisher表是关联关系,ORM自动帮我创建关联ID (publisher_id)字段
    publisher = models.ForeignKey(to="Publisher")

# 作者表
class Author(models.Model):
    # 自增的ID主键
    id = models.AutoField(primary_key=True)
    # 创建一个varchar(64)的唯一的不为空的字段,且不能为空,且不重复
    name = models.CharField(max_length=16, null=False, unique=True)
    # 告诉ORM 我这张表和book表是多对多的关联关系,ORM自动帮我生成了第三张表
    book = models.ManyToManyField(to="Book")
5. urls.py文件
from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 出版社相关的对应关系
    # 出版社列表
    url(r'^publisher_list/', views.publisher_list),
    # 添加出版社
    url(r'^add_publisher/', views.add_publisher),
    # 删除出版社
    url(r'^delete_publisher/', views.delete_publisher),
    # 编辑出版社
    url(r'^edit_publisher/', views.edit_publisher),

    # 书籍相关的对应关系
    # 书籍列表
    url(r'^book_list/', views.book_list),
    # 添加书籍
    url(r'^add_book/', views.add_book),
    # 删除书籍
    url(r'^delete_book/', views.delete_book),
    # 编辑书籍
    url(r'^edit_book/', views.edit_book),

    # 作者相关的对应关系
    # 作者列表
    url(r'^author_list/', views.author_list),
    # 添加作者
    url(r'^add_author/', views.add_author),
    # 删除作者
    url(r'^delete_author/', views.delete_author),
    # 编辑作者
    url(r'^edit_author/', views.edit_author),
]
6. app01/views.py文件
from django.shortcuts import render, redirect, HttpResponse
    from app01 import models
    # Create your views here.

# 展示出版社列表
def publisher_list(request):
    # 去数据库查出所有的出版社,填充到HTML中,给用户返回
    ret = models.Publisher.objects.all().order_by("id")
    return render(request, 'publisher_list.html', {"publisher": ret})

# 添加新的出版社
def add_publisher(request):
    error = ""
    # 如果是POST请求,我就取到用户填写的数据
    if request.method == "POST":
        add_publisher = request.POST.get("add_name")
        if add_publisher:
            # 从数据库中获取所以的出版社
            all_publisher = models.Publisher.objects.all()
            # 循环判断新添加的出版社名字是否已经存在
            for i in all_publisher:
                # 如果存在返回错误提示
                if i.name == add_publisher:
                    error = "%s 已经存在" % (add_publisher)
                    return render(request,'add_publisher.html', {"error": error})
            # 通过ORM去数据库里创建一条记录
            models.Publisher.objects.create(name=add_publisher)
            # 引导用户访问出版社列表页,查看是否添加成功 ———> 跳转
            return redirect("/publisher_list/")
        else:
            error = "error:出版社名字不能为空 !"
    # 用户第一次来,我给他返回一个用来填写的HTML页面
    return render(request,'add_publisher.html', {"error": error})

# 删除出版社
def delete_publisher(request):
    # 删除指定的数据
    # 1. 从GET请求的参数里面拿到将要删除的ID值
    del_id = request.GET.get("id") # 字典取值,取不到默认为None
    # 如果取到id值
    if del_id:
        # 去数据库删除当前的id值的数据
        # 1.根据id值查找到数据并进行删除
        models.Publisher.objects.get(id=del_id).delete()
        # 上面这句删除还可以用这种方式如下:
        # del_obj = models.Publisher.objects.get(id=del_id)
        # del_obj.delete()
        # 返回删除后的页面,跳转到出版社的列表页,查看删除是否成功
        return redirect("/publisher_list/")
    else:
        return HttpResponse('<h1 style="color: red">ERROR : 删除的出版社不存在 !</h1>')

# 编辑出版社
def edit_publisher(request):
    # 用户修改完出版社的名字,点击提交按钮,给我发来新的出版社名字
    if request.method == "POST":
        # 取新出版社的名字
        edit_id = request.POST.get("id")
        edit_newname = request.POST.get("name")
        # 更新出版社(数据库)
        edit_publisher = models.Publisher.objects.get(id=edit_id)
        edit_publisher.name = edit_newname
        edit_publisher.save()  # 把修改提交到数据库
        # 跳转到出版社列表页,查看是否修改成功
        return redirect("/publisher_list/")
        # 根据id取到编辑的是哪个出版社
    # 从GET请求的URL中取到id参数
    edit_id = request.GET.get("id")
    if edit_id:
        # 获取到当前编辑的出版社对象
        edit_obj = models.Publisher.objects.get(id=edit_id)
        return render(request, "edit_publisher.html", {"publisher": edit_obj})
    else:
        return HttpResponse('<h1 style="color: red">ERROR : 编辑的出版社不存在 !</h1>')

# 展示书籍
def book_list(request):
    # 去数据库中查询所有的书籍
    all_book = models.Book.objects.all().order_by("id")
    # 在HTML页面完成字符串替换(渲染书籍)
    return render(request, "book_list.html", {"all_book": all_book})

# 添加书籍
def add_book(request):
    error = ""
    if request.method == "POST":
        # 获取新书的名字
        add_name = request.POST.get("book_name")
        # 获取新书的出版社
        publisher = request.POST.get("publisher_id")
        if add_name:
            # 创建新书对象, 自动提交   (创建方法一)
            models.Book.objects.create(title=add_name, publisher_id=publisher)
            # 返回到书籍列表页
            return redirect("/book_list/")
        else:
            error = "error:书名不能为空!"
    # 取到所有的出版社
    ret = models.Publisher.objects.all()
    return render(request, "add_book.html", {"publisher_list": ret, "error": error})

# 删除书籍
def delete_book(request):
    delete_id = request.GET.get("id")
    if delete_id:
        # 去删除数据库中删除指定id的数据
        models.Book.objects.get(id=delete_id).delete()
        # 返回书籍列表页面,查看是否删除成功
        return redirect("/book_list")
    else:
        return HttpResponse('<h1 style="color: red">ERROR : 删除的书籍不存在 !</h1>')

# 编辑书籍
def edit_book(request):
    # 从URL里面获取要删除的书籍的id值
    if request.method == "POST":
        edit_id = request.POST.get("id")
        if edit_id:
            # 从提交的数据里面取,书名和书名关联的出版社
            new_publisher_id = request.POST.get("publisher")
            new_name = request.POST.get("book_name")
            # 更新
            edit_book_obj = models.Book.objects.get(id=edit_id)
            edit_book_obj.title = new_name   # 更新书名
            edit_book_obj.publisher_id = new_publisher_id   # 更新书籍关联的出版社
            # 将修改提交到数据库
            edit_book_obj.save()
            # 返回书籍列表页,查看是否编辑成功
            return redirect("/book_list/")
    # 取到编辑的书的id值
    edit_id = request.GET.get("id")
    if edit_id:
        publisher_list = models.Publisher.objects.all()
        edit_obj = models.Book.objects.get(id=edit_id)
        # 返回一个页面,让用户编辑书籍信息
        return render(request, "edit_book.html", {"book_obj": edit_obj, "publisher_list": publisher_list})
    else:
        return HttpResponse('<h1 style="color: red">ERROR : 编辑的书籍不存在 !</h1>')

# 作者列表
def author_list(request):
    # 查询所有的作者
    author_obj = models.Author.objects.get(id=1)
    print(author_obj)
    all_author = models.Author.objects.all().order_by("id")
    return render(request, "author_list.html", {"author_list":all_author})

# 添加作者
def add_author(request):
    error = ""
    if request.method == "POST":
        # 取到提交的数据
        new_author_name = request.POST.get("author_name")
        if new_author_name:
            # post提交的数据是多个值的时候,一定要用getlist , 如多选的checkbox和多选的select
            books = request.POST.getlist("books")
            # 创建作者
            new_author_obj = models.Author.objects.create(name=new_author_name)
            # 把新作者和书籍建立对应关系,自动提交
            new_author_obj.book.set(books)
            # 跳转到作者列表页面,查看是否添加成功
            return redirect("/author_list/")
        else:
            error = "error:作者不能为空!"
    # 查询所有的书籍
    ret = models.Book.objects.all()
    return render(request, "add_author.html", {"book_list": ret, "error": error})

# 删除作者
def delete_author(request):
    # 从URl中获取需要删除的作者的ID值
    delete_id = request.GET.get("id")
    if delete_id:
        # 如果获取到值,那么进行删除
        models.Author.objects.get(id=delete_id).delete()
        # 跳转到作者列表页,查看是否删除成功
        return redirect("/author_list/")
    else:
        return HttpResponse('<h1 style="color: red">ERROR : 删除的作者不存在 !</h1>')

# 编辑作者
def edit_author(request):
    # 如果编辑完提交数据过来
    if request.method == "POST":
        # 拿到提交过来的编辑后的数据
        edit_author_id = request.POST.get("author_id")
        new_author_name = request.POST.get("author_name")
        # 拿到编辑后作者关联的书籍信息
        new_books = request.POST.getlist("books")
        # 根据ID找到当前编辑的作者对象
        edit_author_obj = models.Author.objects.get(id=edit_author_id)
        # 更新作者的名字
        edit_author_obj.name = new_author_name
        # 更新作者关联的书的对应关系
        edit_author_obj.book.set(new_books)
        # 将修改提交到数据库
        edit_author_obj.save()
        # 返回作者列表页,查看是否编辑成功
        return redirect("/author_list/")
    # 从URL里面取要编辑的作者的id信息
    edit_id = request.GET.get("id")
    # 找到要编辑的作者对象
    edit_author_obj = models.Author.objects.get(id=edit_id)
    # 查询所有的书籍对象
    ret = models.Book.objects.all()
    return render(request, "edit_author.html", {"book_list": ret, "author": edit_author_obj})
7. 在项目目录下创建一个templates目录 templates/publisher_list.html 文件(展示出版社)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
        <title>出版社列表</title>
        <!-- Bootstrap core CSS -->
        <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="/static/dashboard.css" rel="stylesheet">
        <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <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="https://v3.bootcss.com/examples/dashboard/#">BMS-S10</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                    <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                    <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                    <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="/publisher_list/">出版社列表</a></li>
                    <li><a href="/book_list/">书籍列表</a></li>
                    <li><a href="/author_list/">作者列表</a></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <h1 class="page-header">出版社管理页面</h1>
                <div class="panel panel-primary">
                    <!-- Default panel contents -->
                    <div class="panel-heading">出版社列表 <i class="fa fa-thumb-tack pull-right"></i></div>
                    <div class="panel-body">
                        <div class="row" style="margin-bottom: 15px">
                            <div class="col-md-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search for...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button">搜索</button>
                                    </span>
                                </div><!-- /input-group -->
                            </div><!-- /.col-md-4 -->
                            <div class="col-md-1 pull-right">
                                <a href="/add_publisher/" class="btn btn-success">新增</a>
                                <!-- <button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>-->
                            </div>
                        </div><!-- /.row -->
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>ID值</th>
                                <th>出版社名称</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for publisher in publisher %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ publisher.name }}</td>
                                    <td>
                                        <a class="btn btn-danger" href="/delete_publisher/?id={{ publisher.id }}">删除</a>
                                        <a class="btn btn-info" href="/edit_publisher/?id={{ publisher.id }}">编辑</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <nav aria-label="Page navigation" class="text-right">
                            <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

展示出版社效果图

8. templates/add_publisher.html文件(添加出版社)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>添加出版社</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                {# 标题 #}
                <div class="panel-heading">添加出版社</div>
                <div class="panel-body">
                    {# form表单 #}
                    <form class="form-horizontal" action="/add_publisher/" method="post">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="出版社"
                                       name="add_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                                <h3 style="color: red"> {{ error }}  </h3>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

添加出版社效果图

9. templates/edit_publisher.html文件(编辑出版社)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>编辑出版社</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">编辑出版社</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/edit_publisher/" method="post">
                        <input type="text" value="{{ publisher.id }}" name="id" style="display: none;">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" value="{{ publisher.name }}"
                                       name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                                <h3 style="color: red"> {{ error }}  </h3>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

编辑出版社效果图

10. templates/book_list.html文件(展示书籍列表)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>书籍列表</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="https://v3.bootcss.com/examples/dashboard/#">BMS-S10</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="/publisher_list/">出版社列表页</a></li>
                <li class="active"><a href="/book_list/">书籍列表</a></li>
                <li><a href="/author_list/">作者列表</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">出版社管理页面</h1>
            <div class="panel panel-primary">
                <!-- Default panel contents -->
                <div class="panel-heading">书籍列表 <i class="fa fa-thumb-tack pull-right"></i></div>
                <div class="panel-body">
                    <div class="row" style="margin-bottom: 15px">
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">搜索</button>
                                </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-md-4 -->
                        <div class="col-md-1 pull-right">
                            <a href="/add_book/" class="btn btn-success">新增</a>
                            <!-- <button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>-->
                        </div>
                    </div><!-- /.row -->
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>ID值</th>
                            <th>书名</th>
                            <th>出版社</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for book in all_book %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ book.title }}</td>
                                <td>{{ book.publisher.name }}</td>
                                <td>
                                    <a class="btn btn-danger" href="/delete_book/?id={{ book.id }}">删除</a>
                                    <a class="btn btn-info" href="/edit_book/?id={{ book.id }}">编辑</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <nav aria-label="Page navigation" class="text-right">
                        <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>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

书籍列表效果图

11. templates/add_book.html文件(添加书籍)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>添加书籍</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                {# 标题 #}
                <div class="panel-heading">添加书籍</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/add_book/" method="post">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">书名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="书名"
                                       name="book_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="publisher_id">
                                    {% for publisher in publisher_list %}
                                        <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                                <h4 style="color: red;">{{ error }}</h4>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

添加书籍效果图

12. templates/edit_book.html文件(编辑书籍)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>编辑书籍</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">编辑书籍</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/edit_book/" method="post">
                        <input type="text" name="id" value="{{ book_obj.id }}" style="display: none">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">书名</label>
                            <div class="col-sm-10">
                                <input type="text" name="book_name" value="{{ book_obj.title }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="publisher">
                                    {% for publisher in publisher_list %}
                                        {% if book_obj.publisher.id == publisher.id %}
                                            <option selected value="{{ publisher.id }}">{{ publisher.name }}</option>
                                        {% endif %}
                                        <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

编辑书籍效果图

13. templates/author_list.html文件(作者列表)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>作者列表</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="https://v3.bootcss.com/examples/dashboard/#">BMS-S10</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="/publisher_list/">出版社列表页</a></li>
                <li><a href="/book_list/">书籍列表</a></li>
                <li class="active"><a href="/author_list/">作者列表</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">出版社管理页面</h1>
            <div class="panel panel-primary">
                <!-- Default panel contents -->
                <div class="panel-heading">作者列表 <i class="fa fa-thumb-tack pull-right"></i></div>
                <div class="panel-body">
                    <div class="row" style="margin-bottom: 15px">
                        <div class="col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">搜索</button>
                                </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-md-4 -->
                        <div class="col-md-1 pull-right">
                            <a href="/add_author/" class="btn btn-success">新增</a>
                            <!-- <button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>-->
                        </div>
                    </div><!-- /.row -->
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>ID</th>
                            <th>名字</th>
                            <th>作品</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for author in author_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ author.id }}</td>
                                <td>{{ author.name }}</td>
                                <td>{% for book in author.book.all %}
                                    《{{ book.title }}》 &nbsp;
                                {% endfor %}
                                </td>
                                <td>
                                    <a class="btn btn-danger" href="/delete_author/?id={{ author.id }}"><i
                                            class="fa fa-trash-o fa-fw"></i>删除</a>
                                    <a class="btn btn-info" href="/edit_author/?id={{ author.id }}"><i
                                            class="fa fa-pencil fa-fw"></i>编辑</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <nav aria-label="Page navigation" class="text-right">
                        <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>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

作者列表效果图

14. templates/add_author.html文件(添加作者)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>添加作者</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                {# 标题 #}
                <div class="panel-heading">添加作者</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/add_author/" method="post">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">作者</label>
                            <div class="col-sm-10">
                                <input type="text" name="author_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">作品</label>
                            <div class="col-sm-10">
                                <select class="form-control" multiple name="books">
                                    {% for book in book_list %}
                                        <option value="{{ book.id }}">{{ book.title }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                                <h4 style="color: red;">{{ error }}</h4>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

添加作者效果图

15. templates/edit_author.html文件(编辑作者)
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">
    <title>编辑作者</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">编辑书籍</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/edit_author/" method="post">
                        <input type="text" name="author_id" value="{{ author.id }}" style="display: none">
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">作者</label>
                            <div class="col-sm-10">
                                <input type="text" name="author_name" value="{{ author.name }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="publisher_name" class="col-sm-2 control-label">作品</label>
                            <div class="col-sm-10">
                                <select class="form-control" multiple name="books">
                                    {% for book in book_list %}
                                        {#                如果当前这本书 在 当前作者关联的所有书 里面 #}
                                        {% if book in author.book.all %}
                                            <option selected value="{{ book.id }}">{{ book.title }}</option>
                                        {% else %}
                                            <option value="{{ book.id }}">{{ book.title }}</option>{% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

编辑作者效果图

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值