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。