BBS - 后台管理
一、添加文章
注:
后台管理页面,应该有个新得 app /blog/backend/ # 文章列表页
/blog/add_article/ # 添加文章
# 后台管理
re_path(r'backend/$', views.backend),
re_path(r'add_article/$', views.add_article),
二、文本编辑器
文本编辑器 kindeditor 本质上就是(css+js)
官网:
http://kindeditor.net/demo.php
http://kindeditor.net/doc.php 使用:
kindeditor
<script src="/static/kindeditor/kindeditor-all.js"></script> <textarea name="article_con" id="article_box" cols="30" rows="10"></textarea> KindEditor.ready(function (k) {
window.editor = k.create('#article_box')
...
}) KindEditor会覆盖textarea, 注意 id 初始化 参数
http://kindeditor.net/docs/option.html
add_article.html
注意:kindeditor 参数配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>add_article</title>
<style type="text/css">
*{padding: 0;margin: 0}
.header{ width: 100%; height: 60px;background-color: green}
.content{ padding-top: 30px;}
</style>
</head>
<body> <div class="header"> </div> <div class="content">
<form action="" method="post">
{% csrf_token %}
<div class="title">
标题: <input type="text" name="title" >
</div>
<div>
内容:<br>
<textarea name="article_con" id="article_box" cols="30" rows="10"></textarea>
</div>
<input type="submit">
</form> </div> {% csrf_token %}
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script> <script type="text/javascript">
KindEditor.ready(function (k) { // 将 自己写得 textarea id=article_box 覆盖
window.editor = k.create('#article_box',{
width:800,
height:400,
items:[ // 留可选得!!
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
resizeType:0,
uploadJson:'upload_img/',
extraFileUploadParams:{"csrfmiddlewaretoken":$('input[name=csrfmiddlewaretoken]').val()},
filePostName:'img'
})
}) </script> </body>
</html>
三、上传文件
注意点:
之前学过:form ajax
这次是:编辑器发文件:实质是 ajax的post 注意:
1.参数配置
uploadJson:'upload_img/', # 得是相对路径,否则会报错!
extraFileUploadParams:{"csrfmiddlewaretoken":$('input[name=csrfmiddlewaretoken]').val()},
filePostName:'img' 2.url
re_path(r'upload_img/', views.upload_img), 3.用户文件存放 /media/article_imgs/...
img_obj = request.FILES.get('img')
# MEDIA_ROOT = os.path.join(BASE_DIR,'blog','media') media_path = settings.MEDIA_ROOT
path = os.path.join(media_path,'article_imgs',img_obj.name) 4.写文件
with open(path,'wb') as f:
for line in img_obj:
f.write(line) 5.返回json
res = {
"url":"/media/article_imgs/"+img_obj.name,
"error":0
}
return HttpResponse(json.dumps(res))
code:
from cnblog import settings
import os
import json
def upload_img(request): print('files:',request.FILES) # files 才能拿到文件
# <MultiValueDict: {'imgFile': [<InMemoryUploadedFile: lufei.jpg (image/jpeg)>]}>
# 可以自己定义 文件名!! filePostName:'img'
# < MultiValueDict: {'img': [ < InMemoryUploadedFile: lufei.jpg(image / jpeg) >]} > img_obj = request.FILES.get('img') # MEDIA_ROOT = os.path.join(BASE_DIR,'blog','media')
media_path = settings.MEDIA_ROOT
path = os.path.join(media_path,'article_imgs',img_obj.name) with open(path,'wb') as f:
for line in img_obj:
f.write(line) res = {
"url":"/media/article_imgs/"+img_obj.name,
"error":0
}
return HttpResponse(json.dumps(res))
四、提交文章 - BeautifulSoup
总结:
Article:
nid, title, desc, create_time, comment_count, up_count, down_count, category, user, tags,
ArticleDetail:
nid,content,article 注意点:
title = request.POST.get('title')
article_con = request.POST.get('article_con') 0.防止XSS攻击:引入 (BeautifulSoup)
https://www.cnblogs.com/yuanchenqi/articles/7617280.html
http://beautifulsoup.readthedocs.io/zh_CN/latest/ 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页解析数据。 。。。详细使用。。。 pip3 install beautifulsoup4
from bs4 import BeautifulSoup
soup = BeautifulSoup(article_con,'html.parser') # 过滤 script
for tag in soup.find_all():
if tag.name == 'script':
tag.decompose() # 删除了所有的script标签及内容 获取desc
1.
if desc = article_con[0:150]
会有问题:article_con 内容中含有标签,截取会截不全,导致有的标签没有闭合,样式错乱!
2.
图片代码不截,只截文本 soup.text[0:150] 会有一点问题:
引入:beautifulsoup 针对标签,字符串,做过滤查询。 soup = BeautifulSoup(article_con,'html.parser')
desc = soup.text[0:150]
but: 有一点问题 soup.text # text 把转义的字符又返回去了!!
eg: <script>alert(555)</script>
转为:<script>alert(555)</script>,存到库里有问题的!
所以:
desc = soup.text[0:150]
desc = desc.replace('<', '<').replace('>', '>') <p>{{ article.desc|safe }}</p>3.soup.prettify()
code:
def add_article(request):
if request.method == 'POST':
title = request.POST.get('title')
article_con = request.POST.get('article_con') from bs4 import BeautifulSoup
soup = BeautifulSoup(article_con, 'html.parser') print('text1:', soup.text) # text 把 转义的字符又返回去了!! # 过滤 script
for tag in soup.find_all():
if tag.name == 'script':
tag.decompose() # 删除了所有的script标签 desc = soup.text[0:150]
desc = desc.replace('<', '<').replace('>', '>') article_obj = Article.objects.create(title=title, desc=desc,user=request.user)
# soup.prettify() == str(soup)
ArticleDetail.objects.create(content=soup.prettify(),article=article_obj) return HttpResponse('提交成功') else:
return render(request, 'add_article.html')
class Article(models.Model):
"""
文章信息
"""
nid = models.AutoField(primary_key=True)
title = models.CharField(max_length=50, verbose_name='文章标题')
desc = models.CharField(max_length=255, verbose_name='文章描述')
create_time = models.DateTimeField(verbose_name='创建时间',auto_now_add=True) comment_count = models.IntegerField(default=0) # 为了查询时,效率高!
up_count = models.IntegerField(default=0)
down_count = models.IntegerField(default=0) category = models.ForeignKey(to='Category', to_field='nid', null=True, on_delete=models.CASCADE)
user = models.ForeignKey(verbose_name='作者', to='UserInfo', to_field='nid', on_delete=models.CASCADE) tags = models.ManyToManyField(
to='Tag',
through='Article2Tag',
through_fields=('article','tag'),
) def __str__(self):
return self.title class ArticleDetail(models.Model):
"""
文章详细表
"""
nid = models.AutoField(primary_key=True)
content = models.TextField()
article = models.OneToOneField(to='Article', to_field='nid', on_delete=models.CASCADE)
models.py
五、BBS - 原始版
https://github.com/alice-bj/cnblog_0
BBS - 后台管理的更多相关文章
- 1211 BBS后台管理文章添加
目录 昨日内容回顾 侧边栏inclusion_tag inclusion_tag的响应 使用 自定义inclusion_tag,标签,过滤器 文章的点赞点踩 前端 后端 校验规则 文章的评论功能 1. ...
- 1210 BBS admin后台管理及侧边栏筛选个人站点
目录 昨日内容 django admin后台管理 使用 建表 用户图片的显示 MEDIA用户配置 查找照片 搭建个人站点 防盗链 新建css文件 侧边栏展示标签 定义分类栏与标签栏 定义时间栏 侧边栏 ...
- BBS论坛 后台管理
七.后台管理 后台管理页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- day75 bbs项目☞后台管理+修改头像
目录 一.后台管理之添加文章 二.修改用户头像 bbs项目总结 一.后台管理之添加文章 添加文章有两个需要注意的问题: 文章的简介切取,应该想办法获取到当前文章的文本内容后再截取字符 XSS攻击,由于 ...
- BBS项目之后台管理
一:后台管理,添加文章样式编写 创建 一个后台管理模板前段页面 <!DOCTYPE html> <html lang="en"> <head> ...
- 后台管理UI的选择
最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
- 10天学会phpWeChat——第六天:实现新闻的后台管理
通过前面五讲的系列教程,我们完成了一个简单模块的前端发布.列表展示.详情展示.实际生产环境中,所有前台的数据都会有对应的后台操作进行统筹管理.我们称之为后台管理系统. 今天,我们开始<10天学会 ...
- 后台管理UI皮肤的选择
后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十. ...
- 帝国cms7.0忘记后台管理账户用户名密码
最近刚登陆以前的网站,但是发现自己的后台管理用户名密码已经忘记,于是到帝国cms论坛里面找了一下解决方案,成功解决问题.特此分享一下解决成功经验. 原帖地址:http://bbs.phome.net/ ...
随机推荐
- 1077. Kuchiguse (20)【字符串处理】——PAT (Advanced Level) Practise
题目信息 1077. Kuchiguse (20) 时间限制100 ms 内存限制65536 kB 代码长度限制16000 B The Japanese language is notorious f ...
- Unity3D - 详解Quaternion类(一)
一.简介 Quaternion又称四元数,由x,y,z和w这四个分量组成,是由爱尔兰数学家威廉·卢云·哈密顿在1843年发现的数学概念.四元数的乘法不符合交换律.从明确地角度而言,四元数是复数的不可交 ...
- Json学习一(基础概念知识学习)
1.Json简单介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它使得人们非常easy的进行阅读和编写. 同一时候也方便了机器进行解析和生成.它是基 ...
- git 分支的创建、合并、删除
基本概念与命令 分支(branch):每次提交,Git都把提交的内容串成一条时间线,这条时间线就是一个分支 . git 分支的创建 git branch branchName git ...
- 图像的降采样与升采样(二维插值)----转自LOFTER-gengjiwen
图像的降采样与升采样(二维插值) 1.先说说这两个词的概念: 降采样,即是采样点数减少.对于一幅N*M的图像来说,如果降采样系数为k,则即是在原图中 每行每列每隔k个点取一个点组成一幅图像.降采样很容 ...
- TFS 强制删除锁定文件(数据库)
TFS:TFS2010 VS:VS2012 OS:Windows2008 DB:Sqlserver2008 R2 我们在团队开发当中,版本控制是一个不可忽略的工具.我们团队使用的是TFS2010这个版 ...
- NFS挂在文件系统启动参数
1.tiny6410(增强版)bootargs启动参数(周学伟)noinitrd console=ttySAC0,115200 lcd=S70 init=/init root=/dev/nfs rw ...
- MySQL------Navicat安装与激活
转载: https://blog.csdn.net/WYpersist/article/details/79834490
- 工作流JBPM_day01:5-管理流程定义3点改进
工作流JBPM_day01:5-管理流程定义3点改进 1.打包多个文件上传 再部署一个 查询所有看看,旧版本也查出来了 2.查询时只查询所有最新的版本 3.删除指定名称指定key的所有的它的版本
- 如何利用h5将视频设置为背景
我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步 第一步:准备工作 工欲善其事必先利其器,我们首先 ...