1.后台管理功能主要实现了,文章的添加与修改,以及富文本的使用

前端页面

母版

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{ blog.userinfo.username }}-的个人博客</title>
  6.     <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  7.     {#    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">#}
  8.     <script src="/static/jquery-3.3.1.min.js"></script>
  9.     <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  10.     <link rel="stylesheet" href="/static/mycss/head.css">
  11.     <link rel="stylesheet" href="/static/mycss/content.css">
  12.  
  13.     <style>
  14.         * {
  15.             margin: 0;
  16.             padding: 0;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="head">
  22.     <nav class="navbar navbar-inverse">
  23.         <div class="container-fluid">
  24.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  25.                 <ul class="nav navbar-nav">
  26.                     <li><a href="/index/">博客园</a></li>
  27.                 </ul>
  28.                 <div class="navbar-header">
  29.                     <a class="navbar-brand pull-right"
  30.                        href="/{{ request.user.username }}">{{ request.user.username }}</a>
  31.                 </div>
  32.             </div><!-- /.navb
  33.             <!-- Brand and toggle get grouped for better mobile display -->
  34.  
  35.         </div><!-- /.container-fluid -->
  36.     </nav>
  37. </div>
  38. <div class="container-fluid">
  39.     <div class="row">
  40.         <div class="col-md-3">
  41.             <div class="panel panel-primary">
  42.                 <div class="panel-heading">文章管理</div>
  43.                 <div class="panel-body">
  44.                     <p>
  45.                         {{ blog.site_name }}
  46.                     </p>
  47.                 </div>
  48.                 <ul class="list-group">
  49.                     <li class="list-group-item"><a href="/add_article/">添加文章</a></li>
  50.                     <li class="list-group-item">博客签名</li>
  51.                     <li class="list-group-item">添加文章</li>
  52.                     <li class="list-group-item">添加文章</li>
  53.                     <li class="list-group-item">编辑分类</li>
  54.                 </ul>
  55.             </div>
  56.         </div>
  57.  
  58.         <div class="col-md-9">
  59.             <div>
  60.  
  61.                 <!-- Nav tabs -->
  62.                 <ul class="nav nav-tabs" role="tablist">
  63.                     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
  64.                                                               data-toggle="tab">Article</a></li>
  65.                     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
  66.                     </li>
  67.                     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
  68.                     </li>
  69.                     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
  70.                     </li>
  71.                 </ul>
  72.  
  73.                 <!-- Tab panes -->
  74.                 <div class="tab-content">
  75.                     <div role="tabpanel" class="tab-pane active" id="home">
  76.                         {% block article %}
  77.  
  78.                         {% endblock %}
  79.                     </div>
  80.                     <div role="tabpanel" class="tab-pane" id="profile">...</div>
  81.                     <div role="tabpanel" class="tab-pane" id="messages">...</div>
  82.                     <div role="tabpanel" class="tab-pane" id="settings">...</div>
  83.                 </div>
  84.  
  85.             </div>
  86.             {#        ------------------------------------------------------------------#}
  87.  
  88.         </div>
  89.     </div>
  90. </div>
  91.  
  92. </body>
  93. </html>

用户个人文章管理页面

  1. {% extends 'back/base.html' %}
  2.  
  3. {% block article %}
  4.  
  5.     <div class="panel panel-primary">
  6.         <div class="panel-heading">
  7.             <h3 class="panel-title">文章</h3>
  8.         </div>
  9.         <table class="table table-hover">
  10.             <thead>
  11.             <tr>
  12.                 <th>id</th>
  13.                 <th>标题</th>
  14.                 <th>发布时间</th>
  15.                 <th>评论数</th>
  16.                 <th>点赞</th>
  17.                 <th>操作</th>
  18.                 <th>操作</th>
  19.  
  20.                 {#----------------------------------------------------------------------#}
  21.             </tr>
  22.             </thead>
  23.             <tbody>
  24.             {% for article in article_list %}
  25.                 <tr>
  26.                     <td>{{ forloop.counter }}</td>
  27.                     <td>{{ article.title }}</td>
  28.                     <td>{{ article.create_time|date:'Y-m-d' }}</td>
  29.                     <td>{{ article.commit_num }}</td>
  30.                     <td>{{ article.up_num }}</td>
  31.                     <td><a href="/modify_article/{{ article.pk }}" class="glyphicon glyphicon-pencil"></a></td>
  32.                     <td><a href="/delete_article/{{ article.pk }}" class="glyphicon glyphicon-remove-sign"></a></td>
  33.  
  34.                 </tr>
  35.             {% endfor %}
  36.             </tbody>
  37.         </table>
  38.         <div class="panel-footer"></div>
  39.     </div>
  40.  
  41. {% endblock %}

文章添加页面

  1. {% extends 'back/base.html' %}
  2.  
  3. {% block article %}
  4.     <form action="/add_article/" method="post">
  5.         {% csrf_token %}
  6.         <p style="margin: 10px 0">文章标题</p>
  7.         <input type="text" class="form-control" placeholder="标题不能为空" name="title">
  8.         <p style="margin: 10px 0">KindEdit文本编辑</p>
  9.         <textarea class="form-control" rows="3" id="editor_id" name="content"
  10.                   style="width:100%;height:400px;"></textarea>
  11.         <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div>
  12.     </form>
  13.     <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
  14.     <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
  15.     <script>
  16.         KindEditor.ready(function (K) {
  17.             window.editor = K.create('#editor_id', {
  18.                 uploadJson: '/upload_img/',
  19.                 extraFileUploadParams: {
  20.                     'csrfmiddlewaretoken': '{{ csrf_token }}'
  21.                 },
  22.                 filePostName:'myfile'
  23.             })
  24.  
  25.         });
  26.     </script>
  27. {% endblock %}

文章修改页面

  1. {% extends 'back/base.html' %}
  2.  
  3. {% block article %}
  4.     <form action="/modify_article/{{ article_id }}" method="post">
  5.         {% csrf_token %}
  6.         <p style="margin: 10px 0">文章标题</p>
  7.         <input type="text" class="form-control title" placeholder="标题不能为空" name="title" id="{{ article_id }}">
  8.         <p style="margin: 10px 0">KindEdit文本编辑</p>
  9.         <textarea class="form-control" rows="3" id="editor_id" name="content"
  10.                   style="width:100%;height:400px;"></textarea>
  11.         <div class="box_btn" style="margin: 10px 0"><input type='submit' class="btn btn-danger"></div>
  12.     </form>
  13.     <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
  14.     <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
  15.     <script>
  16.         KindEditor.ready(function (K) {
  17.             window.editor = K.create('#editor_id', {
  18.                 uploadJson: '/upload_img/',
  19.                 extraFileUploadParams: {
  20.                     'csrfmiddlewaretoken': '{{ csrf_token }}'
  21.                 },
  22.                 filePostName: 'myfile'
  23.             })
  24.  
  25.         });
  26.  
  27.         $(function () {
  28.             $.ajax({
  29.                 url: '/get_article/{{ article_id }}',
  30.                 method: 'get',
  31.  
  32.                 success: function (data) {
  33.                     console.log(data.title);
  34.                     $('.title').val(data.title)
  35.                     window.editor.html(data.content);
  36.                 }
  37.             })
  38.         })
  39.     </script>
  40. {% endblock %}

2.后台views函数

  1. def article_manage(request):  #文章展示管理
  2.     user = request.user
  3.     blog = user.blog
  4.     article_list = models.Article.objects.filter(blog=blog).all()
  5.     print(article_list)
  6.     return render(request, 'back/backend.html', locals())
  7.  
  8. def add_article(request):    #添加文章
  9.     if request.method == 'GET':
  10.         return render(request, 'back/add_article.html')
  11.     elif request.method == 'POST':
  12.         title = request.POST.get('title')
  13.         content = request.POST.get('content')
  14.         blog = request.user.blog
  15.  
  16.         soup = BeautifulSoup(content, 'html.parser')
  17.         tags = soup.find_all()
  18.         for tag in tags:
  19.             if tag.name == 'script':
  20.                 tag.decompose()
  21.  
  22.         desc = soup.text[0:150]
  23.         print(title, '------', content, blog, desc)
  24.  
  25.         ret = models.Article.objects.create(title=title, desc=desc, content=str(soup), blog=blog)
  26.         return redirect('/article_manage/')
  27. def delete_article(request, id):     #删除文章
  28.     print(id)
  29.     ret = models.Article.objects.filter(nid=id).delete()
  30.     return redirect('/article_manage/')# ----------------------------------修改文章---------------------------------------------
  31.  
  32. def modify_article(request,id):    #修改文章
  33.     if request.method == 'GET':
  34.         article = models.Article.objects.get(nid=id)
  35.         user_blog = article.blog
  36.  
  37.         userblog = request.user.blog
  38.         print(user_blog,userblog)
  39.  
  40.         if user_blog == userblog:
  41.             return render(request,'back/modify_article.html',{'article_id':id})
  42.         return render(request,'error.html')
  43.     elif request.method == 'POST':
  44.         title = request.POST.get('title')
  45.         content = request.POST.get('content')
  46.         blog = request.user.blog
  47.  
  48.         soup = BeautifulSoup(content, 'html.parser')
  49.         tags = soup.find_all()
  50.         for tag in tags:
  51.             if tag.name == 'script':
  52.                 tag.decompose()
  53.  
  54.         desc = soup.text[0:150]
  55.         print(title, '------', content, blog, desc)
  56.  
  57.         ret = models.Article.objects.filter(nid=id).update(title=title, desc=desc, content=str(soup), blog=blog)
  58.         return redirect('/article_manage/')
  59.  
  60. def get_article(request,id):      #在修改文章的时候用ajax的get请求,获取文章内容数据,利用js将数据放到html页面的文本框中
  61.     article = models.Article.objects.get(nid=id)
  62.     print('-----------------',article.title)
  63.     return JsonResponse({'title':article.title,'content':article.content})

将Django中的后台管理界面替换,通过导入文件包,在Django中配置一下

详细链接

django--博客系统--后台管理的更多相关文章

  1. 【blog】推荐一个博客系统后台管理模板 - pinghsu

    pinghsu https://github.com/chakhsu/pinghsu

  2. 博客系统-后台页面搭建：eazy

    业务分析:布局为四个模块上边是系统描述,左边是导航菜单,中间是每个窗口的内容,下边是版权信息 点击左边的导航按钮,在右边窗口显示 代码: <%@ page language="java ...

  3. web开发-Django博客系统

    项目界面图片预览 项目代码github地址 项目完整流程 项目流程: 1 搞清楚需求(产品经理) (1) 基于用户认证组件和Ajax实现登录验证(图片验证码) (2) 基于forms组件和Ajax实现 ...

  4. Django(博客系统)：按照时间分层筛选“/blog/article/?create_time__year=2017”，出现问题：Database returned an invalid datetime value. Are time zone definitions for your database installed?

    问题背景 添加文章时间没问题,但为了设定博客文章按照时间分层筛选(创建时间的年份.年月&月份来搜索文章),我在blog这个django app的admin.py的ArticleAdmin类中做 ...

  5. Django(博客系统)：重写了auth.User后使用createsupperuser出错解决办法

    背景:重写django的系统User后,使用createsupperuser创建用户失败 由于项目需要扩展django默认新的auth.User系统(添加两个字段:头像.简介等字段),因此就重写了dj ...

  6. 基于express+mongodb+pug的博客系统——后台篇

    上一篇介绍了模板引擎pug.js的用法,这一篇就主要写后台逻辑了. 后台的大部分的功能都有了,只是在已经登录的状态下,前台和后台的逻辑处理还不是很完善. 先上几张图吧,仿旧版的简书,改了下UI,因为没 ...

  7. Django(博客系统)：文章内容使用django-ckeditor、文章简介使用django-tinymce

    文章内容使用django-ckeditor 1)安装django-ckeditor pip install django-ckeditorpip install Pillow 2)在settings. ...

  8. Django博客系统

    零.创建项目及配置 一.编写 Model 层的代码 二.配置 admin 页面 三.根据需求定制 admin

  9. 从零开始，搭建博客系统MVC5+EF6搭建框架（4）下，前后台布局实现、发布博客以及展示。

    一.博客系统进度回顾 目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...

随机推荐

  1. JS的面向对象编程

    一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...

  2. 小案例：struts1.3利用nested标签使用POJO

    其中的关键就是这个POJO是你自己去new一个,struts是不会帮你创建的!参考http://luohua.iteye.com/blog/39976 表单页 <%@ page language ...

  3. 浅谈HTTPS协议和SSL、TLS之间的区别与关系

    HTTP可能是我们见到过最多的一个字符串了,应该没有之一,而对于HTTPS到来和趋势,我们又开始看到SSL/TLS,所以对于一般不只做技术的人来说这或许还是一个疑问,那么子凡就趁最近在折腾这方面来给大 ...

  4. Oracle密码过期，取消密码180天限制

    1.进入sqlplus模式 sqlplus / as sysdba; 2.帐户再改一次密码 alter user 用户名 identified by 原密码; 3.查看用户密码的有效期设置(一般默认的 ...

  5. centos 7安装完后出现please make your choice from '1' to e

    解决方法:输入“1”,按Enter键输入“2”,按Enter键输入“q",按Enter键输入“yes”,按Enter键

  6. hdu6058 Kanade's sum 区间第k大

    /** 题目:Kanade's sum 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6058 题意:给定[1,n]的排列,定义f(l,r,k)表示区间[l ...

  7. python3颜色输出

    遇到一个项目,需求是在python3中,处理结果显示高亮加颜色,然后资料整理如下 ### 格式: \033[显示方式;前景色;背景色m 这里的格式是规定了m后面的输出字符颜色样式 说明: 前景色 背景 ...

  8. 【实验二】Spring框架笔记——NamedParameterJdbcTemplate与具名参数

    在经典的 JDBC 用法中, SQL 参数是用占位符 ? 表示,并且受到位置的限制. 定位参数的问题在于, 一旦参数的顺序发生变化, 就必须改变参数绑定. 在 Spring JDBC 框架中, 绑定 ...

  9. node.js和前端js有什么区别

    进行前端开发工作需要掌握技能有html. css.js以及各种前端框架,把这些技术玩6就可以成为一名合格的前端开发工作者 而进行nodejs开发,需要掌握js.web服务器原理.关系数据使用, 如果玩 ...

  10. 编写Nginx启停服务脚本

    在/etc/init.d/目录下创建脚本 vim /etc/init.d/nginx 编写脚本内容:(其中下面2行需要根据情况自行修改) nginxd=/opt/nginx/sbin/nginx ng ...