Django个人博客开发之数据建模与样式设定

1. 开发流程

学习这个之前你得需要一定的Django基础，这个Django博客项目也是对你得Django基础的一定检验和总结。同时来一次完整的Django开发体验，接下来看看我们整个开发需要经过哪些流程，大致分为这几个方面：
在这里插入图片描述

2. 博客开发需求分析与建模

需求分析
本次项目完成的是一个博客的项目，博客主要目的是为了分享个人的技术，进行技术积累。
主要是发布文章日志。但是也需要有评论和互动。需要完成以下功能点：
1、文章的发布、展示、修改、删除。
2、文章评论
3、读者互动
4、图片管理

概要设计
我们对上面的四个需求进行详细的分析
文章列表页
1.按类型划分
2.搜索
3.分页

文章详情页
1.文章排版

文章评论
1.评论发布
2.评论回复

图片管理
1.文章图片展示管理
2.照片展示管理

3. 博客样式加载，模板渲染

完成分析之后，我们开始创建我们的Django项目
开发版本：Python 3.5、Django 1.8.2、pillow、Django-ckeditor、pycharm

创建项目
在你准备好的地方开始创建你的项目，我这里选择的是E:\djangoExample\example_8>
命令：django-admin startproject OurBlog
切入项目，创建功能，app
命令：python manage.py startapp Article
创建模板和静态文件存放的位置
安装我们博客项目依赖模块
如果python有两个版本需要主要分清pip2和pip3

pip install django-ckeditor
pip install pillow

数据建模
数据建模:数据建模就是用数据库描述上面分析的博客需求，然后形成对应的表和关系，数据建模是web开发至关总要的一个环节，一个优秀的模型是web开发成功的一大半。
通常的web开发会使用数据库语句，在数据库当中搭建模型，这样开发很直观，但是无疑增加了开发的难度，Django采用的是orm（数据库映射）用Python类描述数据库，然后通过orm将描述映射到数据当中。Django的模型文件是应用(APP)的models.py
首先我们来编写OurBlog/Article/models.py

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Author(models.Model):
    gender_choice = (
        ("M", "Male"),
        ("F", "Female")
    ) #定义一个选项
    name = models.CharField(max_length = 32,verbose_name = "作者姓名")
    #都可以为空
    #“” blank
    #None null
    age = models.IntegerField(verbose_name = "作者年龄", blank = True, null = True)
    #我们可以通过choices参数讲CharField的类型变成可选项
    gender = models.CharField(max_length = 2,choices = gender_choice,verbose_name = "作者性别", blank = True, null = True)
    email = models.EmailField(verbose_name = "作者邮箱")
    phone = models.CharField(max_length = 11,verbose_name = "作者电话",  blank = True, null = True)
    photo = models.ImageField(verbose_name = "作者头像", upload_to = "images/author")

    def __str__(self):
        return "作者：%s"%self.name


class Classify(models.Model):
    label = models.CharField(max_length = 32,verbose_name = "分类标签")
    #富文本编辑器的文本字段
    description = RichTextUploadingField(verbose_name = "分类描述")

    def __str__(self):
        return "标签：%s"%self.label

class Comment(models.Model):
    content = RichTextUploadingField(verbose_name = "评论内容")
    content_name = models.CharField(max_length=32, verbose_name="用户姓名")
    agree = models.IntegerField(verbose_name = "评论点赞")
    time = models.DateTimeField(verbose_name = "评论时间")

    def __str__(self):
        return "[%s] 评论 %s"%(self.content_name,self.content)

class Picture(models.Model):
    label = models.CharField(max_length=32, verbose_name="图片名称")
    image = models.ImageField(verbose_name = "图片链接",upload_to = "images/picture")
    description = RichTextUploadingField(verbose_name = "图片描述")

    classify = models.ForeignKey(to = Classify, verbose_name = "图片分类")
    #评论可以为空
    comment = models.ForeignKey(to= Comment, verbose_name="图片评论",blank = True,null = True)

    def __str__(self):
        return "图片名称: %s"%self.label


class Article(models.Model):
    title = models.CharField(max_length = 32, verbose_name = "文章标题")
    time = models.DateField(verbose_name = "文章发表日期")

    description = RichTextUploadingField(verbose_name = "文章描述")
    content = RichTextUploadingField(verbose_name = "文章内容")

    picture = models.ImageField(verbose_name = "文章图片",upload_to = "images/article")

    author = models.ForeignKey(Author, verbose_name="文章地图")
    classify = models.ManyToManyField(Classify, verbose_name="文章分类")
    comment = models.ForeignKey(to= Comment, verbose_name="文章评论",blank = True,null = True)

    def __str__(self):
        return "文章: %s"%self.title

