Django实现文章编辑功能

一 开发流程

1 单击修改文章图标，将该文章的id传给相应的视图函数。

2 视图函数从数据库中读取该文章id的相关内容。

3 将文章相关内容呈现在页面上，并且处于编辑状态，依然使用Markdown编辑器。

4 用户编辑之后，单击“提交”按钮，再次将页面中编辑的内容保存到上述id所对应的数据库记录中。然后跳转到合适的页面。

二 代码

1 修改前端页面mysite/templates/article/column/article_list.html，增加编辑按钮，核心代码如下：

<div>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>栏目</td>
            <td>操作</td>
        </tr>
        {% for article in articles %}
        <tr id={{ article.id }}>
            <td>{{ forloop.counter }}</td>
            <td><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></td>
            <td>{{ article.column }}</td>
            <td>
                <!-- article.id对应URL中的article_id -->
                <a name="edit" href="{% url 'article:redit_article' article.id %}"><span class="glyphicon glyphicon-pencil"></span></a>
                <a name="delete" href="javascript:" onclick="del_article(this, {{ article.id }})"><span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span></a>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>

2 编写视图函数mysite/article/views.py

@login_required(login_url='/account/login')
@csrf_exempt
# article_id用来接收文章id的，正是通过article_id，才能得到文章对象
def redit_article(request, article_id):
    if request.method == "GET":
        article_columns = request.user.article_column.all()
        article = ArticlePost.objects.get(id=article_id)
        this_article_form = ArticlePostForm(initial={"title":article.title})
        this_article_column = article.column
        return render(request, "article/column/redit_article.html", {"article":article, "article_columns":article_columns, "this_article_column":this_article_column, "this_article_form":this_article_form})
    else:
        # 从前端页面会传过来article_id
        redit_article = ArticlePost.objects.get(id=article_id)
        try:
            # 从前端页面会传过来column_id，title和body
            redit_article.column = request.user.article_column.get(id=request.POST['column_id'])
            redit_article.title = request.POST['title']
            redit_article.body = request.POST['body']
            redit_article.save()
            return HttpResponse("1")
        except:
            return HttpResponse("2")

3 编写编辑的前端页面mysite/templates/article/column/redit_article.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
<link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
<div>
<div style="margin-left:10px">
    <form class="form-horizontal" action="." method="post">{% csrf_token %}
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>标题:</span></div>
            <div class="col-md-10 text-left">{{this_article_form.title}}</div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>栏目:</span></div>
            <div class="col-md-10 text-left">
                <select id="which_column">
                    {% for column in article_columns %}
                        <!-- 判断当前文章原有的栏目名称，并将下列菜单中的该名称确定为选定状态-->
                        {% if column == this_article_column.column %}   
                            <option value="{{column.id}}" selected="selected">{{column.column}}</option>    
                        {% else %}
                            <option value="{{column.id}}">{{column.column}}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
        </div>
        <div  class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>内容:</span></div>
            <div id="editormd" class="col-md-10 text-left"><!--{{article_post_form.body}}-->
                <textarea style="display:none;" id="id_body">
<!--该语句前面不能留空格，否则会出错-->
{{article.body}}   
                </textarea>
            </div>
        </div>
        <div class="row">
            <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="redit_article()">
        </div>
    </form>

</div>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src='{% static "editor/editormd.min.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editormd", {
            width   : "100%",
            height  : 640,
            //syncScrolling : "single",
            path    : "{% static 'editor/lib/' %}",
        });
    });
function redit_article(){
    var title = $("#id_title").val();
    var column_id = $("#which_column").val();
    var body = $("#id_body").val();
    $.ajax({
        //传递article.id给URL
        url: "{% url 'article:redit_article' article.id %}",
        type: "POST",
        // 传递title、body、column_id给视图处理
        data: {"title":title, "body":body, "column_id":column_id},
        success: function(e){
            if(e=="1"){
                layer.msg("编辑成功");
                // 重定向页面
                location.href = "{% url 'article:article_list' %}";
            }else{
            layer.msg("编辑失败.");
            }
        },
    });
}
</script>

{% endblock %}

4 编写URL

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^article-column/$', views.article_column, name="article_column"),
    url(r'^rename-column/$', views.rename_article_column, name="rename_article_column"),
    url(r'^del-column/$', views.del_article_column, name="del_article_column"),
    url(r'^article-post/$', views.article_post, name="article_post"),
    url(r'^article-list/$', views.article_list, name="article_list"),
    url(r'^article-detail/(?P<id>\d+)/(?P<slug>[-\w]+)/$', views.article_detail, name="article_detail"),
    url(r'^del-article/$', views.del_article, name="del_article"),
    url(r'^redit-article/(?P<article_id>\d+)/$', views.redit_article, name="redit_article"),
]

三 测试

1 编辑前页面

2 点击编辑后的效果

3 点击发布页面跳转后的效果