一、添加文章

注：

  1. 后台管理页面,应该有个新得 app
  2.  
  3. /blog/backend/       # 文章列表页
    /blog/add_article/   # 添加文章
  1. # 后台管理
    re_path(r'backend/$', views.backend),
    re_path(r'add_article/$', views.add_article),

二、文本编辑器

  1. 文本编辑器 kindeditor  本质上就是（css+js）
    官网：
        http://kindeditor.net/demo.php
        http://kindeditor.net/doc.php
  2.  
  3. 使用：
    　　    kindeditor
        <script src="/static/kindeditor/kindeditor-all.js"></script>
  4.  
  5.     <textarea name="article_con" id="article_box" cols="30" rows="10"></textarea>
  6.  
  7.     KindEditor.ready(function (k) {
            window.editor = k.create('#article_box')
            ...
        })
  8.  
  9.     KindEditor会覆盖textarea, 注意 id
  10.  
  11. 　　初始化 参数
            http://kindeditor.net/docs/option.html
    　　

add_article.html  

注意：kindeditor 参数配置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>add_article</title>
  6.     <style type="text/css">
  7.         *{padding: 0;margin: 0}
  8.         .header{ width: 100%; height: 60px;background-color: green}
  9.         .content{ padding-top: 30px;}
  10.     </style>
  11. </head>
  12. <body>
  13.  
  14. <div class="header">
  15.  
  16. </div>
  17.  
  18. <div class="content">
  19.     <form action="" method="post">
  20.         {% csrf_token %}
  21.         <div class="title">
  22.             标题： <input type="text" name="title" >
  23.         </div>
  24.         <div>
  25.             内容：<br>
  26.             <textarea name="article_con" id="article_box" cols="30" rows="10"></textarea>
  27.         </div>
  28.         <input type="submit">
  29.     </form>
  30.  
  31. </div>
  32.  
  33. {% csrf_token %}
  34.     <script src="/static/js/jquery-3.2.1.min.js"></script>
  35.     <script src="/static/kindeditor/kindeditor-all.js"></script>
  36.     <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
  37.  
  38.     <script type="text/javascript">
  39.         KindEditor.ready(function (k) {   // 将 自己写得 textarea id=article_box 覆盖
  40.             window.editor = k.create('#article_box',{
  41.                 width:800,
  42.                 height:400,
  43.                 items:[  // 留可选得！！
  44.                     'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
  45.                     'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
  46.                     'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
  47.                     'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
  48.                     'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
  49.                     'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
  50.                     'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
  51.                     'anchor', 'link', 'unlink', '|', 'about'
  52.                 ],
  53.                 resizeType:0,
  54.                 uploadJson:'upload_img/',
  55.                 extraFileUploadParams:{"csrfmiddlewaretoken":$('input[name=csrfmiddlewaretoken]').val()},
  56.                 filePostName:'img'
  57.             })
  58.         })
  59.  
  60.     </script>
  61.  
  62. </body>
  63. </html>

三、上传文件

注意点：

  1. 之前学过：form ajax  
    这次是：编辑器发文件：实质是 ajax的post
  2.  
  3. 注意：
        1.参数配置
            uploadJson:'upload_img/',    # 得是相对路径，否则会报错！  
            extraFileUploadParams:{"csrfmiddlewaretoken":$('input[name=csrfmiddlewaretoken]').val()},
            filePostName:'img'
  4.  
  5.     2.url  
            re_path(r'upload_img/', views.upload_img),
  6.  
  7.     3.用户文件存放 /media/article_imgs/...
            img_obj = request.FILES.get('img')
            # MEDIA_ROOT = os.path.join(BASE_DIR,'blog','media')
  8.  
  9.         media_path = settings.MEDIA_ROOT
            path = os.path.join(media_path,'article_imgs',img_obj.name)
  10.  
  11.     4.写文件
            with open(path,'wb') as f:
            for line in img_obj:
                f.write(line)
  12.  
  13.     5.返回json
            res = {
                "url":"/media/article_imgs/"+img_obj.name,
                "error":0
            }
            return HttpResponse(json.dumps(res))

