一 开发流程
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 点击发布页面跳转后的效果