完成模型的定义之后，接着进行项目的配置的修改
OurBlog/OurBlog/settings.py

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
#这个是直接指向我们项目根目录的路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
#......
# Application definition
#安装我们使用的应用
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Article',
    'ckeditor', #富文本编辑器
    'ckeditor_uploader' #富文本编辑器的上传功能
)
#......
#配置模板文件
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR,"template") #模板路径
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'OurBlog.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.8/ref/settings/#databases
#数据库配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.8/topics/i18n/
#语言与时区
LANGUAGE_CODE = 'zh-hans' #语言
TIME_ZONE = 'Asia/Shanghai' #时区
USE_I18N = True
USE_L10N = True
USE_TZ = False #禁止采用0时区时间

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/

#静态文件配置
STATIC_URL = '/static/' #静态文件路由
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,"static"), #注意单元素元组加，
) #静态文件路径
STATIC_ROOT = os.path.join(BASE_DIR,"static/ckeditor")#收集其他APP的静态文件到指定目录下

#媒体文件配置，我们上传图片使用
MEDIA_URL =  '/media/' #媒体路由不可以和静态路由相同
MEDIA_ROOT = os.path.join(BASE_DIR,"static")

#ckeditor的配置
CKEDITOR_UPLOAD_PATH = "uploads/" #ckeditor上传文件的路径
CKEDITOR_IMAGE_GACKEND = "pillow"

然后进行ckeditor的路由指出。
OurBlog/OurBlog/urls.py

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    #......
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

接着进行模型后台的安装
OurBlog/Article/admin.py

from django.contrib import admin
from Article.models import Article,Author,Classify,Picture,Comment

class ArticleAdmin(admin.ModelAdmin):
    search_fields = ["title","time"] #添加查询条件
#安装模型到Django自带的后台
admin.site.register(Article,ArticleAdmin)
admin.site.register(Author)
admin.site.register(Classify)
admin.site.register(Picture)
admin.site.register(Comment)

最后进行数据库的同步
1、校验配置是否正确

python manage.py validate

在这里插入图片描述
2、生成数据库语句
一样在博客目录下执行这句命令

E:\Python\OurBlog>python manage.py makemigrations
Migrations for 'Article':
  0001_initial.py:
    - Create model Article
    - Create model Author
    - Create model Classify
    - Create model Comment
    - Create model Picture
    - Add field author to article
    - Add field classify to article
    - Add field commant to article

3、完成数据库同步

E:\Python\OurBlog> python manage.py syncdb
G:\Python35\lib\site-packages\django\core\management\commands\syncdb.py:24: Remo
vedInDjango19Warning: The syncdb command will be removed in Django 1.9
  warnings.warn("The syncdb command will be removed in Django 1.9", RemovedInDja
ngo19Warning)

Operations to perform:
  Synchronize unmigrated apps: messages, ckeditor_uploader, ckeditor, staticfile
s
  Apply all migrations: Article, contenttypes, auth, sessions, admin
Synchronizing apps without migrations:
  Creating tables...
    Running deferred SQL...
  Installing custom SQL...
Running migrations:
  Rendering model states... DONE
  Applying Article.0001_initial... OK
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying sessions.0001_initial... OK
创建超级用户
	 You have installed Django's auth system, and don't have any superusers defined.
Would you like to create one now? (yes/no): yes
Username (leave blank to use 'bian'): admin
Email address: [email protected]
Password:
Password (again):
Superuser created successfully.

4、然后进行静态文件的收集

E:\Python\OurBlog>python manage.py collectstatic
	
You have requested to collect static files at the destination
location as specified in your settings:

    E:\djangoExample\example_8\OurBlog\static\ckeditor

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes
…….
Copying 'G:\Python35\lib\site-packages\ckeditor_uploader\static\ckeditor\ckedito
r_uploader\admin_base.css'

1199 static files copied to 'E:\djangoExample\example_8\OurBlog\static\ckeditor'