code：

  1. from cnblog import settings
  2. import os
  3. import json
  4. def upload_img(request):
  5.  
  6.     print('files:',request.FILES)  # files 才能拿到文件
  7.     # <MultiValueDict: {'imgFile': [<InMemoryUploadedFile: lufei.jpg (image/jpeg)>]}>
  8.     # 可以自己定义 文件名！！  filePostName:'img'
  9.     # < MultiValueDict: {'img': [ < InMemoryUploadedFile: lufei.jpg(image / jpeg) >]} >
  10.  
  11.     img_obj = request.FILES.get('img')
  12.  
  13.     # MEDIA_ROOT = os.path.join(BASE_DIR,'blog','media')
  14.     media_path = settings.MEDIA_ROOT
  15.     path = os.path.join(media_path,'article_imgs',img_obj.name)
  16.  
  17.     with open(path,'wb') as f:
  18.         for line in img_obj:
  19.             f.write(line)
  20.  
  21.     res = {
  22.         "url":"/media/article_imgs/"+img_obj.name,
  23.         "error":0
  24.     }
  25.     return HttpResponse(json.dumps(res))

四、提交文章 - BeautifulSoup

总结：

  1. Article:
        nid, title, desc, create_time, comment_count, up_count, down_count, category, user, tags,
    ArticleDetail:
        nid,content,article
  2.  
  3. 注意点：
        title = request.POST.get('title')
        article_con = request.POST.get('article_con')        
  4.  
  5.     0.防止XSS攻击：引入 （BeautifulSoup） 
            https://www.cnblogs.com/yuanchenqi/articles/7617280.html
            http://beautifulsoup.readthedocs.io/zh_CN/latest/
  6.  
  7.         简单来说，Beautiful Soup是python的一个库，最主要的功能是从网页解析数据。
  8.  
  9.         。。。详细使用。。。
  10.  
  11.         pip3 install beautifulsoup4
            from bs4 import BeautifulSoup
            soup = BeautifulSoup(article_con,'html.parser')
  12.  
  13.         # 过滤 script
            for tag in soup.find_all():
                if tag.name == 'script':
                    tag.decompose()    # 删除了所有的script标签及内容 
  14.  
  15.     获取desc
        1.
            if  desc = article_con[0:150]
            会有问题：article_con 内容中含有标签，截取会截不全，导致有的标签没有闭合，样式错乱！
        2.
            图片代码不截，只截文本 soup.text[0:150] 会有一点问题：
            引入：beautifulsoup 针对标签，字符串，做过滤查询。
  16.  
  17.         soup = BeautifulSoup(article_con,'html.parser')
            desc = soup.text[0:150]
            but: 有一点问题  soup.text   # text 把转义的字符又返回去了！！
            eg: &lt;script&gt;alert(555)&lt;/script&gt;
                转为：<script>alert(555)</script>，存到库里有问题的！
                所以：    
                    desc = soup.text[0:150]
                    desc = desc.replace('<', '&lt;').replace('>', '&gt;')
  18.  
  19.         <p>{{ article.desc|safe }}</p>    
  1. 　　3.soup.prettify()

 code:

  1. def add_article(request):
  2.     if request.method == 'POST':
  3.         title = request.POST.get('title')
  4.         article_con = request.POST.get('article_con')
  5.  
  6.         from bs4 import BeautifulSoup
  7.         soup = BeautifulSoup(article_con, 'html.parser')
  8.  
  9.         print('text1:', soup.text)  # text 把 转义的字符又返回去了！！
  10.  
  11.         # 过滤 script
  12.         for tag in soup.find_all():
  13.             if tag.name == 'script':
  14.                 tag.decompose()  # 删除了所有的script标签
  15.  
  16.         desc = soup.text[0:150]
  17.         desc = desc.replace('<', '&lt;').replace('>', '&gt;')
  18.  
  19.         article_obj = Article.objects.create(title=title, desc=desc,user=request.user)
  20.         # soup.prettify() == str(soup)
  21.         ArticleDetail.objects.create(content=soup.prettify(),article=article_obj)
  22.  
  23.         return HttpResponse('提交成功')
  24.  
  25.     else:
  26.         return render(request, 'add_article.html')
  1. class Article(models.Model):
  2.     """
  3.     文章信息
  4.     """
  5.     nid = models.AutoField(primary_key=True)
  6.     title = models.CharField(max_length=50, verbose_name='文章标题')
  7.     desc = models.CharField(max_length=255, verbose_name='文章描述')
  8.     create_time = models.DateTimeField(verbose_name='创建时间',auto_now_add=True)
  9.  
  10.     comment_count = models.IntegerField(default=0)  # 为了查询时，效率高！
  11.     up_count = models.IntegerField(default=0)
  12.     down_count = models.IntegerField(default=0)
  13.  
  14.     category = models.ForeignKey(to='Category', to_field='nid', null=True, on_delete=models.CASCADE)
  15.     user = models.ForeignKey(verbose_name='作者', to='UserInfo', to_field='nid', on_delete=models.CASCADE)
  16.  
  17.     tags = models.ManyToManyField(
  18.         to='Tag',
  19.         through='Article2Tag',
  20.         through_fields=('article','tag'),
  21.     )
  22.  
  23.     def __str__(self):
  24.         return self.title
  25.  
  26. class ArticleDetail(models.Model):
  27.     """
  28.     文章详细表
  29.     """
  30.     nid = models.AutoField(primary_key=True)
  31.     content = models.TextField()
  32.     article = models.OneToOneField(to='Article', to_field='nid', on_delete=models.CASCADE)

