ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

day9 图书设计项目

2021-12-03 21:00:33  阅读：215  来源： 互联网

标签：obj day9 author request publish book 设计 id 图书


总路由层url

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

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 首页
    url(r'^$', views.home, name='hm'),
    # 图书展示页
    url(r'^book_list/', views.book_list, name='bl'),
    # 图书添加
    url(r'^book_add/', views.book_add, name='badd'),
    # 图书编辑功能
    url(r'^book_update/(\d+)/', views.book_update, name='bu'),
    # 图书删除功能
    url(r'^book_delete/(?P<delete_id>\d+)', views.book_delete, name='bd')
    # 使用ajax实现删除功能
    url(r'^del_book',views.del_book)
]

首页

def home(request):
    return render(request, 'home.html')  # 返回一个页面


# home.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    {% block css %}
    
    {% endblock %}
</head>
<body>
<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="#">BMS</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="#">图书 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">作者</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>
            <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="#">meng</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <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">
        <div class="col-md-2">
            <div class="list-group">
              <a href="{% url 'hm' %}" class="list-group-item active">
                首页
              </a>
              <a href="{% url 'bl' %}" class="list-group-item">图书列表</a>
              <a href="#" class="list-group-item">出版社列表</a>
              <a href="#" class="list-group-item">作者列表</a>
              <a href="#" class="list-group-item">更多</a>
            </div>
        </div>
        <div class="col-md-10">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">BMS</h3>
              </div>
              <div class="panel-body">
                  {% block content %}
                      <div class="jumbotron">
                          <h1>亚洲最大图书馆!</h1>
                          <p>应有尽有，经典图书</p>
                          <p><a class="btn btn-primary btn-lg" href="#" role="button">中外经典名著</a></p>
                      </div>
                  {% endblock %}
              </div>
            </div>
        </div>
    </div>
</div>
{% block js %}

{% endblock %}
</body>
</html>

图书展示页

# views.py
def book_list(request):
    book_request = models.Book.objects.all()
    return render(request, 'book_list.html', locals())  # 把所有的数据展示到页面

# book_list.html
{% extends 'home.html' %}  # 用模板的继承

{% block css %}
    <style>
        .h2 {
            color:darkorange;
        }
    </style>
{% endblock %}

