Python Web開發:Django+BootStrap實現簡單的博客項目


創建blog的項目結構

關於如何創建一個Django項目,請查看【Python Web開發:使用Django框架創建HolleWorld項目】

創建blog的數據模型

創建一個文章類

所有開發都是數據為基礎,首先我們再blog app下的models.py模型中Article,因為是基於Django MVC模式開發,Article類需要繼承models.Model類

from django.db import models

# Create your models here.


class Article(models.Model):
    # 文章id 主鍵
    article_id = models.AutoField(primary_key=True)
    # 標題
    title = models.TextField()
    # 作者
    author = models.TextField()
    # 內容
    content = models.TextField()
    # 文章發布日期
    publish_date = models.DateTimeField(auto_now=True)

    # 重構str方法,獲取文章時返回文章標題
    def __str__(self):
        return self.title

配置數據庫

在項目settings.py配置文件中,可以找到數據庫連接的相關配置

# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

保存數據模型

定義完成數據模型后,我們需要將數據模型結構保存到數據庫中,這時候可以使用Django的makemigrations命令創建數據模型的遷移文件,然后通過migrate命令將數據模型同步到數據庫中,這樣數據庫中就含有了包含Article數據模型的數據庫表了

Django Shell

Django Shell其實和其他Shell一樣,只是他是基於Django環境,使用Django Shell命令我們可以再開發過程中快捷方便的進行一些項目處理、測試驗證等等
下面就使用Django Shell為Article類添加一條數據到數據庫中

(venv) D:\Projects\Python\blog_solution>python manage.py shell
Python 3.7.3 (v3.7.3:ef4ec6ed12, Mar 25 2019, 22:22:05) [MSC v.1916 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from blog.models import Article
>>> a=Article()
>>> a.title='三字經'
>>> a.author='王應麟'
>>> a.content='人之初,性本善。性相近,習相遠。 苟不教,性乃遷。教之道,貴以專。 昔孟母,擇鄰處。子不學,斷機杼。 竇燕山,有義方。教五子,名俱揚。 養不教,父之過。教不嚴,師之惰
。 子不學,非所宜。幼不學,老何為。 玉不琢,不成器。人不學,不知義。 為人子,方少時。親師友,習禮儀。 香九齡,能溫席。孝於親,所當執。'
>>> a.save()
>>> articles=Article.objects.all()
>>> print(articles)
<QuerySet [<Article: 三字經>]>

Django Admin

除了通過Django Shell的方式外,還可以通過Django Admin后台管理數據,Django Admin是Django框架自帶的一個后台數據管理工具。通過python manage.py runserver啟動服務后,打開瀏覽器進入Admin后台管理,默認地址:http://127.0.0.1:8000/admin/login/

但此時我們沒有登錄用戶,怎么辦?可以通過'createsuperuser'創建管理員賬號

然后還需要將Article數據模型注冊到后台管理

現在我們再次登錄后台管理,就可以看到Article相關的數據列表

將后台數據展示到前台頁面

首先定義一個獲取數據的方法

from blog.models import Article
from django.http import HttpResponse


def get_article_list(request):
    articles = Article.objects.all()
    ret_str = ''
    for artcle in articles:
        a_str = str(artcle.article_id) + ' ' + artcle.title + ' ' + \
            artcle.author + ' ' + str(artcle.publish_date) + ' ' + artcle.content
        ret_str =ret_str+ a_str
    return HttpResponse(ret_str)

然后添加相關的路由配置,先添加應用下的路由(再blog包下添加urls.py文件),


from django.urls import path
import blog.views

urlpatterns = [
    path('articles', blog.views.get_article_list)
]

還需要添加項目路由中的配置(urls.py)

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
]

BootStrap優化數據展示

BootStrap官方地址:https://getbootstrap.com/

創建視圖模板

在blog包中創建templates文件夾,在templates下再創建一個對應的blog文件夾,然后創建一個html頁面,引入bootstrap框架,並在視圖中創建對應的方法獲取渲染頁面的數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 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">

    <!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container page-header">
    <h1>Django+BootStrap實現博客項目教程
        <small>—— 高效養豬倌</small>
    </h1>
</div>
<div class="container page-body">
    <div class="col-md-9" role="main">
        <div class="body-main">
            {% for article in articles %}
            <div>
                <h2>
                    <a href="/blog/detail/{{article.article_id}}">{{article.title}}</a>
                    <small>作者:{{article.author}}創建日期:{{article.publish_date}}</small>
                </h2>
                <p>{{article.content}}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="col-md-3" role="complementary">
        <div>
            <h2>推薦文章</h2>
            {% for article in articles %}
            <h4><a href="/blog/detail/{{article.article_id}}">{{article.title}}</a></h4>
            {% endfor %}
        </div>
    </div>
</div>
</body>
</html>
def get_index_page(request):
    articles = Article.objects.all()
    return render(request, 'blog/index.html',
                  {
                      'articles': articles
                  })
###跳轉到詳情頁 和上面一樣,創建一個detail.html頁面,並引入bootstrap框架,然后再視圖代碼中創建對應的渲染方法 ``` def get_detail_page(request, id): articles = Article.objects.all() article = None for a in articles: if a.article_id == id: article = a break return render(request, 'blog/detail.html', { 'article': article }) pass ```


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM