[实验] Django 分页展示功能的实现 (原生版)

注意:

文中的 python 系统名、mysite 项目和 movies 应用只是站主在本次操作中随意取的名称,读者可以根据自己的喜好换成任意别的名称

正文:

步骤一:系统环境要求

1) 服务器的系统需要是 openSUSE 15.2 版本
2) 服务器要关闭防火墙
3) 服务器系统要配置好可用的软件源(最好是软件数量最多的官方版本)
4) 服务器要能够连接外网

步骤二:安装 Django

2.1 安装 Python3

[root@python ~]# zypper -n install python3

(补充:在此次操作发生时,最新的 python 版本是 3.6.12)

2.2 创建并进入 Django 项目的目录

[root@python ~]# mkdir project
[root@python ~]# cd project

2.3 将 Django 项目的目录指定为 Django 环境

[root@python project]# python3 -m venv django_env

2.4 进入 Django 环境

[root@python project]# source django_env/bin/activate
(django_env) [root@python project]# pip install django

(补充:在此次操作发生时,最新的 Django 版本是 3.2)

步骤三:创建 mysite 项目

3.1 创建 mysite 项目

(django_env) [root@python project]# django-admin startproject mysite

3.2 mysite 项目的目录

3.2.1 安装 tree 目录显示软件
(django_env) [root@python project]# zypper -n install tree
3.2.2 显示 mysite 项目的目录
(django_env) [root@python project]# cd mysite
(django_env) [root@python mysite]# tree
.
├── manage.py
└── mysite
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

1 directory, 5 files
3.3.3 Django 项目目录介绍

1) mysite 此 Django 项目的容器
2) manage.py 命令行工具,与 Django 项目进行交互
3) mysite/__init__.py 空文件,通知 Python 此项目是 1 个 Python 包
4) mysite/settings.py 此 Django 项目的配置文件
5) mysite/urls.py 此 Django 项目的 URL 声明和 Django 的网站“目录”
6) mysite/wsgi.py WSGI 兼容 Web 服务器的入口

步骤四:创建 movies 应用

4.1 创建 movies 应用

(django_env) [root@python mysite]# django-admin startapp movies

4.2 movies 应用的目录

4.2.1 显示 movies 应用的目录
(django_env) [root@python mysite]# tree
.
├── manage.py
├── mysite
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── movies
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

3 directories, 13 files
4.2.2 Django 应用目录介绍

1) movies/app.py 此 Django 应用的容器
2) movies/__init__.py 空文件,通知 Python 此项目是 1 个 Python 包
3) movies/admin.py 此 Django 应用自带的后台管理相关的类
4) movies/app.py 此 Django 应用指定应用名的文件
5) movies/migrations.py 此 Django 应用通过 python 代码生成数据库表时里面会产生一些迁移文件
6) movies/models.py 可以在里面创建一些 Python 对象并通过这些对象在数据库里创建对应的表
7) movies/test.py 此 Django 应用的测试文档
8) movies/views.py 此 Django 应用的视图,接收前端数据,把数据传递给后端,响应相关页面

4.3 在 mysite 应用中导入 movies 应用

在 mysite/mysite/settings.py 中添加以下内容:

INSTALLED_APPS = [
    'movies',
]

步骤五:实现 movies 应用的层级多链接

创建 mysite/movies/urls.py 并添加以下内容:

......
#coding=utf-8
from django.conf.urls import url, include
from users.views import register

urlpatterns = [
......
    url(r'^movies/', include('movies.urls')),
]

(补充:这里以设置 /movies/ 链接对应 movies 应用的链接为例)

步骤六:搭建用于 Django 的 MariaDB 数据库环境

6.1 安装 MairaDB 数据库和客户端

(django_env) [root@python mysite]# zypper -n install mariadb mariadb-devel mariadb-server mariadb-client

6.2 创建用于 Django 的 MairaDB 的库、表、数据和用户并插入测试数据

6.2.1 进入 MairaDB 数据库
(django_env) [root@python mysite]# mysql -h 127.0.0.1 -p
6.2.2 创建用于 Django 的库
MariaDB [(none)]> create databases movies;

(补充:这里以创建 movies 库为例)

6.2.3 创建用于 Django 的表
6.2.3.1 进入用于 Django 到库
MariaDB [(none)]> use movies;

(补充:这里以进入 moives 库为例)

6.2.3.2 创建用于 Django 的表
MariaDB [movies]> create table movies(mid INT AUTO_INCREMENT,mname VARCHAR(100) NOT NULL,mdesc TEXT,mimg VARCHAR(120) NOT NULL,mlink VARCHAR(200) NOT NULL,PRIMARY KEY( mid ),UNIQUE( mname ));
Query OK, 0 rows affected (0.058 sec)


补充:这利以创建
1) mid 是 INT 字段,且自动增加
2) mname 是 VARCHAR 字段,长度为 100,且非空
3) mdesc 是 TEXT 字段,长度为 120,且非空
4) mlink 是 VARCHAR 字段,长度为 200,且非空
5) mid 为主键
6) mname 不能重复
为例