上面的步骤完成之后，我们就可以进行页面的编写，加载，和渲染了，在工作当中，除非是个人项目，一般情况下，当进行Django开发的时候，前台的页面也就具备了。在这个项目当中，我们采用一个准备好的模板进行演示：
我这里给大家提供一个我自己用的模板链接，提取码：8vjz。博客模板OurBlog
1、模板渲染的第一步，是打开模板文件，进行页面特征的查看，对结构相同的页面构建base结构。
我们演示的是一款中国风格的博客模板，当然，大家也可以自己定义或者下载自己喜欢的模板。
2、模板渲染的第一步，是打开模板文件，进行页面特征的查看，对结构相同的页面构建base结构。
我们演示的是一款中国风格的博客模板，当然，大家也可以自己定义或者下载自己喜欢的模板。
模板文件如下：
在这里插入图片描述
比对四个页面的效果发现：
顶部:

尾部：

效果一样。所以根据这个我们搭建自己的base页面。在这里要注意的是这套模板的编码是gb2312,我们需要进行修改。修改完成定制base页面
首先将静态文件迁入项目的static目录
在这里插入图片描述
然后根据前端样式分析，编写base.html（手生的同学可以复制一个页面过来，进行修改）

3、然后开始继承base模板开始定义指出页面
首先定义视图文件

def index(request):
    return render(request,"index.html")

def myArticle(request):
    return render(request,"myArticle.html")

def myPicture(request):
    return render(request,"myPicture.html")

def aboutMe(request):
    return render(request,"aboutMe.html")

def connectMe(request):
    return render(request,"aboutMe.html")

4、进行基本的样式修改，我们以aboutMe页面为例

{% extends "base.html" %}

{% block title %}
    关于我们
{% endblock %}

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

{% block content %}
  <div class="container">
    <div class="con_content">
      <div class="about_box">
        <h2 class="nh1"><span>您现在的位置是：<a href="/" target="_blank">网站首页</a>>><a href="#" target="_blank">信息浏览</a></span><b>个人简介</b></h2>
        <div class="f_box">
          <p class="a_title">个人简介</p>
          <p class="p_title"></p>
          <!--  <p class="box_p"><span>发布时间：2017-07-07 15:12:42</span><span>作者：唐孝文</span><span>来源：稽查支队</span><span>点击：111056</span></p>--> 
          <!-- 可用于内容模板 --> 
        </div>
        <ul class="about_content">
          <p> 人生就是一个得与失的过程，而我却是一个幸运者，得到的永远比失去的多。生活的压力迫使我放弃了轻松的前台接待，放弃了体面的编辑，换来虽有些蓬头垢面的工作，但是我仍然很享受那些熬得只剩下黑眼圈的日子，因为我在学习使用Photoshop、Flash、Dreamweaver、ASP、PHP、JSP...中激发了兴趣，然后越走越远....</p>
          <p><img src="/static/images/01.jpg"></p>
          <p>“冥冥中该来则来，无处可逃”。 </p>
        </ul>

      </div>
    </div>
    <div class="blank"></div>
  </div>
  <!-- container代码 结束 -->
  {% endblock %}

5、完成路由指出

from django.conf.urls import include, url
from django.contrib import admin
from Article.views import *

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    url(r'^index/', index),
    url(r'^myArticle/', myArticle),
    url(r'^myPicture/', myPicture),
    url(r'^aboutMe/', aboutMe),
    url(r'^connectMe/', connectMe),
]

6、通过base页完成前端路由的修整,这样，我们的网站就可以点进选择了。

 	<div  class="navigation">
        <ul class="menu">
         <li><a href="/index/">网站首页</a></li>
             <ul>
                <li><a href="/aboutMe/">个人简介</a></li>
                <li><a href="/myPicture/">个人相册</a></li>
              </ul>
           </li>
           <li><a href="/myArticle/">我的博客</a>
              <ul>
                <li><a href="/myArticle/">个人博客</a></li>
                <li><a href="/myArticle/">技术博客</a></li>
              </ul>
            </li>
            <li><a href="/myPicture/">我的照片</a></li>
            <li><a href="/aboutMe/">关于我</a>
            <li><a href="/aboutMe/">给我留言</a> </li>
          </ul>
        </div>
      </nav>

大家下载一个网站模板，就可以根据以上步骤来构建自己的个人博客了！
为了我们后面的学习，我们需要在admin管理后台中article表中添加文章,添加步骤如下：
在这里插入图片描述

点击保存后，你的数据就添加到数据库中了。我这里都是批量添加的，对其title进行了编号。

下一篇文章我们将用到这些数据，介绍如何对其进行分页操作。