models.py

五、BBS - 原始版

https://github.com/alice-bj/cnblog_0

BBS - 后台管理的更多相关文章

  1. 1211 BBS后台管理文章添加

    目录 昨日内容回顾 侧边栏inclusion_tag inclusion_tag的响应 使用 自定义inclusion_tag,标签,过滤器 文章的点赞点踩 前端 后端 校验规则 文章的评论功能 1. ...

  2. 1210 BBS admin后台管理及侧边栏筛选个人站点

    目录 昨日内容 django admin后台管理 使用 建表 用户图片的显示 MEDIA用户配置 查找照片 搭建个人站点 防盗链 新建css文件 侧边栏展示标签 定义分类栏与标签栏 定义时间栏 侧边栏 ...

  3. BBS论坛 后台管理

    七.后台管理 后台管理页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. day75 bbs项目☞后台管理+修改头像

    目录 一.后台管理之添加文章 二.修改用户头像 bbs项目总结 一.后台管理之添加文章 添加文章有两个需要注意的问题: 文章的简介切取,应该想办法获取到当前文章的文本内容后再截取字符 XSS攻击,由于 ...

  5. BBS项目之后台管理

    一:后台管理,添加文章样式编写 创建 一个后台管理模板前段页面 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...

  7. 10天学会phpWeChat——第六天：实现新闻的后台管理

    通过前面五讲的系列教程,我们完成了一个简单模块的前端发布.列表展示.详情展示.实际生产环境中,所有前台的数据都会有对应的后台操作进行统筹管理.我们称之为后台管理系统. 今天,我们开始<10天学会 ...

  8. 后台管理UI皮肤的选择

    后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十. ...

  9. 帝国cms7.0忘记后台管理账户用户名密码

    最近刚登陆以前的网站,但是发现自己的后台管理用户名密码已经忘记,于是到帝国cms论坛里面找了一下解决方案,成功解决问题.特此分享一下解决成功经验. 原帖地址:http://bbs.phome.net/ ...

随机推荐

  1. Docker 集群管理

    docker systemd unit file [Unit] Description=Docker Application Container Engine Documentation=http:/ ...

  2. [转]五分钟看懂UML类图与类的关系详解

    在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...

  3. Appium - WebView測试(Android)

    Appium - WebView測试 作者: Max.Bai 时间: 2015/07 Appium - WebView測试(Android) 如今App都是混合型的.有原生的也包括WebView的,a ...

  4. docker学习-docker镜像

    docker就是一系列文件,

  5. SaltStack 如何自定义 grains 信息

    首先在 minion 上编辑 grains 配置文件,然后添加自定义的 grains: [root@localhost ~]$ cat /etc/salt/grains # 这个文件默认是没有的 ro ...

  6. cocos2dx游戏--欢欢英雄传说--添加游戏背景

    经过一段时间的学习cocos2dx,接下来我想要实践开发一个小游戏,我把它命名为“欢欢英雄传说”,项目名将取为HuanHero.环境:cocos2dx环境:cocos2d-x 3.11.1IDE:Co ...

  7. jquery获取父级元素、子级元素、兄弟元素的方法

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  8. 【PHP】php 生成条形码

    1.什么是条形码? 百度百科定义:条形码(barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符.常见的条形码是由反射率相差很大的黑条(简称条)和白条(简称 ...

  9. salt-ssh的批量脚本及使用方法

    author: headsen   chen date : 2018-08-02   20:06:06 1,salt-ssh的安装: yum -y install epel-release yum - ...

  10. wamp安装和基础配置

    一 下载地址 二 安装 三 修改默认网站目录 四 修改数据库密码 一 下载地址 wamp百度软件中心 wamp官方下载地址 二 安装 windows环境下wampserver的配置教程——超级详细 w ...