django基礎 （三）博客頁面開發以及修改文章的功能實現

頁面概要 ：博客主頁面 博客文章內容頁面 博客撰寫頁面

主頁面內容： 文章標題列表，超鏈接； 發表博客按鈕（超鏈接）

列表編寫思路： 取出數據庫中所有文章對象；
將文章對象們打包成列表，傳遞到前端；
前端頁面把文章以標題超鏈接的形式逐個列出

模板For循環
{% for xx in xxs %}
HTML語句
{% endfor %}

這裏，我們在前兩章所做項目基礎上完成博客頁面開發；
編輯views.py

def index(request):
    articles = models.Article.objects.all() # 獲取所有, all()返回的是查詢的一個集合
    return render(request, 'index.html', {'articles': articles})

編輯index.html

<h1>
    <a href="">新文章</a>
</h1>
{% for article in articles %}
    <a href="">{{ article.title }}</a>
    <br/>
{% endfor %}

運行：
pycharm裏可以之間按alt+shift+x來運行項目。

博客文章頁面： 頁面內容 標題； 文章內容； 修改文章按鈕（超鏈接）；

編輯views.py，get用戶點擊文章標題返回的pk

def article_page(request, article_id):
    article = models.Article.objects.get(pk=article_id)
    return render(request, 'article_page.html', {'article': article})

製作文章頁面html，創建article_page.html

<h1>{{ article.title }}</h1>
<br/><br/>
<a href="">修改文章</a>

配置url
打開應用下的urls.py
用到正則匹配數字，在django2.x中需要用到re_path。
django 1.x

url(r'^article/(?P<article_id>[0-9]+)$', views.article_page),

django 2.x

from django.urls import re_path
re_path('article/(?P<article_id>[0-9]+)', views.article_page),

django中的超鏈接

超鏈接模板地址

• href後面是模板地址；
• template中可以用 “{% url ‘app_name:url_name’ param %}”
• 其中app_name 和 url_name都在url中配置

再配URL，使主頁面點擊文章title可跳轉至相應頁面：
打開項目根目錄下的urls.py，修改第二條；

path('index/', include('newApp.urls', namespace='newApp')),    # django 1.x

path('index/', include(('newApp.urls', 'newApp'), namespace='newApp')),    # django 2.x

打開應用下的urls.py

re_path('article/(?P<article_id>[0-9]+)', views.article_page, name='article_page'),

index.html，添加{{article.title}}的href

<a href="{% url 'newApp:article_page' article.id %}">{{ article.title }}</a>

博客撰寫頁面

頁面內容：標題編輯欄、文章內容編輯區域、提交按鈕；
創建edit_page.html

{#url： 首先尋找項目目錄下的urls.py下的namespace爲newApp，然後是指引過去的urls.py的name，用冒號表示兩者關係#}
<form action="{% url 'newApp:edit_action' %}" method="post">

    <!-- POST請求的表單內需要加上下面這句話，否則將禁止訪問 -->
    {% csrf_token %}

    <label>文章標題
        <input type="text" name="title">
    </label>
    <br/>
    <label>文章內容
        <input type="text" name="content">
    </label>
    <br/>
    <input type="submit">
</form>

編輯views函數，url基礎配置；

def edit_page(request):
    return render(request, 'edit_page.html')

def edit_action(request):

    # 獲取用戶提交的POST請求中name="title"，name="content"的信息
    title = request.POST.get('title', 'TITLE')
    content = request.POST.get('content', 'CONTENT')

    # 將用戶提交的信息存儲到數據庫中
    models.Article.objects.create(title=title, content=content)

    # 提交後返回至主頁
    articles = models.Article.objects.all()
    return render(request, 'index.html', {'articles': articles})


path('edit/', views.edit_page, name='edit_page'),
path('edit/action', views.edit_action, name='edit_action'),

編輯響應函數：使用requestPOST[‘參數名’]獲取表單數據；再存儲至數據庫；

def edit_page(request):
    return render(request, 'edit_page.html')

def edit_action(request):

    # 獲取用戶提交的POST請求中name="title"，name="content"的信息
    title = request.POST.get('title', 'TITLE')
    content = request.POST.get('content', 'CONTENT')

    # 將用戶提交的信息存儲到數據庫中
    models.Article.objects.create(title=title, content=content)

    # 提交後返回至主頁
    articles = models.Article.objects.all()
    return render(request, 'index.html', {'articles': articles})

主頁配置撰寫頁面的超鏈接

<a href="{% url 'newApp:edit_page' %}">寫文章</a>

實現修改文章的功能

思路： 新文章爲空，修改文章有內容； 修改文章頁面有文章對象； 文章的ID

編輯views響應函數：

def edit_page(request, article_id):
    if str(article_id) == '0':
        return render(request, 'edit_page.html')
    article = models.Article.objects.get(pk=article_id)
    return render(request, 'edit_page.html', {'article': article})

def edit_action(request):

    # 獲取用戶提交的POST請求中name="title"，name="content"的信息
    title = request.POST.get('title', 'TITLE')
    content = request.POST.get('content', 'CONTENT')

    # 添加了修改文章功能，設置提交按鈕的判斷
    # 根據id判斷是新建文章返回至主頁，修改文章的提交返回至文章頁面
    article_id = request.POST.get('article_id', '0 ')
    if article_id =='0':

        # 將用戶提交的信息存儲到數據庫中
        models.Article.objects.create(title=title, content=content)

        # 提交後返回至主頁
        articles = models.Article.objects.all()
        return render(request, 'index.html', {'articles': articles})

    article = models.Article.objects.get(pk=article_id)
    article.title = title
    article.content = content
    article.save()
    return render(request, 'article_page.html', {'article': article})

編輯html頁面：

{# edit_page.html #}
{#url： 首先尋找項目目錄下的urls.py下的namespace爲newApp，然後是指引過去的urls.py的name，用冒號表示兩者關係#}
<form action="{% url 'newApp:edit_action' %}" method="post">

    <!-- POST請求的表單內需要加上下面這句話，否則將禁止訪問 -->
    {% csrf_token %}
{#    頁面上點擊‘修改文章’，判斷如果有article，將title的value設置成相應的title，沒有則爲空#}
    {% if article %}
        <input type="hidden" name="article_id" value="{{ article.id }}">
        <label>文章標題
            <input type="text" name="title" value="{{ article.title }}">
        </label>
        <br/>
        <label>文章內容
            <input type="text" name="content" value="{{ article.content }}">
        </label>
        <br/>

    {% else  %}
        <input type="hidden" name="article_id" value="0">
        <label>文章標題
            <input type="text" name="title">
        </label>
        <br/>
        <label>文章內容
            <input type="text" name="content">
        </label>
        <br/>
    {% endif %}

    <input type="submit">
</form>



{#article_page.html#}
<h1>{{ article.title }}</h1>
<br/><br/>
<h3>{{ article.content }}</h3>
<a href="{% url 'newApp:edit_page' article.id %}">修改文章</a>



{#index.html#}
<h1>
    <!-- 設置新文章url爲0 -->
    <a href="{% url 'newApp:edit_page' 0 %}">寫文章</a>
</h1>
<br/>
{% for article in articles %}
    <a href="{% url 'newApp:article_page' article.id %}">{{ article.title }}</a>
    <hr/>
{% endfor %}

url配置：

re_path('edit/(?P<article_id>[0-9]+)', views.edit_page, name='edit_page'),

OK。