django入门项目实战3.0

目标：“快”速入门、掌握django使用的基本方式方法

一、整体设计

1. 主体功能

实现个人博客的基本功能：列表、详情、快速查询、分类查找、其他信息展示。

2. 表结构设计

• 文章类别表：category

from django.db import models


class Category(models.Model):
    name = models.CharField(\'Blog Category\', max_length=100)
    index = models.IntegerField(default=1, verbose_name=\'Sequence\')

    class Meta:
        verbose_name = \'Blog Category\'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

• 文档标签：tag

from django.db import models


class Tag(models.Model):
    name = models.CharField(\'Tag\', max_length=100)

    class Meta:
        verbose_name = \'Tag\'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.name

• 文章表：article

import uuid as uuid
from django.contrib.auth.models import User
from django.db import models
from ckeditor.fields import RichTextField
from blog.models.tag import Tag
from blog.models.category import Category
from ckeditor_uploader.fields import RichTextUploadingField


class Article(models.Model):
    title = models.CharField(\'Title\', max_length=70)
    summary = RichTextField(\'Summary\', max_length=200, blank=True, config_name=\'editor_config\')
    category = models.ForeignKey(Category, on_delete=models.DO_NOTHING, verbose_name=\'Category\', blank=True, null=True)
    tags = models.ManyToManyField(Tag, verbose_name=\'Tag\', blank=True)
    img = models.ImageField(upload_to=\'media/img/%Y/%m/%d/\', verbose_name=\'Image\', blank=True, null=True)
    body = RichTextUploadingField(config_name=\'editor_config\')
    user = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name=\'作者\')
    views = models.PositiveIntegerField(\'Views\', default=0)
    created_time = models.DateTimeField(\'Create Date\', auto_now_add=True)
    modified_time = models.DateTimeField(\'Update Date\', auto_now=True)
    uid = models.UUIDField(default=uuid.uuid4, editable=False)

    class Meta:
        verbose_name = \'Article\'
        verbose_name_plural = \'Article\'

    def __str__(self):
        return self.title

二、系统搭建

1. 代码结构及开发环境创建

asgiref==3.3.1
Django==3.1.7
django-ckeditor==6.0.0
django-js-asset==1.2.2
Pillow==8.1.2
pytz==2021.1
sqlparse==0.4.1
uuid==1.30

三、后台实现

1. Admin注册模型

from django.contrib import admin
from .models.category import Category
from .models.tag import Tag
from .models.article import Article


admin.site.register(Article)
admin.site.register(Tag)
admin.site.register(Category)

2. 集成ckeditor

• 常用配置

# ckeditor
CKEDITOR_CONFIGS = {
    \'editor_config\': {
        \'skin\': \'moono-lisa\',
        \'toolbar_Basic\': [
            [\'Source\', \'-\', \'Bold\', \'Italic\']
        ],
        \'toolbar_Full\': [
            [\'Styles\', \'Format\', \'Bold\', \'Italic\', \'Underline\', \'Strike\', \'SpellChecker\', \'Undo\', \'Redo\'],
            [\'Link\', \'Unlink\', \'Anchor\'],
            [\'Image\', \'Flash\', \'Table\', \'HorizontalRule\'],
            [\'TextColor\', \'BGColor\'],
            [\'Smiley\', \'SpecialChar\'],
            [\'CodeSnippet\'], [\'Source\'],

        ],
        \'toolbar\': \'Full\',
        \'height\': 291,
        \'width\': 835,
        \'filebrowserWindowWidth\': 940,
        \'filebrowserWindowHeight\': 725,
        \'extraPlugins\': \'codesnippet\',
    }
}

MEDIA_URL = \'/media/\'
MEDIA_ROOT = Path(BASE_DIR, \'media\')

CKEDITOR_UPLOAD_PATH = \'upload/\'

• url设置

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path(\'ckeditor/\', include(\'ckeditor_uploader.urls\'))
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 字段类型的定义

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

summary = RichTextField(\'Summary\', max_length=200, blank=True, config_name=\'editor_config\')
body = RichTextUploadingField(config_name=\'editor_config\')

3. 效果展示

以上操作完成之后基本完成了对admin界面的处理，可以看一下效果了：

四、前端界面

1. 模版的使用

{% extends "base.html" %}
{% block content %}
	// something
{% endblock %}

2. 静态文件加载

STATIC_URL = \'/static/\'
STATICFILES_DIRS = [
    BASE_DIR / "static",
    \'/var/www/static/\',
    ]

<link rel="shortcut icon" href="/static/images/favicon.ico">
<link rel="stylesheet" href="{% static \'css/blog-home.css\' %}">
<link rel="stylesheet" href="{% static \'vendor/bootstrap/css/bootstrap.min.css\' %}">

3. 前后端数据传输

# context
def index(request):
    post_list = Article.objects.all().order_by("-id")
    context = _get_context(request=request, post_list=post_list)
    return render(request, \'index.html\', context)

4. 分页

from django.core.paginator import Paginator

post_list = Article.objects.all().order_by("-id")
paginator = Paginator(post_list, 10)

5. 富文本前端展示

<div>
    {{ article.body|safe }}
</div>

五、源码仓库

Github Repo