Django個人部落格開發之資料建模與樣式設定

阿新 • • 發佈：2018-12-16

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進行了編號。

下一篇文章我們將用到這些資料，介紹如何對其進行分頁操作。

Django個人部落格開發之資料建模與樣式設定

1. 開發流程

2. 部落格開發需求分析與建模

3. 部落格樣式載入，模板渲染

Django個人部落格開發之資料建模與樣式設定

Django個人部落格開發之分頁與Vue分頁

Django個人部落格開發之網站釋出

Django個人部落格開發之高階優化表單、模型

Django個人部落格開發之高階優化路由、檢視

《Head First Python》第七章 Web開發之——資料建模 (電子書247-250)

個人部落格開發流程

我的個人部落格搭建之旅

用Django寫部落格（一）資料建模

Django部落格開發教程,Django快速開發個人blog

Django開發個人部落格網站——5、建立第一個app

Django開發個人部落格網站——22、部落格的最後完善

Django開發個人部落格網站——7、通過admin管理後臺

Django開發個人部落格網站——18、實現部落格的分類

SSH整合之個人部落格專案開發--知識點總結

Django開發個人部落格網站——10、分頁功能的實現

Django開發個人部落格網站——6、部落格網站資料庫的設計

用flask開發個人部落格（28）—— 利用unittest進行單元測試

Django搭建個人部落格：使用者的刪除

Django搭建個人部落格：使用者的註冊

Django個人部落格開發之資料建模與樣式設定

1. 開發流程

2. 部落格開發需求分析與建模

3. 部落格樣式載入，模板渲染

相關推薦