图书管理系统_分页_作者展示_上传图片

目录

　　分页实现

　　作者展示

　　图片上传

 

分页实现

 

 分页通用代码

应用下随便自定义一个py文件， 比如 utils/pags.py 

 

class Pagination(object):
    """自定义分页（Bootstrap版）"""
    def __init__(self, current_page, total_count, base_url, per_page=10, max_show=11):
        """
        :param current_page: 当前请求的页码
        :param total_count: 总数据量
        :param base_url: 请求的URL
        :param per_page: 每页显示的数据量，默认值为10
        :param max_show: 页面上最多显示多少个页码，默认值为11
        """
        try:
            self.current_page = int(current_page)
        except Exception as e:
            # 取不到或者页码数不是数字都默认展示第1页
            self.current_page = 1
        # 定义每页显示多少条数据
        self.per_page = per_page
        # 计算出总页码数
        total_page, more = divmod(total_count, per_page)
        if more:
            total_page += 1
        self.total_page = total_page
        # 定义页面上最多显示多少页码(为了左右对称，一般设为奇数)
        self.max_show = max_show
        self.half_show = max_show // 2
        self.base_url = base_url

    @property
    def start(self):
        return (self.current_page-1) * self.per_page

    @property
    def end(self):
        return self.current_page * self.per_page

    def page_html(self):
        # 计算一下页面显示的页码范围
        if self.total_page <= self.max_show:  # 总页码数小于最大显示页码数
            page_start = 1
            page_end = self.total_page
        elif self.current_page + self.half_show >= self.total_page:  # 右边越界
            page_end = self.total_page
            page_start = self.total_page - self.max_show
        elif self.current_page - self.half_show <= 1:  # 左边越界
            page_start = 1
            page_end = self.max_show
        else:  # 正常页码区间
            page_start = self.current_page - self.half_show
            page_end = self.current_page + self.half_show
        # 生成页面上显示的页码
        page_html_list = []
        page_html_list.append('<nav aria-label="Page navigation"><ul class="pagination">')
        # 加首页
        first_li = '<li><a href="{}?page=1">首页</a></li>'.format(self.base_url)
        page_html_list.append(first_li)
        # 加上一页
        if self.current_page == 1:
            prev_li = '<li><a href="#"><span aria-hidden="true">«</span></a></li>'
        else:
            prev_li = '<li><a href="{}?page={}"><span aria-hidden="true">«</span></a></li>'.format(
                self.base_url, self.current_page - 1)
        page_html_list.append(prev_li)
        for i in range(page_start, page_end + 1):
            if i == self.current_page:
                li_tag = '<li class="active"><a href="{0}?page={1}">{1}</a></li>'.format(self.base_url, i)
            else:
                li_tag = '<li><a href="{0}?page={1}">{1}</a></li>'.format(self.base_url, i)
            page_html_list.append(li_tag)
        # 加下一页
        if self.current_page == self.total_page:
            next_li = '<li><a href="#"><span aria-hidden="true">»</span></a></li>'
        else:
            next_li = '<li><a href="{}?page={}"><span aria-hidden="true">»</span></a></li>'.format(
                self.base_url, self.current_page + 1)
        page_html_list.append(next_li)
        # 加尾页
        page_end_li = '<li><a href="{}?page={}">尾页</a></li>'.format(self.base_url, self.total_page)
        page_html_list.append(page_end_li)
        page_html_list.append('</ul></nav>')
        return "".join(page_html_list)

 

然后再我们的views中引入上面的py文件

def publisher_list(request):
    # 从URL中取当前访问的页码数
    current_page = int(request.GET.get('page'))
    # 比len(models.Publisher.objects.all())更高效
    total_count = models.Publisher.objects.count()
    page_obj = Pagination(current_page, total_count, request.path_info)
    data = models.Publisher.objects.all()[page_obj.start:page_obj.end]
    page_html = page_obj.page_html()
    return render(request, "publisher_list.html", {"publisher_list": data, "page_html": page_html})

 

最后前端直接在你想要的地方添加即可

{{ page_url|safe }}  <!--没错，就这一行-->

 

 

再来一版django内置分页器的分页

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger

L = []
for i in range(999):
    L.append(i)

def index(request):
    current_page = request.GET.get('p')

    paginator = Paginator(L, 10)
    # per_page: 每页显示条目数量
    # count:    数据总个数
    # num_pages:总页数
    # page_range:总页数的索引范围，如: (1,10),(1,200)
    # page:     page对象
    try:
        posts = paginator.page(current_page)
        # has_next              是否有下一页
        # next_page_number      下一页页码
        # has_previous          是否有上一页
        # previous_page_number  上一页页码
        # object_list           分页之后的数据列表
        # number                当前页
        # paginator             paginator对象
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:
        posts = paginator.page(paginator.num_pages)
    return render(request, 'index.html', {'posts': posts})

view函数

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    {% for item in posts %}
        <li>{{ item }}</li>
    {% endfor %}
</ul>

