Django个人博客搭建6-对文章进行增删查改

目录
Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块
1. 增加文章
在article中新建forms.py文件, 写入如下代码:

from django import forms
from . models import ArticlePost

# 写文章表单类
class ArticlePostForm(forms.ModelForm):
   class Meta:
       # 指明数据模型来源
       model = ArticlePost
       # 定义表单包含的字段
       fields = ('title', 'body', )

第二部修改article/views.py 增加处理问文章的请求

from django.shortcuts import render, redirect
from django.http import HttpResponse
# 引入刚才定义的ArticlePostForm
from .forms import ArticlePostForm
from django.contrib.auth.models import User

def article_create(request):
   # 判断用户是否提交数据
   if request.method == "POST":
       # 将提交时数据赋值到表单实例中
       article_post_form = ArticlePostForm(data=request.POST)
       if article_post_form.is_valid():
           new_article = article_post_form.save(commit=False)
           new_article.author = User.objects.get(id=1)
           new_article.save()
           return redirect('article:article_list')
       else:
           return HttpResponse("表单内容有误,请重新填写")

   else:
       article_post_form = ArticlePostForm()
       context = {'article_post_form': article_post_form}
       return render(request, 'article/create.html', context)

在templates/article/中创建create.html:

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
写文章
{% endblock title %}
{% block  content %}
   <div class="container">
       <div class="col-12">
           <br>
               <form method="post" action=".">
                   <!-- Django中需要POST数据的地方都必须有csrf_token -->
                   {% csrf_token %}
                   <!-- 文章标题 -->
                   <div class="form-group">
                       <!-- 标签 -->
                       <label for="title">文章标题</label>
                       <!-- 文本框 -->
                       <input type="text" class="form-control" id="title" name="title">
                   </div>
                   <!-- 文章正文 -->
                   <div class="form-group">
                       <label for="body">文章正文</label>
                       <!-- 文本区域 -->
                       <textarea type="text" class="form-control" id="body" name="body" rows="12"></textarea>
                   </div>
                   <!-- 提交按钮 -->
                   <button type="submit" class="btn btn-primary">完成</button>
               </form>
           </div>
       </div>
   </div>
{% endblock content %}

修改article/urls.py:

# 引入path
from django.urls import path
from . import views
# 正在部署的应用的名称
app_name = 'article'
urlpatterns = [
    # path函数将url映射到视图
    path('article-list/', views.article_list, name='article_list'),
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
    path('article-create/', views.article_create, name="article_create"),
]

然后再地址栏输入:http://127.0.0.1:8000/article/article-create/ 就可以访问增加文章的页面了

新增一篇文章测试一下:



可以看到都正常显示了
我们何以修改header.html新增写文章入口:

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <div class="container">
   <!-- 导航栏商标 -->
   <a class="navbar-brand" href="#">我的博客</a>
   <!-- 导航入口 -->
   <div>
     <ul class="navbar-nav">
       <!-- 条目 -->
       <li class="nav-item">
         <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
       </li>
       <!-- 增加这里 -->
         <li class="nav-item">
             <a class="nav-link" href="{% url 'article:article_create' %}">写文章</a>
         </li>
         <!-- 增加这里 -->
     </ul>
   </div>
 </div>
</nav>

我们打开文章列表首页:

点击写文章我们就能进入新增文章页面了

2. 删除文章
首先在article/views.py中新增article_delete函数:

def article_delete(request, id):
   article = ArticlePost.objects.get(id=id)
   article.delete()
   return redirect('article:article_list')

增加article/urls.py中删除文章路由

# 引入path
from django.urls import path
from . import views
# 正在部署的应用的名称
app_name = 'article'
urlpatterns = [
   # path函数将url映射到视图
   path('article-list/', views.article_list, name='article_list'),
   path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
   path('article-create/', views.article_create, name="article_create"),
   path('article-delete/<int:id>', views.article_delete, name="article_delete"),
]

最后在detail.html中增加删除文章的链接:

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
   文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
   <div class="container">
       <div class="row">
           <h1 class="col-12 mt-4">{{ article.title }}</h1>
           <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
           <!-- 修改这里-->
           .<a href="{% url "article:article_delete" article.id %}">删除文章</a>
           <!-- 修改这里-->
           <div class="col-12">
               <p>{{ article.body|safe }}</p>
           </div>
       </div>
   </div>
{% endblock content %}

