叶觉的Django之旅【09-django模型系统综合——简易博客】

功能分析

在这里插入图片描述
本实例制作的博客将有四个页面：

博客主页：提供两个页面的链接
文章添加页：用于添加文章与修改文章
博客列表：用于展示数据库中所有文章
文章浏览页：展示每篇文章的内容

模板准备

models.py Blog 表

# 博客表
class Blog(models.Model):
    blog_title = models.CharField(max_length=50)
    blog_content = models.TextField()

    def __str__(self):
        return 'blog_title:{}'.format(self.blog_title)

base.html （基类模板，被四个页面继承），可以定制 title、link、body 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}页面{% endblock %}</title>

    {% block link %}
    
    {% endblock %}
</head>
<body>

{% block body %}

{% endblock %}

</body>
</html>

index.html （主页），继承base模板，使用了 /little_blog.css，使用 url 标签进行跳转

{% extends 'little_blog/base.html' %}
{% load static %}

{% block title %}
    博客主页
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}

{% block body %}
    <div class="top-nav">
        <div>
            <a href="{% url 'blog_add' %}"><span>写文章</span></a> | <a href="{% url 'blog_list' %}"><span>博客列表</span></a>
        </div>
    </div>
{% endblock %}

blog_add.html （文章添加页面），同时作为添加和编辑的页面，通过判断edit是否为True来决定进入edit页面还是add页面。当进入edit页面时，将携带指定的文章标题与文章内容，修改后跳转至文章列表页。当进入add页面时，title与content都为空，添加完成后跳转回添加页面。

{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
    博客列表
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}

{% block body %}
    {% include 'little_blog/msg.html' %}

    <div class="blog_list_main_box">
        <h2>博客列表</h2> <br>
        {% for blog in blog_lists %}
            <div class="blog_list_articles">
                <a href="{% url 'blog_detail' blog.id %}">
                    <span>{{ blog.blog_title }}</span>
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div class="blog_list_operate">
                    <a href="{% url 'edit' blog.id %}"><span>编辑</span></a> | <a href="{% url 'delete' blog.id %}"><span>删除</span></a>
                </div>
            </div>
        {% endfor %}

    </div>
{% endblock %}

blog_llist.html （文章列表页），通过对应视图函数取得数据库所有的文章并展示。在对应文章行中，提供了编辑与删除的功能。使用编辑功能跳转至上面的添加页面，使用删除功能将在删除后重新定向回本页面。

{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
    博客列表
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}

{% block body %}
 
    <div class="blog_list_main_box">
        <h2>博客列表</h2> <br>
        {% for blog in blog_lists %}
            <div class="blog_list_articles">
                <a href="{% url 'blog_detail' blog.id %}">
                    <span>{{ blog.blog_title }}</span>
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <div class="blog_list_operate">
                    <a href="{% url 'edit' blog.id %}"><span>编辑</span></a> | <a href="{% url 'delete' blog.id %}"><span>删除</span></a>
                </div>
            </div>
        {% endfor %}

    </div>
{% endblock %}

blog_detail.html （文章详情页），文章的标题与内容展示。

{% extends 'little_blog/base.html' %}
{% load static %}

{% block title %}
    {{ blog_title }}
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}

{% block body %}
    {% include 'little_blog/msg.html' %}
    <h1>{{ blog_item.blog_title }}</h1>
    <p>{{ blog_item.blog_content }}</p>
{% endblock %}

msg.html （包含标签的小模板），主要对某些视图函数返回的成功信息做了处理。在context中如果含有 msg 参数，则将其 alert() 出来。在需要的页面中使用 {% include ‘little_blog/msg.html’ %} 引入。

{% if msg %}
    <script>alert('{{ msg }}')</script>
{% endif %}

四个基本页面函数

from django.shortcuts import render, redirect
from .models import Blog
# Create your views here.

# 主页视图
def index(request):
    return render(request, 'little_blog/index.html')


