Django2.3 用Bootstrap美化页面并添加相应的功能_django bootstrap美化-优快云博客

用Bootstrap3就足够了，此处用Bootstrap的CSS样式就可以了
链接

1.美化主页

1.1 导入链接

此处只需要导入Bootstrap的CSS核心文件就可以了，此处是用CDN导入的，也可以本地导入，比较麻烦，以后再说吧。

1.2 页面头部和主体部分

page-header指定头部，page-body类指定主体部分。
直接从官网上粘贴过来的

1.3 添加分页按钮

navigation类添加分页按钮，等待一会实现

1.4 Button样式

把新建文章弄成一个按钮，button类。

index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
<div class="container page-header">
    <!--头部信息-->
    <h1>博客主页
        <small>by boy</small>
    </h1>
</div>
<div class="container page-body">
    <div class="body-main">
        {% for article in articles %}
        <div>
            <!--一个用于跳转到博客详细信息页面的链接-->
            <a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}</a>
            <p class="text-warning lead">{{ article.content }}</p>
        </div>
        {% endfor %}
    </div>
    <nav aria-label="Page navigation">
        <!--分页按钮-->
        <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>
    <a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}">新建文章</a>

</div>

</body>
</html>

2.美化详细页面

与美化表单差不多，就是添加了翻页的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Title</title>

</head>
<body>
<div class="container page-header">
    <h1>{{ article.title }}</h1>
</div>
<div class="container page-body">
    <div class="body-main">
        <p>{{ article.content }}</p>
    </div>
    <div>
        <!--跳转到修改表单-->
        <a class="btn btn-success" href="{% url 'blog:new_blog' article.id %}">修改文章</a>
        <!--一个用于返回主页的链接-->
        <a class="btn btn-info" href="{% url 'blog:index'  %}">返回主页</a>
    </div>
    <!--翻页-->
    <nav aria-label="...">
        <ul class="pager">
            <li><a href="{% url 'blog:detail'  previous_article.id %}  ">上一篇{{ previous_article.title }}</a></li>
            <li><a href="{% url 'blog:detail'  next_article.id %}  ">下一篇{{ next_article.title }}</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

3. 美化表单

3.1 把表单变得便于维护

原本的表单里又ifelse语句使得表单变得冗长
（1）把ifelse的范围缩小。
（2）DTL里如果发现不存在的变量默认为空，但是过滤器default:‘指定值’ 可以判断，如果变量不存在则把变量设置为指定的值，如果存在把变量就是原本的值。
这样表单变得易于维护了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{% url 'blog:index' %}" method="post">
        {% if article %}
        <p>修改文章</p>
        {% else %}
        <p>新建文章</p>
        {% endif %}
        {% csrf_token %}
        <input type="hidden" name="id" value="{{ article.id | default:'0'}}">
        <label>
            文章标题
            <input type="text" name="title" value="{{ article.title }}">
        </label>
        <br/>
        <label>
            文章内容
            <input type="text" name="content" value="{{ article.content }}"}>
        </label>
        <br/>
        <input type="submit" value="提交">
</form>

</body>
</html>

3.2 开始用Bootstrap美化表单

其实就是Bootstrap页面的东西复制粘贴调节得来的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
<form action="{% url 'blog:index' %}" method="post" class="form-horizontal">
    {% if article %}
    <p>修改文章:</p>
    {% else %}
    <p>新建文章:</p>
    {% endif %}
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ article.id | default:'0'}}">
    <!--文章标题-->
    <div class="form-group">
        <label for="title" class="col-sm-2 control-label">文章标题</label>
        <div class="col-sm-10">
            <input type="text" name="title" value="{{ article.title }}">
        </div>
    </div>
    <!--文章内容-->
    <div class="form-group">
        <label for="content" class="col-sm-2 control-label">文章内容</label>
        <div class="col-sm-10">
            <input type="text" name="content" value="{{ article.content }}" }>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>

</body>
</html>

4.1 修改detail.html

    <nav aria-label="...">
        <ul class="pager">
            <li><a href="{% url 'blog:detail'  previous_article.id %}  ">上一篇{{ previous_article.title }}</a></li>
            <li><a href="{% url 'blog:detail'  next_article.id %}  ">下一篇{{ next_article.title }}</a></li>
        </ul>
    </nav>

4.2 修改视图函数，传入参数

此处需要修改视图函数了，获取前后文章数据。