6.2.3.3 查看刚创建的表的表结构
MariaDB [movies]> desc movies; 
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| mid   | int(11)      | NO   | PRI | NULL    | auto_increment |
| mname | varchar(100) | NO   | UNI | NULL    |                |
| mdesc | text         | YES  |     | NULL    |                |
| mimg  | varchar(120) | NO   |     | NULL    |                |
| mlink | varchar(200) | NO   |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+
5 rows in set (0.001 sec)

(补充:这里以查看 movies 表的表结构为例)

6.2.4 创建用于 Django 的数据
6.2.4.1 进入用于 Django 到库
MariaDB [(none)]> use movies;

(补充:这里以进入 moives 库为例)

6.2.4.2 创建用于 Django 的数据
MariaDB [movies]> insert into movies (mname,mdesc,mimg,mlink) VALUES("Titanic","Accidents and love story, UHD, Dolby Vision,Dolby Atmos","eternalcenter.com/titanic/image","eternalcenter.com/titanic");
Query OK, 1 row affected (0.008 sec)
MariaDB [movies]> 
MariaDB [movies]> insert into movies (mname,mdesc,mimg,mlink) VALUES("World War","Science fiction, UHD, Dolby Vision,Dolby Atmos","eternalcenter.com/world-war/image","eternalcenter.com/world-war");
Query OK, 1 row affected (0.008 sec)
MariaDB [movies]> 
MariaDB [movies]> insert into movies (mname,mdesc,mimg,mlink) VALUES("Maleficent","Magic, UHD, Dolby Vision,Dolby Atmos","eternalcenter.com/maleficent/image","eternalcenter.com/maleficent");
Query OK, 1 row affected (0.012 sec)
MariaDB [movies]> 
MariaDB [movies]> insert into movies (mname,mdesc,mimg,mlink) VALUES("Cars","Animation, UHD, Dolby Vision,Dolby Atmos","eternalcenter.com/cars/image","eternalcenter.com/cars");
Query OK, 1 row affected (0.011 sec)
MariaDB [movies]> 
MariaDB [movies]> insert into movies (mname,mdesc,mimg,mlink) VALUES("News","Animation, UHD, Dolby Vision,Dolby Atmos","eternalcenter.com/news/image","eternalcenter.com/news");
Query OK, 1 row affected (0.011 sec)

(补充:这里以符合 movies 表结构的规范,随意向 movies 插入 5 条数据为例)

6.2.4.3 查看刚刚创建的数据
MariaDB [movies]> select * from movies;
+-----+------------+---------------------------------------------------------+------------------------------------+------------------------------+
| mid | mname      | mdesc                                                   | mimg                               | mlink                        |
+-----+------------+---------------------------------------------------------+------------------------------------+------------------------------+
|   1 | Titanic    | Accidents and love story, UHD, Dolby Vision,Dolby Atmos | eternalcenter.com/titanic/image    | eternalcenter.com/titanic    |
|   3 | World War  | Science fiction, UHD, Dolby Vision,Dolby Atmos          | eternalcenter.com/world-war/image  | eternalcenter.com/world-war  |
|   4 | Maleficent | Magic, UHD, Dolby Vision,Dolby Atmos                    | eternalcenter.com/maleficent/image | eternalcenter.com/maleficent |
|   5 | Cars       | Animation, UHD, Dolby Vision,Dolby Atmos                | eternalcenter.com/cars/image       | eternalcenter.com/cars       |
|   6 | News       | Animation, UHD, Dolby Vision,Dolby Atmos                | eternalcenter.com/news/image       | eternalcenter.com/news       |
+-----+------------+---------------------------------------------------------+------------------------------------+------------------------------+
5 rows in set (0.000 sec)

(补充:这里以查看 movies 表里的所有数据为例)

6.2.5 创建用于 Django 的用户
6.2.5.1 创建用于 Django 到用户
MariaDB [(movies)]> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;

(补充:这里以创建 root 用户,密码是 password 为例)

6.2.5.2 刷新权限
MariaDB [(movies)]> flush privileges;

6.3 退出 MariaDB 数据库

MariaDB [(none)]> exit

6.4 重启 MariaDB 数据库

(django_env) [root@python mysite]# systemctl restart mariadb

步骤七:实现连接 MariaDB 数据库

7.1 安装 Django 连接 MariaDB 的模块

(django_env) [root@python mysite]# pip3 install hexdump
(django_env) [root@python mysite]# pip3 install pymysql

7.2 在 mysite 应用中添加 Django 连接 MariaDB 的模块

在 mysite/mysite/__init__.py 中添加以下内容:

import pymysql
pymysql.install_as_MySQLdb()

7.3 在 mysite 应用中设置连接到 MariaDB 数据库

将 mysite/mysite/settings.py 中的以下内容:

......
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}
......

修改为:

......
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'movies',
        'HOST': '127.0.0.1’,
        'PORT': '3306',
        'USER': 'root',
        'PASSWORD': 'password',
    }
}
......


补充:这里以
1) 使用的库是 movies
2) 使用的服务器是 127.0.0.1
3) 使用的端口是 3306
4) 使用的用户是 root
5) 使用的密码是 password
为例

