環境

Python 3.6

Spyder

Anaconda3 64bit

Django 2.0

安裝Django

pip install django==2.0

創建Django項目

創建名爲django_introduction的項目。

django-admin startproject django_introduction

運行項目

python manage.py runserver

項目配置文件：settings.py
項目路由配置文件：urls.py
項目管理文件：manage.py

創建django應用

創建名爲blog的應用，路徑應該切換到項目所在路徑，即I:\1實驗室\其他\DjangoTest\django_introduction。

pyhton manage.py startapp blog

views.py：視圖處理的位置；
models.py：定義應用模型的位置；
admin.py：定義Admin模塊管理對象的位置；
apps.py：聲明應用的位置；
tests.py：編寫應用測試用例的位置；
urls.py：（自行創建）管理應用路由的位置。

創建模型

創建博客文章模型，即設計並實現數據表。

#blog/models.py
class 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()
    #文章摘要
    breif_content = models.TextField()
    #文章內容
    content = models.TextField()
    #文章發佈日期
    publish_date = models.DateTimeField(auto_now = True)

模型變更生成文件。

python manage.py makemigrations

運行遷移文件將內容同步到數據庫。

python manage.py migrate

模型註冊到Admin。

#blog/admin.py
from .models import Article

admin.site.register(Article)

新建文章

進入django shell環境。

pyhton manage.py shell

創建文章（數據庫插入）。

from blog.models import Article

a = Article()
a.title = "test django shell article"
a.breif_content = "This is django shell article's breif content."
a.content = "This is django shell article's content."

a.save() #保存插入的數據到數據庫

articles = Article.objects.all() #獲取全部文章
article = articles[0]
print(article.title)

Django Admin模塊

創建管理員用戶，用戶名和密碼自己定。

python manage.py createsuperuser

登錄管理頁面，得先運行項目。需要將Article加入admin纔可以通過管理頁面對文章進行增刪改查。

http://127.0.0.1/8000/admin

文章名稱顯示

以文章名稱顯示在index.html。

#blog/models.py
def __str__(self):
	return self.title

實現博客數據返回頁面

編輯blog/view.py和blog/urls.py。

Bootstrap實現靜態博客頁面

Bootstrap前端框架：https://www.bootcss.com/

分頁功能（detail.html中上一篇與下一篇）的實現：

    <div>
        <nav aria-label="...">
          <ul class="pager">
            <li><a href="/blog/detail/{{ previous_article.article_id }}">上一篇：{{ previous_article.title }}</a></li>
            <li><a href="/blog/detail/{{ next_article.article_id }}">下一篇：{{ next_article.title }}</a></li>
          </ul>
        </nav>
    </div>

分頁功能（index.html）的實現：

        <div class="body-feeter">
            <div class="col-md-4 col-md-offset-3">
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="/blog/index?page={{previous_page}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    {% for num in page_num %}
                    <li><a href="/blog/index?page={{num}}">{{ num }}</a></li>
                    {% endfor %}
                    <li>
                      <a href="/blog/index?page={{next_page}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>
        </div>

Django模板系統

基本語法：

#變量
<body>{{aaa}}</body>
#循環
{% for i in list %},{% endfor %}
#分支
{% if xxx%}, {% else %}, {% endif %}

注意：以此模板編輯的html若以靜態網頁方式訪問，則顯示爲文本內容。

文章詳情頁面的跳轉

render()的應用。

    ...
    return render(request, "blog/detail.html",
                  {
                          "curr_article": curr_article,
                          "section_list": section_list,
                          "previous_article": previous_article,
                          "next_article": next_article
                  })

以文章id的方式實現文章詳情頁面的跳轉。

注意：<int:article_id>中，int後不能加空格。

#blog/urls.py
path('detail/<int:article_id>',blog.views.get_detail_page)

分頁功能

#導入Django分頁組件的包
from django.core.paginator import Paginator
	
#GET
<a href="/blog/index?page={{previous_page}}" aria-label="Previous">
	
#實例化(列表，每頁的數目)
p = Paginator(list,3)
#獲取列表數
p.count
#獲取頁數
p.num_pages
#獲取第一頁
p1 = p.page(1)
#獲取每頁的元素
p1.object_list
#是否有前一頁（記得此處有括號，返回True/False）
p1.has_previous()
#是否有後一頁
p1.has_next()

項目結構

主要代碼

django_introduction/settings.py（改變部分）

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    #myApp
    'blog.apps.BlogConfig'
]

django_introduction/urls.py

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

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

blog/admin.py

from django.contrib import admin

# Register your models here.

from .models import Article

admin.site.register(Article)

blog/apps.py

from django.apps import AppConfig

class BlogConfig(AppConfig):
    name = 'blog'

blog/models.py

from django.db import models

# Create your models here.

class Article(models.Model):
    #文章的唯一ID
    article_id = models.AutoField(primary_key = True)
    #文章標題
    title = models.TextField()
    #文章摘要
    breif_content = models.TextField()
    #文章內容
    content = models.TextField()
    #文章發佈日期
    publish_date = models.DateTimeField(auto_now = True)
    
    #以文章標題顯示在後臺管理中
    def __str__(self):
        return self.title