<div class="pagination">
      <span class="step-links">
        {% if posts.has_previous %}
            <a href="?p={{ posts.previous_page_number }}">Previous</a>
        {% endif %}
          <span class="current">
            Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
          </span>
          {% if posts.has_next %}
              <a href="?p={{ posts.next_page_number }}">Next</a>
          {% endif %}
      </span>

</div>
</body>
</html>

 

使用实例

加工处理的一个类

class Pagination(object):
    """自定义分页（Bootstrap版）"""
    def __init__(self, current_page, total_count, base_url, per_page=5, max_show=5):
        """
        :param current_page: 当前请求的页码
        :param total_count: 总数据量
        :param base_url: 请求的URL
        :param per_page: 每页显示的数据量，默认值为10
        :param max_show: 页面上最多显示多少个页码，默认值为11
        """
        try:
            self.current_page = int(current_page)
        except Exception as e:
            # 取不到或者页码数不是数字都默认展示第1页
            self.current_page = 1
        # 定义每页显示多少条数据
        self.per_page = per_page
        # 计算出总页码数
        total_page, more = divmod(total_count, per_page)
        if more:
            total_page += 1
        self.total_page = total_page
        # 定义页面上最多显示多少页码(为了左右对称，一般设为奇数)
        self.max_show = max_show
        self.half_show = max_show // 2
        self.base_url = base_url

    @property
    def start(self):
        return (self.current_page-1) * self.per_page

    @property
    def end(self):
        return self.current_page * self.per_page

    def page_html(self):
        # 计算一下页面显示的页码范围
        if self.total_page <= self.max_show:  # 总页码数小于最大显示页码数
            page_start = 1
            page_end = self.total_page
        elif self.current_page + self.half_show >= self.total_page:  # 右边越界
            page_end = self.total_page
            page_start = self.total_page - self.max_show
        elif self.current_page - self.half_show <= 1:  # 左边越界
            page_start = 1
            page_end = self.max_show
        else:  # 正常页码区间
            page_start = self.current_page - self.half_show
            page_end = self.current_page + self.half_show
        # 生成页面上显示的页码
        page_html_list = []
        page_html_list.append('<nav aria-label="Page navigation"><ul class="pagination">')
        # 加首页
        first_li = '<li><a href="{}?page=1">首页</a></li>'.format(self.base_url)
        page_html_list.append(first_li)
        # 加上一页
        if self.current_page == 1:
            prev_li = '<li><a href="#"><span aria-hidden="true">«</span></a></li>'
        else:
            prev_li = '<li><a href="{}?page={}"><span aria-hidden="true">«</span></a></li>'.format(
                self.base_url, self.current_page - 1)
        page_html_list.append(prev_li)
        for i in range(page_start, page_end + 1):
            if i == self.current_page:
                li_tag = '<li class="active"><a href="{0}?page={1}">{1}</a></li>'.format(self.base_url, i)
            else:
                li_tag = '<li><a href="{0}?page={1}">{1}</a></li>'.format(self.base_url, i)
            page_html_list.append(li_tag)
        # 加下一页
        if self.current_page == self.total_page:
            next_li = '<li><a href="#"><span aria-hidden="true">»</span></a></li>'
        else:
            next_li = '<li><a href="{}?page={}"><span aria-hidden="true">»</span></a></li>'.format(
                self.base_url, self.current_page + 1)
        page_html_list.append(next_li)
        # 加尾页
        page_end_li = '<li><a href="{}?page={}">尾页</a></li>'.format(self.base_url, self.total_page)
        page_html_list.append(page_end_li)
        page_html_list.append('</ul></nav>')
        return "".join(page_html_list)

 

views部分

@check_login
def books(request):
    # 从URL中取当前访问的页码数
    current_page = request.GET.get('page')
    try:
        current_page = int(current_page)  # 没有page或不是字符串就默认等于1
    except:
        current_page = 1
    # 总的书籍
    total_count = models.Book.objects.count()
    page_obj = Pagination(current_page, total_count, request.path_info)
    # 筛选Book表Is_delete值为False的数据就展示
    book_queryset = models.Book.objects.filter(is_delete=False)[page_obj.start:page_obj.end]
    page_url = page_obj.page_html()
    return render(request, 'books.html', {'books_queryset': book_queryset, 'page_url': page_url})

 

html部分，其实就一行

{% extends 'home.html' %}

{% block title %}
    图书主页
{% endblock %}

