增加文章

我们要做的新增文章：

在新增文章中可以添加图片和预览图片

我们使用插件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>

View Code

新增文件的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 %}

View Code

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))

预览视图函数