一:后台管理,添加文章样式编写
创建 一个后台管理模板前段页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <title>后台管理</title> <style> .head { background: yellowgreen; height: 60px; margin-bottom: 30px; } </style> </head> <body> <div class="head"> <p>后台管理</p> </div> <div class="container-fluid"> <div class="row "> <div class="col-md-3"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 博客相关操作 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <a href="/add_article/">添加文章</a> </div> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <a href="">添加随笔</a> </div> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <a href="https://www.cnblogs.com/ouyang99-">返回欧阳的博客园</a> </div> </div> </div> </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">文章</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">随笔</a> </li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">日记</a> </li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">评论</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> </div> </body> </html>
二: 后台开始前段页面
{% extends 'back/back_base.html' %} {% block article %} <table class="table table-striped table-hover"> <thead> <tr> <th>文章标题</th> <th>发布时间</th> <th>评论数</th> <th>点赞数</th> <th>修改</th> <th>删除</th> </tr> </thead> <tbody> {% for article in article_list %} <tr> <td><a href="{{ article.blog.userinfo }}/article/{{ article.pk }}">{{ article.title }}</a></td> {# # 创建发布时间#} <td>{{ article.create_time|date:'Y-m-d H:i:s' }}</td> <td>{{ article.commit_num }}</td> <td>{{ article.up_num }}</td> <td><a href="">修改</a></td> <td><a href="">删除</a></td> </tr> {% endfor %} </tbody> </table> {% endblock %}
其中的
<td><a href="{{ article.blog.userinfo }}/article/{{ article.pk }}">{{ article.title }}</a></td> //其中的{{ article.blog.userinfo }}/article/{{ article.pk }}">{{ article.title }} 代表进入当前文章
后台逻辑
# 后台管理函数
@login_required(login_url='/login/')
def backend(request):
if request.method == 'GET':
# 查询出当前登录用户的所有文章
blog = request.user.blog
# 拿到一个queryset对象
article_list = models.Article.objects.filter(blog=blog)
return render(request, 'back/backend.html', {'article_list': article_list})
三:添加文章:
添加文章后台逻辑
#添加文章 @login_required() 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') soup = BeautifulSoup(content, 'html.parser') desc=content[0:150] blog=request.user.blog ret=models.Article.objects.create(title=title,desc=desc,content=content,blog=blog,) return redirect('/backend/') #可以局部禁用csrf def upload_img(request):# 富文本编辑器上传图片 print(request.FILES) #获取前端的文件 myfile=request.FILES.get('myfile') # 拼接文件夹,目的是将前段传过来的文件存起来 path= os.path.join(settings.BASE_DIR,'media','img') # 要是这个文件夹不存在,就创建爱你一个文件夹 if not os.path.isdir(path): os.mkdir(path) file_path=os.path.join(path,myfile.name) with open(file_path,'wb') as f: for line in myfile: f.write(line) dic={'error':0,'url':'/media/img/%s'%myfile.name} return JsonResponse(dic)
添加文章前台代码
{% extends 'back/back_base.html' %} {% block home %} <div> <p>添加文章</p> <form action="/add_article/" method="post"> {% csrf_token %} <p>标题</p> <p><input type="text" name="title" class="form-control"></p> <p>内容(KindEdit编辑器，不支持拖放/粘贴上传图片)</p> <p> <textarea name="content" id="editor_id" cols="30" rows="10"> </textarea> </p> <input type="submit" class="btn btn-danger" value="提交"> </form> </div> <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#editor_id', { '100%', height: '500px', //item 控制要显示的控件 resizeType: 0, //上传图片,uploadJson 指的是上传的路径,也就是咱们的路由 uploadJson:'/upload_img/', //添加一些额外的参数 extraFileUploadParams:{ 'csrfmiddlewaretoken':'{{ csrf_token }}' }, //修改默认上传文件的名字 filePostName:'myfile' }) }); </script> {% endblock %}
四:上传图片
# 可以局部禁用csrf def upload_img(request): # 传上来的图片,是文件 # 是文件,从哪取? print(request.FILES) myfile = request.FILES.get('myfile') path = os.path.join(settings.BASE_DIR, 'media', 'img') # 不存在这个文件夹 if not os.path.isdir(path): os.mkdir(path) file_path = os.path.join(path, myfile.name) with open(file_path, 'wb') as f: for line in myfile: f.write(line) dic = {'error': 0, 'url': '/media/img/%s' % myfile.name} return JsonResponse(dic)