{% block content %}
    <a href="{% url 'book_add' %}">
        <button class="btn btn-success">添加书籍</button>
    </a>
    <div class="panel panel-primary">
        <table class="table 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 books_queryset %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ book_obj.title }}</td>
                    <td>{{ book_obj.price }}</td>
                    <td>{{ book_obj.pub_date|date:'Y-m-d' }}</td>
                    <td>{{ book_obj.publish.name }}</td>
                    <td>{{ book_obj.authors_name }}</td>
                    <td>
                        <!--通过循环获取到第三张表中的记录-->
{#                        {% for author_obj in book_obj.authors.all %}#}
{#                            {{ author_obj.name }}#}
{#                        {% endfor %}#}

                    </td>
                    <th><a href="/books/edit/{{ book_obj.pk }}/" class="btn btn-warning edit">编辑</a> &nbsp;&nbsp;
                    <th>
                        <a href="{% url 'book_del' book_obj.pk %}" class="btn btn-danger del">删除</a> &nbsp;
                        <button class="btn btn-warning btn_ajax" xx="{{ book_obj.pk }}">ajax删除</button>
                    </th>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="pull-right">{{ page_url|safe }}</div>

{% endblock %}

{% block js %}
    <script>

        $('.btn_ajax').click(function (){
            var del_id = $(this).attr('xx');  // 获取到button按钮的id
            var ths = $(this);
            swal({
                title: "你确定要删除吗？",
                text: "删除可就找不回来了哦！",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "我已经下定决心",
                cancelButtonText: "容我三思",
                closeOnConfirm: false
            },
            function () {
                $.ajax({
                    url: "/books/ajax_del/" + `${del_id}` + '/' ,
                    type: "get",
                    success: function (res) {
                        console.log(res)
                        if (res.status === 1) {
                            swal("删除成功!", "你可以准备跑路了！", "success");
                            ths.parent().parent().remove()  // 找到那一列的tr标签删除
                        } else {
                            swal("删除失败", "你可以再尝试一下！", "error")
                        }
                    }
                })
            });

        })
    </script>
{% endblock %}

 

 作者展示

 作者的头像和描述信息都保存在数据库中，都是可修改的

 

 

 首先看一下表关系

 

 

 

 直接上代码

首先 urls 

url(r'authors/$', views.authors, name='authors'),

 

 views.py

def authors(request):
    authors_query = models.Author.objects.all()
    return render(request, 'authors.html', {'authors_query': authors_query})

 

 authors.html

{% extends 'home.html' %}
{% load static %}
{% block title %}
    作者相关
{% endblock %}
{% include  '' %}
{% block css %}
    .bg{
    height: 550px;
    background: url("{% static 'image/mm.jpg' %}") no-repeat 100%; <!--背景的美女图片-->
    background-attachment: abs;

    }
    p{
       color: white; background-color: rgba(1,1,1,0.5); height: 235px;width: 520px;
    }
    b{
        color: black; font-size: 20px; display: block;
    }

{% endblock %}

{% block content %}
    <div class="bg">
        {% for author_obj in authors_query %}   <!--获取作者对象-->
            <div class="col-md-4">
                <img src="/statics/image/{{ author_obj.image }}" class="img-thumbnail ">

            </div>
            <div class="col-md-7">
            <p class="navbar-text" >
              <b>{{ author_obj.name }}</b>
                {{ author_obj.au_detail.description }}  <!--作者详细i信息-->
            </p>
            </div>
        {% endfor %}


    </div>


{% endblock %}

 

 上传图片并且上传完页面直接显示

其实图片是保存到本地文件夹中

 

 views.py

# 更新头像_图片上传
"""
可以指定上传的名字，若名字和作者名字相同，可以修改作者的头像
有待扩展： 实现保存的图片名字就是你输入的名字
"""
def upload(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        file_obj = request.FILES.get('avatar')  # 获取上传的图片对象
        avatar_name = file_obj.name
        author_query = models.Author.objects.filter(name=username)
        if author_query.exists():  # 如果上传的用户名和作者名相同，就为作者修改图片
            author_query.update(image=avatar_name)
        else:
            models.Image.objects.create(image=avatar_name)
        # 本地保存图片
        file = 'statics/image/' + avatar_name
        with open(file, 'wb') as f:
            for i in file_obj.chunks():
                f.write(i)
                return redirect('upload')
    image_all = models.Image.objects.all()
    return render(request, 'upload.html', {'image_all': image_all})

 

upload.html

{% extends 'home.html' %}

{% block title %}
    上传文件
{% endblock %}

{% block css %}
    .img-thumbnail{
        width: 183px; height: 256px;
    }
{% endblock %}
{% block content %}

    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" name="username" id="exampleInputName2" placeholder="Place Name">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Image</label>
            <input type="file" class="form-control" id="exampleInputEmail2" placeholder="xx.jpg">
        </div>
        <button id="btn" class="btn btn-default">Confirm</button>
    </form>
{% for image_obj in image_all %}
    <img src="/statics/image/{{ image_obj.image }}" alt="{{ image_obj.image }}" class="img-thumbnail" >
{% endfor %}

{% endblock %}

{% block js %}
    <script>
        $('#btn').click(function () {
            var username = $('[type="text"]').val()
            var file_obj = $("[type='file']")[0].files[0];

            var formdata = new FormData();
            formdata.append('username', username);
            formdata.append('avatar', file_obj); // request.FILSE.get('avatar')

            $.ajax({
                url: '/upload/',
                type: 'post',
                data: formdata,
                contentType: false,
                processData: false,
                success: function () {
                    alert('上传成功')
                }
            })
        })
    </script>
{% endblock %}