步骤八:根据数据库表结构生成 Django 数据库模型

(django_env) [root@python mysite]# python3 manage.py inspectdb>movies/models.py

步骤九:实现分页展示功能

9.1 在 movies 应用中添加 1 个分页展示功能的 HTML 模板

创建 mysite/movies/templates/movies/index.html 并添加以下内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*avoid collapse after floating*/
        .clearfix{
                zoom:1;
        }
        .clearfix:after{
                content: "";display: block;visibility: hidden;line-height: 0;clear: both;
        }

        body,div{
            margin:0 auto;
        }

        div{
            border:1px solid gray;
            width:750px;
            text-align: center;
        }

        ul{
            list-style-type: none;
            display: inline-block;
        }


        #header li{
            float: left;
            margin-left:10px;
            font-size:16px;
            font-family: 'Microsoft elegant black';
            color: #666666;

        }
        #header li:hover{
            cursor: pointer;
            background:blue;
            color: white;
        }

        #content li{
            float: left;
            display: inline;
            margin-right:15px;
            text-align: center;
            height:225px;
            overflow: hidden;
            padding-top:10px;
            padding-bottom:5px;

        }
        #content h1{
            font-size:14px;
            margin:0;

        }

        .tip{
            display: block;
            font-size:12px;
        }

       .h1,.tip{
            width:110px;
           text-align: center;
        }
        
        #content ul{
            /*remove the inner and outer margins of UL*/
            margin:0;
            padding:0;

        }
    </style>

</head>
<body>
    <div id="header"  class="clearfix">
        <ul class="clearfix">
            <li>home page</li>
            <li>record</li>
            <li>love</li>
            <li>ethic</li>
            <li>comic</li>
            <li>science fiction</li>
            <li>history</li>
            <li>warfare</li>
            <li>short film</li>
            <li>natural</li>
        </ul>
    </div>
    <div id="content" >
        <ul class="clearfix">
            {% for movie in movies %}
                <li>
                    <a href="{{ movie.mlink }}"><img src="{{ movie.mimg }}"/></a>
                    <h1 class="h1">{{ movie.mname }}</h1>
                    <span class="tip">{{ movie.mdesc }}</span>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div>
         <a href="/movies/?page={{ prepage }}">prepage</a>
         <a href="/movies/?page={{ nextpage }}">nextpage</a>
    </div>
</body>
</html>

(补充:这里主要以生成一个展示每条数据的 mlink 字段、mimg 字段、mname 字段 和 mdesc 字段的表格,且每条数据就是一个表格,并为前一页和后一页添加一个链接为例)

9.2 在 movies 应用中添加 1 个网页返回值的模块并从数据库里读取全部数据

在 mysite/movies/views.py 中添加以下内容:

......
from .models import Movies
import math
......
def pageandinfo(pages,size=3):
    # size here refers to the number of display data on each page
    
    pages = int(pages)
    # force num to integer

    totalrecords = Movies.objects.count()
    # get the total number of data from the database

    totalpages = int(math.ceil(totalrecords*1.0/size))
    # the function of the math.cell parameter is to add one to the integer if the number of decimals exceeds the integer part,example:match.ceil (1.1) produces 2.0

    if pages < 1:
       pages = 1
    if pages > totalpages:
       pages = totalpages
   # if num is less than 1, it is equal to 1. If num is greater than totalrecords, it is equal to totalrecords

    movies = Movies.objects.all()[((pages-1)*size):(pages*size)]
   # in all data, every num page displays (num-1)*size data to (num)*size data

    return movies,pages

def movies(request):

    pages = request.GET.get('page',1)
    # receive request parameter pages

    movies,n = pageandinfo(pages)
    # through the pages parameter, the paging request is processed

    prepage = n-1
    # calculate the page number of the previous page

    nextpage = n+1
    # calculate the page number of the next page
    
    return render(request,'movies/index.html',{'movies':movies,'prepage':prepage,'nextpage':nextpage})


补充:这里主要以:
1) 设置 pageandinfo 模块,返回 movies 和 pages 两个变量,其中 movies 变量是 (pages-1)size) 到 (pagessize) 条 Movies 模块里的数据
2) 设置 movies 模块并返回 movies/index.html
从 movies/index.html 中获取 page 值
调用 pageandinfo 模块通过 page 值计算出 movies 值
给予 movies/index.html movies、prepage 和 nextpage 变量,同时提前设置了对应的值并赋予给它们
为例

9.3 在 movies 应用中添加 1 个链接并设置对应的模块

创建 mysite/movies/urls.py 并添加以下内容:

#coding=utf-8
from django.conf.urls import url
from movies.views import movies

urlpatterns = [
    url(r'^$', movies),
]

(补充:这里以设置空链接链接对应 movies 模块为例)

步骤十:启动 Django 服务

(django_env) [root@python mysite]# python3 manage.py runserver

步骤十一:测试分页展示功能

1) 打开浏览器输入以下网址:

http://127.0.0.1:8000/movies/

2) 可以看到对应的展示模版有 3 条数据并且可以向下和向上翻页