blog/urls.py

# -*- coding: utf-8 -*-
"""
Created on Wed Feb 26 16:45:00 2020

@author: Administrator
"""
from django.urls import path, include

import blog.views

urlpatterns = [
    path('hello_world',blog.views.hello_world),
    path('content',blog.views.article_content),
    path('index',blog.views.get_index_page),
#    path('detail',blog.views.get_detail_page)
    path('detail/<int:article_id>',blog.views.get_detail_page)
]

blog/views.py

from django.shortcuts import render

# Create your views here.

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

from django.core.paginator import Paginator

def hello_world(request):
    return HttpResponse("Hello World!")

#實現博客數據的返回
def article_content(request):
    article = Article.objects.all()[0]
    title = article.title
    breif_content = article.breif_content
    content = article.content
    article_id = article.article_id
    publish_date = article.publish_date
    
    return_str =  "article_id: %s, title: %s, breif_content: %s, content: %s, " \
                  "publish_date: %s" % (article_id, title, breif_content, content, publish_date)
    
    return HttpResponse(return_str)
    
def get_index_page(request):
    all_article = Article.objects.all()
    
    top5_article_list = Article.objects.order_by("-publish_date")[:5]
    
    page = request.GET.get('page')
    if page:
        page = int(page)
    else:
        page = 1
    print("page param: ", page)
    
    paginator = Paginator(all_article, 2)
    page_num = paginator.num_pages
    print("page num: ", page_num)
    page_article_list = paginator.page(page)
    if page_article_list.has_next():
        next_page = page + 1
    else:
        next_page = page
    if page_article_list.has_previous():
        previous_page = page - 1
    else:
        previous_page = page
        
    return render(request, "blog/index.html", 
                  {
                          "article_list": page_article_list,
                          "page_num": range(1,page_num+1),
                          "curr_page": page,
                          "previous_page": previous_page,
                          "next_page": next_page,
                          "top5_article_list": top5_article_list
                  })
    
def get_detail_page(request, article_id):
    all_article = Article.objects.all()
#    curr_article = Article.objects.all()[0]
    curr_article = None
    previous_index = 0
    next_index = 0
    previous_article = None
    next_article = None
    for index,article in enumerate(all_article):
        if index == 0:
            previous_index = 0
            next_index = index + 1
        elif index == len(all_article) - 1:
            previous_index = index - 1
            next_index = index
        else:
            previous_index = index - 1
            next_index = index + 1
                
        if article.article_id == article_id:
            curr_article = article
            previous_article = all_article[previous_index]
            next_article = all_article[next_index]
            break
        
    section_list = curr_article.content.split("\n")
    return render(request, "blog/detail.html",
                  {
                          "curr_article": curr_article,
                          "section_list": section_list,
                          "previous_article": previous_article,
                          "next_article": next_article
                  })

blog/templates/blog/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Web框架初體驗</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container page-header">
        <h1>Django Web框架初體驗
            <small> —— 憤怒的軟綿綿 </small>
        </h1>
    </div>
    <div class="container page-body">
        <div class="col-md-9" role="main">
            <div class="body-main">
                {% for article in article_list %}
                <div>
                    <h2><a href="/blog/detail/{{article.article_id}}">{{ article.title }}</a></h2>
                    <p>
                        {{ article.breif_content }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-md-3" role="complementary">
            <div>
                <h2>最新文章</h2>
                {% for article in top5_article_list %}
                <h4><a href="/blog/detail/{{article.article_id}}">{{ article.title }}</a></h4>
                {% endfor %}
            </div>
        </div>
        <div class="body-feeter">
            <div class="col-md-4 col-md-offset-3">
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="/blog/index?page={{previous_page}}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    {% for num in page_num %}
                    <li><a href="/blog/index?page={{num}}">{{ num }}</a></li>
                    {% endfor %}
                    <li>
                      <a href="/blog/index?page={{next_page}}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>

blog/templates/blog/detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Web框架初體驗</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container page-header">
        <h1>{{ curr_article.title }}</h1>
    </div>
    <div class="container body-main">
        <div>
            {% for section in section_list %}
            <p>
                {{ section }}
            </p>
            {% endfor %}
        </div>
    </div>
    <div>
        <nav aria-label="...">
          <ul class="pager">
            <li><a href="/blog/detail/{{ previous_article.article_id }}">上一篇：{{ previous_article.title }}</a></li>
            <li><a href="/blog/detail/{{ next_article.article_id }}">下一篇：{{ next_article.title }}</a></li>
          </ul>
        </nav>
    </div>
</body>
</html>

運行頁面

參考資料

開發及內容：https://www.imooc.com/learn/1110

Bootstrap：https://www.bootcss.com/

有緣看到的小夥伴，給人家點個讚唄~麼麼噠❤

Django Web框架初體驗——以博客爲例

環境