def detail(request, article_id):
    articles = Article.objects.all()
    # 如果是第一篇或者最后一篇，上一篇或者下一篇就是自己
    if article_id == str(1):
        # 如果是第一篇
        previous_article_id = str(article_id)
    else:
        previous_article_id = str(int(article_id) - 1)
    if article_id == str(len(articles)):
        # 如果是最后一篇
        next_article_id = str(article_id)
    else:
        next_article_id = str(int(article_id) + 1)
    # 分别获得当前文章、上一篇、下一篇文章
    article = Article.objects.get(pk=article_id)
    previous_article = Article.objects.get(pk=previous_article_id)
    next_article = Article.objects.get(pk=next_article_id)

    return render(request, "blog/detail.html", {"article": article,
                                                "previous_article": previous_article,
                                                "next_article": next_article,
                                                })

5. 添加分页的功能

5.1 分页模块介绍

https://docs.djangoproject.com/zh-hans/2.2/topics/pagination/ 官方文档
使用manage.py的shell功能

python manage.py shell
from django.core.paginator import Paginator

1.构造分页组对象。用来分页的列表，每页的元素数目
2.分页组的属性，方法。
3.分页的属性，方法。

# 等待分页的列表
objects=['one','two','three','four','five','three']
# 构造分页组对象
p=Paginator(objects,2)
# 分页组对象的属性
p.count #总的列表长度 6
p.num_pages # 分页页数 3
# 获得分页对象
page1=p.page(1)
page3=p.page(3)
# 分页对象的方法
# 1.判断分页前后
page1.has_previous()
page1.has_next()
page3.has_previous()
page3.has_next()
# 2.是否有其他页
Page.has_other_pages()
# 3. 这个页的起始终止索引
page3.start_index()# 5
page3.end_index() #6
# 4. 前面后面的页码
page1.next_page_number()# 2 
page3.previous_page_number()# 2
# 分页的属性
page3.number # 2

5.2 实现思路

url传递index/1表示第一页，index/2表示第二页，以此类推。
视图层向接受当前的页码并且传递向模板传递以下数据
（1）总的页数构成的页码，例如有四页，就传递[1,2,3,4]便于直接显示。
（2）当前页的页码。
（3）当前页的起始到终止元素构成的列表。
（4）上一页，下一页

5.3 模板部分

在最后的分页部分添加链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>Title</title>
</head>
<body>
<div class="container page-header">
    <!--头部信息-->
    <h1>博客主页
        <small>by boy</small>
    </h1>
</div>
<div class="container page-body">
    <div class="body-main">
        {% for article in articles %}
        <div>
            <!--一个用于跳转到博客详细信息页面的链接-->
            <a class="text-info h3" href="{% url 'blog:detail' article.id %}">{{ article.title }}</a>
            <p class="text-warning lead">{{ article.content }}</p>
        </div>
        {% endfor %}
    </div>
    <a class="btn btn-success" href="{% url 'blog:new_blog' 0 %}">新建文章</a>
    <div class="body-footer">
        <nav aria-label="Page navigation">
        <!--分页按钮-->
        <ul class="pagination">
            <li>
                <a href="{% url 'blog:index' previous_page %}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% for num in pages_num %}
            <li><a href="{% url 'blog:index' num %}">{{ num }}</a></li>
            {% endfor %}
            <li>
                <a href="{% url 'blog:index' next_page %}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    </div>
</div>

</body>
</html>

5.4 视图部分

获得当前分页的信息，并且进行修改

# Create your views here.
def index(request, page):  # 给定页数
    # 接收到HTTP的POST请求用来新建或修改博客成功
    # 指定page_num到分页的第几页
    if request.POST.get('title', '') != '':
        # 如果接收到了POST请求
        id = request.POST['id']
        title = request.POST['title']
        content = request.POST['content']
        if id == '0':
            # 如果新建博客
            Article.objects.create(title=title, content=content)
        else:
            # 如果是修改博客，从数据库里取出来，并且修改后存到数据库里
            edited_article = Article.objects.get(pk=id)
            edited_article.title = title
            edited_article.content = content
            edited_article.save()
    # 展示所有数据
    all_articles = Article.objects.all()
    paginator = Paginator(all_articles, 3)  # 此处每页指定元素数目
    pages_num = paginator.num_pages  # 一共有这么多页
    articles = paginator.page(page)  # 当前分页的文章
    # 如果是第一页或者最后一页，上一篇或者下一页就是自己
    if articles.has_previous():
        previous_page = str(int(page) - 1)
    else:
        previous_page = page
    if articles.has_next():
        next_page = str(int(page) + 1)
    else:
        next_page = page

    return render(request, 'blog/index.html', {'articles': articles,  # 当前分页的文章
                                               'pages_num': range(1, pages_num + 1),  # 从1到page_num的列表
                                               'current_page': page,  # 当前的页码
                                               'previous_page': previous_page,  # 下一页页码
                                               'next_page': next_page,
                                               })