我们要做的新增文章：
在新增文章中可以添加图片和预览图片
我们使用插件kindeditor
html代码：
base代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="/static/jquery-3.2.1.js"></script> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="/static/kindeditor/kindeditor-all.js"></script> <style> .header{ width: 100%; height: 50px; background-color: lightslategray; line-height:50px; } .header p{ font-size: 22px; color:white; } .manageCon{ margin-top: 80px; } </style> </head> <body> <div class="header"> <p>后台管理</p> </div> <div class="container"> <div class="row"> <div class="leftMenu col-md-3"> <p><a href="">文章管理</a></p> <p><a href="">标签管理</a></p> <p><a href="">分类管理</a></p> </div> <div class="manageCon col-md-8"> {% block manageCon %} <a href="/blog/backend/addArticle/"><button class="btn btn-primary">添加文章</button></a> <table class="table table-border table-hover"> <tr> <th>标题</th> <th>评论数</th> <th>点赞数</th> <th>操作</th> <th>操作</th> </tr> {% for article in article_list %} <tr> <td>{{ article.title }}</td> <td>{{ article.comment_count }}</td> <td>{{ article.up_count }}</td> <td><a href=""><button class="btn btn-info">编辑</button></a></td> <td><a href=""><button class="btn btn-danger">删除</button></a></td> </tr> {% endfor %} </table> {% endblock %} </div> </div> </div> </body> </html>
新增文件的html代码
{% extends "backendIndex.html" %} {% block manageCon %} {% csrf_token %} <h4 sytle="background-color:grey">添加文章</h4> <form action="/blog/backend/addArticle/" method="post" novalidate> {% csrf_token %} <div> <label for="title">标题</label> <p>{{ article_form.title }}</p> </div> <div> <label for="title">内容</label> <p>{{ article_form.content }}</p> </div> <p><input type="submit" value="submit"></p> </form> <script> KindEditor.ready(function (K) { window.ediotr = K.create("#id_content", { "600px", height: "500px", resizeType: 0, uploadJson: "/uploadFile/", extraFileUploadParams: { "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(), } }) }) </script> {% endblock %}
views视图
def addArticle(request): import datetime if request.method=="POST": article_form=ArticleForm(request.POST) if article_form.is_valid(): title=article_form.cleaned_data.get("title") content=article_form.cleaned_data.get("content") article_obj=models.Article.objects.create(title=title,desc=content[0:30],create_time=datetime.datetime.now(),user=request.user) models.ArticleDetail.objects.create(content=content,article=article_obj) else: return redirect("/blog/backend/addArticle/") return HttpResponse("添加数据库") article_form=ArticleForm() return render(request,"addArticle.html",{"article_form":article_form})
预览的视图函数：
def uploadFile(request): print("POST",request.POST) print("FILES",request.FILES) file_obj=request.FILES.get("imgFile") file_name=file_obj.name from blogSystem import settings import os path=os.path.join(settings.MEDIA_ROOT,"article_uploads",file_name) with open(path,"wb") as f: for i in file_obj.chunks(): f.write(i) response={ "error":0, "url":"/media/article_uploads/"+file_name+"/", } import json return HttpResponse(json.dumps(response))