[实验] 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 服务器的入口

步骤四:创建 users 应用

4.1 创建 users 应用

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

4.2 users 应用的目录

4.2.1 显示 users 应用的目录
(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 应用的视图,接收前端数据,把数据传递给后端,响应相关页面

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

5.1 在 mysite 应用中添加 1 个链接并链接 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')),
]

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

5.2 在 mysite 应用中导入 movies 应用

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

......
INSTALLED_APPS = [
......
    'movies',
]
......

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

6.1 安装 MairaDB 数据库和客户端

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

6.2 安装 Django 连接 MariaDB 的模块

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

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

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

......
import pymysql
pymysql.install_as_MySQLdb()

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

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

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

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

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

6.4.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.4.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.4.4 创建用于 Django 的数据
6.4.4.1 进入用于 Django 到库
MariaDB [(none)]> use movies;

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

6.4.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.4.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.4.5 创建用于 Django 的用户
6.4.5.1 创建用于 Django 到用户
MariaDB [(movies)]> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION;

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

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

6.5 退出 MariaDB 数据库

MariaDB [(none)]> exit

6.6 重启 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 nowpage %}
                <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=1">Home</a>
        <!—show home page—>

        {% if nowpage.has_previous %}
            <a href="/movies/?page={{ nowpage.previous_page_number }}">prepage</a>
        {% endif %}
        <!--show previous page when current page exists-->

        {% for tnum in pagelist %}
            {% if currentpage == tnum %}
                <a href="/movies/?page={{ tnum }}" style="font-size: 28px;color:red;">{{ tnum }}</a>&emsp;
                <!--font size and red when page number equals current page-->
            {% else %}
                <a href="/movies/?page={{ tnum }}">{{ tnum }}</a>&emsp;
            {% endif %}          
        {% endfor %}
        <!--displays the page numbers of five pages before and after the current page-->

        {% for num in items.page_range %}
            {% if currentpage == tnum %}
                <a href="/movies/?page={{ tnum }}" style="font-size: 28px;color:red;">{{ tnum }}</a>&emsp;
                <!--when the number of page numbers equals the current page, the font becomes large and red-->
            {% else %}
                <a href="/movies/?page={{ tnum }}">{{ tnum }}</a>&emsp;
            {% endif %}
        {% endfor %}
        <!--show all page numbers-->

        {% if nowpage.has_next %}
            <a href="/movies/?page={{ nowpage.next_page_number }}">nextpage</a>
        {% endif %}
        <!--display the next page when it exists-->

        <a href="/movies/?page={{ items.num_pages }}">Last</a>
        <!—show end page—>
    </div>
</body>
</html>


补充:这里主要以
1) 生成 1 个展示每条数据的 mlink 字段、mimg 字段、mname 字段 和 mdesc 字段的表格,且每条数据就是 1 个表格
2) 显示首页和尾页并为其设置对应的链接
3) 在当前页的前提下,如果有前 1 页或后 1 页,则显示出来并为其设置对应的链接
4) 显示当前页前后 5 页页码并为其设置对应的链接
5) 显示全部页码并为其设置对应的链接
为例

9.2 在 movies 应用中添加一个网页返回值的模块并实现所需功能

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

......
from .models import Movies
from django.core.paginator import Paginator,PageNotAnInteger,EmptyPage
import math
......

def movies(request):

    page = request.GET.get('page',1)

    page = int(page)
    #Convert page to an integer

    movies = Movies.objects.all()
    #Read all data

    items = Paginator(movies,3)
    #Creating a pager object
 
    try:
        nowpage = items.page(page)
        #Get current page number
    except PageNotAnInteger:
        nowpage = items.page(1)
        #When page is not a numeric value, the data of the first page is returned
    except EmptyPage:
        nowpage = items.page(items.num_pages)
        #Returns the data of the last page when the number of pages corresponding to the page value does not exist

    beginpage = (page-int(math.ceil(10.0/2)))
    if beginpage < 1:
        beginpage = 1
    #Let beginpage be equal to the current page. When beginpage is less than 5, it is equal to 1

    endpage = beginpage + 9
    if endpage > items.num_pages:
        endpage = items.num_pages
    #When endpage is equal to beginpage plus 9, if endpage is greater than the maximum number of pages, it is equal to the maximum number of pages

    if endpage <= 10:
        beginpage = 1
    else:
        beginpage = endpage - 9
    #Let begingpage equal to endpage minus 9

    pagelist = range(beginpage,endpage+1)
    #Pagelist is from beginpage to endpage to array. The result of range (1,3) is [1,2] instead of [1,2,3]

    return render(request,'movies/index.html',{'items':items,'nowpage':nowpage,'pagelist':pagelist,'currentpage':page})


补充:这里主要以:
1) 设置 movies 模块并返回 movies/index.html
2) 从 movies/index.html 中获取 page 值,且当 page 值不存在时,其默认值为 1,并将其强行转换成整数
3) 这里的 movies = Movies.objects.all() 是指将 Movies 模块对应数据库里的所有数据导入给 movies 变量
4) 调用 Paginator 模块将 movies 变量生成每页为 3 条数据的分页的 items 对象,并将当前页数据赋予给 nowpage 变量
5) 调用 PageNotAnInteger 模块当页码不是 1 个数值时返回页码是 1 的数据
6) 调用 EmptyPage 模块当页码不存在时返回最后 1 页的数据
7) 利用逻辑将 pagelist 变量设置成当前页前后 5 页的页码
8) 给予 movies/index.html items、nowpage、pagelist 和 currentage 变量,同时将对应的值赋予给它们
为例

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

创建 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 条数据
3) 可以看到首页和尾页的链接
4) 可以看到前 1 页和后 1 页的链接(如果有的话)
5) 可以看到当前页前后 5 页的链接(如果有的话)
6) 可以看到所有页的链接