{% block content %}
    <h2 class="text-center h2" >精选推荐</h2>
    <a href="{% url 'badd' %}" class="btn btn-success">添加书籍</a>
    <table class="table table-hover table-striped">
        <thead>
            <tr>
                <th>主键</th>
                <th>书名</th>
                <th>价格</th>
                <th>出版日期</th>
                <th>出版社</th>
                <th>作者</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for book_obj in book_request %}
                <tr>
                    <td>{{ book_obj.id }}</td>
                    <td>{{ book_obj.title }}</td>
                    <td>{{ book_obj.price }}</td>
                    <td>{{ book_obj.publish_time|date:'Y-m-d' }}</td>
                    <td>{{ book_obj.publish.name }}</td>
{#                    <td>{{ book_obj.author.all }}</td>#}
                    <td>
                        {% for author_obj in book_obj.author.all %}
                            {% if forloop.last %}
                                {{ author_obj.name }}
                            {% else %}
                                {{ author_obj.name }},
                            {% endif %}
                        {% endfor %}
                        
                    </td>
                    <td>
                        <a href="{% url 'bu' book_obj.pk %}" class="btn btn-primary btn-xs">编辑</a>
                        <a href="{% url 'bd' book_obj.pk %}" class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <nav aria-label="Page navigation" class="text-center">
  <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>
{% endblock %}

图书添加功能

# views.py
def book_add(request):
    if request.method == 'POST':
        # 获取用户上传的数据
        title = request.POST.get('title')
        price = request.POST.get('price')
        publish_time = request.POST.get('publish_time')
        publish_pk = request.POST.get('publish_pk')
        author_pk = request.POST.getlist('author_pk')
        # 向数据库添加数据
        book_obj = models.Book.objects.create(title=title, price=price, publish_time=publish_time,publish_id=publish_pk)
        book_obj.author.add(*author_pk)  # author_pk:获取的是列表，用*打散一个个添加
        return redirect('bl')
    # 出版社对象
    publish_request = models.Publish.objects.all()
    # 作者对象
    author_request = models.Author.objects.all()
    return render(request, 'book_add.html', locals())


# book_add.html
{% extends 'home.html' %}

{% block content %}
    <h2 class="text-center">图书添加</h2>
    <form action="" method="post">
        <p>书名：
            <input type="text" name="title" class="form-control">
        </p>
        <p>价格：
            <input type="text" name="price" class="form-control">
        </p>
        <p>出版日期：
            <input type="date" name="publish_time" class="form-control">
        </p>
        <p>出版社：
            <select name="publish_pk" id="" class="form-control">
            	// 循环出所有的出版社
                {% for publish_obj in publish_request %}
                    <option value="{{ publish_obj.pk }}">{{ publish_obj.name }}</option>
                {% endfor %}
            </select>
        </p>
        <p>作者：
            <select name="author_pk" id="" multiple class="form-control">
                {% for author_obj in author_request %}
                    <option value="{{ author_obj.pk }}">{{ author_obj.name }}</option>
                {% endfor %}
            </select>
        </p>
        <input type="submit" value="添加书籍" class="btn btn-success btn-block">
    </form>
{% endblock %}

图书编辑功能

# views.py
def book_update(request, update_id):
    # 获取用户需要编辑的对象
    update_obj = models.Book.objects.filter(pk=update_id).first()

    if request.method == 'POST':
        # 获取用户上传的数据
        title = request.POST.get('title')
        price = request.POST.get('price')
        publish_time = request.POST.get('publish_time')
        publish_pk = request.POST.get('publish_pk')
        author_pk = request.POST.getlist('author_pk')
        # 向数据库添加数据
        models.Book.objects.filter(pk=update_id).update(title=title, price=price, publish_time=publish_time,publish_id=publish_pk)
        # 修改第三方表
        update_obj.author.set(author_pk)
        # 也可以用对象点属性的方式修改，调用save保存
        # update_obj.title = title
        # update_obj.save()
        return redirect('bl')

    # 出版社对象
    publish_request = models.Publish.objects.all()
    # 作者对象
    author_request = models.Author.objects.all()
    # 返回一个编辑页面
    return render(request, 'book_update.html',locals())


# book_update.html
{% extends 'home.html' %}

{% block content %}
    <h2 class="text-center">图书修改</h2>
    <form action="" method="post">
        <p>书名：
            <input type="text" name="title" class="form-control" value="{{ update_obj.title }}">
        </p>
        <p>价格：
            <input type="text" name="price" class="form-control" value="{{ update_obj.price }}">
        </p>
        <p>出版日期：
            <input type="date" name="publish_time" class="form-control" value="{{ update_obj.publish_time|date:'Y-m-d' }}">
        </p>
        <p>出版社：
            <select name="publish_pk" id="" class="form-control">
                {% for publish_obj in publish_request %} // 循环出所有的出版社
                    // 循环所有的出版社对象，跟书籍对象的出版社比对，如果一致则添加上selected默认值
                     {% if update_obj.publish == publish_obj %} // 判断循环的出版社是否和当前修改的出版社是否一样
                        <option value="{{ publish_obj.pk }}" selected>{{ publish_obj.name }}</option>  // 一样的话，添加默认值
                     {% else %}
                         <option value="{{ publish_obj.pk }}">{{ publish_obj.name }}</option>  // 否则，输出所有出版社
                     {% endif %}
                {% endfor %}
            </select>
        </p>
        <p>作者：
            <select name="author_pk" id="" multiple class="form-control">
                {% for author_obj in author_request %}
                    {% if author_obj in update_obj.author.all %}
                        <option value="{{ author_obj.pk }}" selected>{{ author_obj.name }}</option>
                    {% else %}
                        <option value="{{ author_obj.pk }}">{{ author_obj.name }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </p>
        <input type="submit" value="修改书籍" class="btn btn-warning btn-block">
    </form>
{% endblock %}

图书删除功能

# views.py
def book_delete(request,delete_id):
    # 删除
    models.Book.objects.filter(pk=delete_id).delete()
    return redirect('bl')  # 删除后重定向图书展示页面

使用Ajax实现二次确认删除功能

# 使用ajax就不能使用下面的url，会造成冲突
<a href="{% url 'bd' book_obj.pk %}" class="btn btn-danger btn-xs">删除</a>  # 修改前

<a href="#" class="btn btn-danger btn-xs c1" delete_id="{{ book_obj.pk }}">删除</a>  # 修改后
 # // 标签既可以有默认的属性，也可以有自定义的属性，添加delete_id是可以获取主键id值
    
# views.py
def del_book(request):
    # 判断当前请求是否为ajax请求
    if request.is_ajax():
        if request.method == 'POST':  # 判断是否是ajax发来的post请求
            # 拿到ajax传到后端的data值
            delete_id = request.POST.get('delete_id')
            # 根据传过来的主键id删除数据
            models.Book.objects.filter(pk=delete_id).delete()
            return HttpResponse('删除成功！')
        
# book_list.html
{% block js %}
<script>
    var $btn = $('.c1'); // 找到c1标签
    // 绑定点击事件
    $btn.on('click',function () {
        var delete_id = $(this).attr('delete_id'); // 拿当前点击按钮中的delete_id属性
        var $this = $(this); // 给this设置一个变量
        {#alert(delete_id); // 试验是否拿到主键id#}
        // 做提醒效果
        let res = confirm('确定删除吗');
        // 判断是否为true
        if (res){ //true
            // 发送ajax请求
            $.ajax({
                url:'/del_book/',  // 向它发送请求
                type:'post',
                data:{'delete_id':delete_id},
                success:function (args) {
                    alert(args) ; // 接收到用户后端穿过来数据，代表已经删除成功
                    // 刷新页面
                    {#window.location.reload()#}
                    // js代码自动刷新
                    $this.parent().parent().remove()
                }
            })
        }else { // false
            return false
        }
    })
</script>
{% endblock %}
'''
总结：
1.先在a标签中添加一个自定义属性：delete_id={{book_obj.pk}}，并且设置一个c1标签
2.找到c1标签，并且绑定一个点击事件
3.拿当前点击按钮中的delete_id属性
4.做提醒效果
5.判断是否为true
6.真的话：向后端发送ajax请求，并且其中把主键id传入到后端
7.在路由层和视图层开设出相应的函数
8.后端拿到ajax发来的主键id，根据主键id删除数据库数据，并给前端返回一个结果
9.前端拿到返回结果并打印，并刷新页面
'''
        
# 存在的问题：
        window.location.reload()
        当有多个页面时，使用上面的方法，会直接刷新到首页，会给用户造成不好的体验
        
# 解决：
        可以根据js代码自动删除，通过代码把tr标签删除
        var $this = $(this); // 给this设置一个变量
         // js代码自动刷新
         $this.parent().parent().remove()

试验url是否可以用反向解析

# 试验url是否可以用反向解析
    <script>
        var $btn = $('.c1');
        $btn.on('click',function () {
            $.ajax({
                url:'{% url "bl"  %}',
                type: 'post',
                data:'',
                succees:function () {
                    
                }
            })
        })
    </script>
  [02/Dec/2021 16:58:16] "POST /del_book/ HTTP/1.1" 200 15   # 发送了一个post请求，证明是可以的

结合第三方模块实现二次确认删除功能

{% block js %}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        var $btn = $('.c1'); // 找到c1标签
        // 绑定点击事件
        $btn.on('click',function (){
            var delete_id = $(this).attr('delete_id'); // 拿当前点击按钮中的delete_id属性
            var $this = $(this); // 给this设置一个变量
            swal({
              title: "确定要删除吗?",
              text: "要想好哦!",
              icon: "warning",
              buttons: true,
              dangerMode: true,
            })
            .then((willDelete) => {
              if (willDelete) {
                  // 向后端发送ajax请求
                  $.ajax({
                      url:'/del_book/',
                      type:'post',
                      data:{'delete_id':delete_id},
                      success:function (args) {
                          // js代码自动刷新
                          $this.parent().parent().remove();
                          {#window.location.reload();#}
                          swal(args, {
                                icon: "success",
                          }
                        );
                      }
                  })
              } else {
                swal("取消成功!");
              }
            });
        })
    </script>
{% endblock %}

第三方模块：https://sweetalert.js.org

标签：obj,day9,author,request,publish,book,设计,id,图书
来源： https://www.cnblogs.com/1069943893com/p/15640071.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有