# 添加页面
def blog_add(request):
    if request.method == 'GET':
        return render(request, 'little_blog/blog_add.html')
    elif request.method == 'POST':
        blog_title = request.POST.get('article_title')
        blog_content = request.POST.get('article_content')

        Blog.objects.get_or_create(blog_title=blog_title, blog_content=blog_content)

        return render(request, 'little_blog/blog_add.html', context={
            'msg': '添加成功',
        })


# 列表页面
def blog_list(request):
    blog_lists = Blog.objects.all()
    return render(request, 'little_blog/blog_list.html', context={
        'blog_lists': blog_lists,
    })


def blog_detail(request, blog_id):
    blog_item = Blog.objects.filter(id=blog_id)
    return render(request, 'little_blog/blog_detail.html', context={
        'blog_item': blog_item[0],
    })


# 删除
def delete(request, blog_id):
    Blog.objects.filter(id=blog_id).delete()
    return redirect('blog_list')


# 编辑
def edit(request, blog_id):
    if request.method == 'GET':
        blog_item = Blog.objects.filter(id=blog_id)
        return render(request, 'little_blog/blog_add.html', context={
            'edit': True,
            'blog_item': blog_item[0],
        })
    elif request.method == 'POST':
        blog_title = request.POST.get('article_title')
        blog_content = request.POST.get('article_content')

        Blog.objects.filter(id=blog_id).update(blog_title=blog_title, blog_content=blog_content)

        return redirect('blog_detail', blog_id=blog_id)

新点速提

request，HttpRequest请求对象在django.http木块定义的API。在这里用到了以下功能

通过 request 来判断用户通过哪种方法进行访问，if request.method == ‘GET’
通过 request 来获取 form 表单提交的数据 blog_title = request.POST.get(‘article_title’)

模板预览

主页
在这里插入图片描述
文章添加页与编辑页

博客列表页

文章内容页

附录：为了好看一丢丢用的CSS

/*主页*/
a{
    text-decoration: none;
    color: #000;
}
a:hover{
    color: #6390ff;
}
.top-nav{
    position: relative;
    margin: auto;
    width: 1280px;
    height: 70px;
    box-shadow: 0 0 5px;
}
.top-nav div{
    position: absolute;
    top: 0;left: 0;bottom: 0;right: 0;
    margin: auto;
    width: 180px;
    height: 33px;
    text-align: center;
}
/*博客添加页面*/
.article-add-main-box{
    font-family: 楷体;
    position: relative;
    top: 50px;
    margin: auto;
    width: 689px;
    min-height: 434px;
    box-shadow: 0 0 3px;
    text-align: center;
}
.article-add-main-box input{
    position: relative;
    width: 669px;
    height: 40px;
    border: 1px solid #cccccc;
    margin: auto;
    top: 10px;
    font-size: 30px;
}

.article-add-main-box textarea{
    position: relative;
    top: 20px;
    width: 669px;
    min-height: 263px;
    font-size: 15px;
    color: #424242;
}

.article-add-main-box .submit{
    position: relative;
    width: 675px;
    height: 40px;
    border: 1px solid #cccccc;
    margin: auto;
    top: 30px;
    font-size: 30px;
}

.article-add-main-box .submit:hover{
    background: #ff0207;
    color: #cccccc;
    transition: all 0.7s;
}

/*文章列表*/
.blog_list_main_box{
    position: relative;
    width: 518px;
    min-height: 668px;
    box-shadow: 0 0 5px;
    margin: auto;
    text-align: center;
}
.blog_list_main_box h2{
    margin: auto;
}
.blog_list_articles{
    width: 460px;
    text-align: left;
    margin: 3px auto auto;
    padding: 3px;
}
.blog_list_articles:hover{
    box-shadow: 0 0 2px;
    background: #eaffbd;
}
.blog_list_operate{
    position: relative;
    float: right;
}

ylgb庸了个白

发布了24 篇原创文章 · 获赞 18 · 访问量 1万+

私信关注

叶觉的Django之旅【09-django模型系统综合——简易博客】

目录

功能分析

模板准备

四个基本页面函数

新点速提

模板预览

附录：为了好看一丢丢用的CSS

猜你喜欢