1.后台管理功能主要实现了,文章的添加与修改,以及富文本的使用
前端页面
母版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ blog.userinfo.username }}-的个人博客</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> {# <link rel="stylesheet" href="/static/css/{{ blog.theme }}">#} <script src="/static/jquery-3.3.1.min.js"></script> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <link rel="stylesheet" href="/static/mycss/head.css"> <link rel="stylesheet" href="/static/mycss/content.css"> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div class="head"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/index/">博客园</a></li> </ul> <div class="navbar-header"> <a class="navbar-brand pull-right" href="/{{ request.user.username }}">{{ request.user.username }}</a> </div> </div><!-- /.navb <!-- Brand and toggle get grouped for better mobile display --> </div><!-- /.container-fluid --> </nav> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> <div class="panel-heading">文章管理</div> <div class="panel-body"> <p> {{ blog.site_name }} </p> </div> <ul class="list-group"> <li class="list-group-item"><a href="/add_article/">添加文章</a></li> <li class="list-group-item">博客签名</li> <li class="list-group-item">添加文章</li> <li class="list-group-item">添加文章</li> <li class="list-group-item">编辑分类</li> </ul> </div> </div> <div class="col-md-9"> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Article</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> {% block article %} {% endblock %} </div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> {# ------------------------------------------------------------------#} </div> </div> </div> </body> </html>
用户个人文章管理页面
{% extends 'back/base.html' %} {% block article %} <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">文章</h3> </div> <table class="table table-hover"> <thead> <tr> <th>id</th> <th>标题</th> <th>发布时间</th> <th>评论数</th> <th>点赞</th> <th>操作</th> <th>操作</th> {#----------------------------------------------------------------------#} </tr> </thead> <tbody> {% for article in article_list %} <tr> <td>{{ forloop.counter }}</td> <td>{{ article.title }}</td> <td>{{ article.create_time|date:'Y-m-d' }}</td> <td>{{ article.commit_num }}</td> <td>{{ article.up_num }}</td> <td><a href="/modify_article/{{ article.pk }}" class="glyphicon glyphicon-pencil"></a></td> <td><a href="/delete_article/{{ article.pk }}" class="glyphicon glyphicon-remove-sign"></a></td> </tr> {% endfor %} </tbody> </table> <div class="panel-footer"></div> </div> {% endblock %}
文章添加页面
{% extends 'back/base.html' %} {% block article %} <form action="/add_article/" method="post"> {% csrf_token %} <p style="margin: 10px 0">文章标题</p> <input type="text" class="form-control" placeholder="标题不能为空" name="title"> <p style="margin: 10px 0">KindEdit文本编辑</p> <textarea class="form-control" rows="3" id="editor_id" name="content" style="100%;height:400px;"></textarea> <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div> </form> <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#editor_id', { uploadJson: '/upload_img/', extraFileUploadParams: { 'csrfmiddlewaretoken': '{{ csrf_token }}' }, filePostName:'myfile' }) }); </script> {% endblock %}
文章修改页面
{% extends 'back/base.html' %} {% block article %} <form action="/modify_article/{{ article_id }}" method="post"> {% csrf_token %} <p style="margin: 10px 0">文章标题</p> <input type="text" class="form-control title" placeholder="标题不能为空" name="title" id="{{ article_id }}"> <p style="margin: 10px 0">KindEdit文本编辑</p> <textarea class="form-control" rows="3" id="editor_id" name="content" style="100%;height:400px;"></textarea> <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div> </form> <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#editor_id', { uploadJson: '/upload_img/', extraFileUploadParams: { 'csrfmiddlewaretoken': '{{ csrf_token }}' }, filePostName: 'myfile' }) }); $(function () { $.ajax({ url: '/get_article/{{ article_id }}', method: 'get', success: function (data) { console.log(data.title); $('.title').val(data.title) window.editor.html(data.content); } }) }) </script> {% endblock %}
2.后台views函数
def article_manage(request): #文章展示管理 user = request.user blog = user.blog article_list = models.Article.objects.filter(blog=blog).all() print(article_list) return render(request, 'back/backend.html', locals()) def add_article(request): #添加文章 if request.method == 'GET': return render(request, 'back/add_article.html') elif request.method == 'POST': title = request.POST.get('title') content = request.POST.get('content') blog = request.user.blog soup = BeautifulSoup(content, 'html.parser') tags = soup.find_all() for tag in tags: if tag.name == 'script': tag.decompose() desc = soup.text[0:150] print(title, '------', content, blog, desc) ret = models.Article.objects.create(title=title, desc=desc, content=str(soup), blog=blog) return redirect('/article_manage/') def delete_article(request, id): #删除文章 print(id) ret = models.Article.objects.filter(nid=id).delete() return redirect('/article_manage/')# ----------------------------------修改文章--------------------------------------------- def modify_article(request,id): #修改文章 if request.method == 'GET': article = models.Article.objects.get(nid=id) user_blog = article.blog userblog = request.user.blog print(user_blog,userblog) if user_blog == userblog: return render(request,'back/modify_article.html',{'article_id':id}) return render(request,'error.html') elif request.method == 'POST': title = request.POST.get('title') content = request.POST.get('content') blog = request.user.blog soup = BeautifulSoup(content, 'html.parser') tags = soup.find_all() for tag in tags: if tag.name == 'script': tag.decompose() desc = soup.text[0:150] print(title, '------', content, blog, desc) ret = models.Article.objects.filter(nid=id).update(title=title, desc=desc, content=str(soup), blog=blog) return redirect('/article_manage/') def get_article(request,id): #在修改文章的时候用ajax的get请求,获取文章内容数据,利用js将数据放到html页面的文本框中 article = models.Article.objects.get(nid=id) print('-----------------',article.title) return JsonResponse({'title':article.title,'content':article.content})
将Django中的后台管理界面替换,通过导入文件包,在Django中配置一下