最后我们查看效果:

点击删除文章后可以看见文章列表中没有了对应的文章:

就证明删除成功了
接下来我们应该增加确认删除的弹窗, 我们可以运用Layer弹窗组件
Layer下载
下载完成后将含有layer.js的文件夹复制到static里:

完成后是这样的
然后我们在base.html中引入Layer:

<!-- 载入静态文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
   <!-- 网站采用的字符编码 -->
   <meta charset="utf-8">
   <!-- 预留网站标题的位置 -->
   <title>{% block title %}{% endblock %}</title>
   <!-- 引入bootstrap的css文件 -->
   <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
   <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
</head>
<body>
   <!-- 引入导航栏 -->
   {% include 'header.html' %}
   <!-- 预留具体页面的位置 -->
   {% block content %}{% endblock content %}
   <!-- 引入注脚 -->
   {% include 'footer.html' %}
   <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
   <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
   <script src="{% static 'popper/popper-1.14.4.js' %}"></script>
    <!-- 在这里引入layer -->
   <script src="{% static 'layer/layer.js' %}"></script>
   <!-- 在这里引入layer -->
   <!-- 引入bootstrap的js文件 -->
   <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>

layer插件依赖jquery才能正常工作，因此要在jquery的后面引入layer。
然后改写模板文件detail.html:

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
   文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
   <div class="container">
       <div class="row"
           <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
           .<a href="#" onclick="confirm_delete()">删除文章</a>
           <div class="col-12">
               <p>{{ article.body|safe }}</p>
           </div>
       </div>
   </div>
   <script>
       //删除文章的函数
       function confirm_delete() {
       layer.open({
           //窗口标题
           title: "确认删除？",
           //正文
           content: "确认删除这篇文章吗?",
           //点击确定按钮后调用回调函数
           yes: function (index, layero) {
               location.href='{% url "article:article_delete" article.id %}'
           }

       })
   }
   </script>
{% endblock content %}

然后测试删除文章

可以看到增加了确认弹窗
3. 修改文章
首先在article/views.py中增加修改文章的视图函数article_update()

def article_update(request, id):
   # 获取文章对象
   article = ArticlePost.objects.get(id=id)
   if request.method =="POST":
       article_post_form = ArticlePostForm(data=request.POST)
       if article_post_form.is_valid():
           article.title = request.POST['title']
           article.body = request.POST['body']
           article.save()

           return redirect("article:article_detail", id=id)
       else:
           return HttpResponse("表单内容有误,请重新填写")


   else:
       article_post_form = ArticlePostForm()
       context = { 'article': article, 'article_post_form': article_post_form}
       return render(request, 'article/update.html', context)

编写update.html模板:

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
    修改文章
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-12">
                <br>
                <form method="post" action=".">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="title">文章标题</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ article.title }}">

                    </div>
                    <div class="form-group">
                        <label for="body">文章正文</label>
                        <textarea type="text" class="form-control" id="body" name="body" rows="12">{{ article.body }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">完成</button>
                </form>
            </div>
        </div>
    </div>
{% endblock content %}

接着修改article/urls.py和增加修改文章入口

from django.urls import path
from . import views
# 正在部署的应用的名称
app_name = 'article'
urlpatterns = [
    # path函数将url映射到视图
    path('article-list/', views.article_list, name='article_list'),
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
    path('article-create/', views.article_create, name="article_create"),
    path('article-delete/<int:id>', views.article_delete, name="article_delete"),
    # 增加这里
    path('article-update/<int:id>', views.article_update(), name="article_update"),
]

修改detail.html

<!-- 文章详情 -->
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者： {{ article.author }}</div>
            .<a href="#" onclick="confirm_delete()">删除文章</a>
            <!-- 修改这里 -->
            .<a href="{% url "article:article_update" article.id %}">编辑文章</a>
            <!-- 修改这里 -->
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
    </div>

接着我们看一下效果,打开一篇文章:

可以看到增加了编辑文章链接,我们点击链接:

可以看见可以继续编辑文章,修改后点击完成:


可以看到已经成功修改了

目录
Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块