网站内容管理系统上传图片(后台管理框架布局框架分析(组图)路由器上传图片)

　　网站内容管理系统上传图片(后台管理框架布局框架分析(组图)路由器上传图片)

　　总结

　　一、后台管理框架布局搭建

　　后台管理布局框架解析：导航栏、左侧功能区、右侧主要功能展示与实现区

　　

　　实现：

　　导航栏：使用引导模板：JavaScript>>导航栏

　　左侧：使用引导模板：组件>>列表组

　　右侧：使用引导模板：JavaScript>>标签页

　　新建后台管理路由（注意放在站点路由的上方）

　　url(r'^backend/', views.backend),

　　views.py 视图函数：

　　@login_required

def backend(request):

user_obj = request.user

article_list = models.Article.objects.filter(blog=user_obj.blog)

return render(request, 'backend/backend.html', locals())

　　渲染后台管理页面（在templates文件夹下单独创建后台管理文件夹backend，然后在这个文件夹下新建一个backend.html）

　　DOCTYPE html>

后台管理

#top_left {

font-weight: bold;

font-size: 24px;

color: black;

}

#top_title {

color: blue;

font-size: 18px;

font-weight: bold;

font-family: "微软雅黑 Light";

}

{% block css %}

{% endblock %}

{#后台管理导航条#}

Toggle navigation

博客园后台管理

{{ request.user.blog.blog_title }}

{{ request.user.username }}

{# 博客园后台管理#}

{##}

{# {{ request.user.blog.blog_title }}#}

{# {{ request.user.username }}#}

{# 后台管理左侧快捷入口占用2个栅格#}

{# 左侧信息展示：需要参数：tag_list category_list date_list user_obj#}

操作

添加新随笔

草稿箱

添加新文章

其它...

分类

编辑分类

所有分类

其它...

{# 后台管理右侧管理主要内容展示区占用10个栅格#}

{# 右侧文章列表需要参数：article_list#}

{% block content %}

随笔

文章

评论

设置

标题

发布时间

评论数

点赞数

操作

操作

{% for article in article_list %}

{{ article.title }}

{{ article.create_time|date:'Y-m-d' }}

{{ article.comment_num }}

{{ article.up_num }}

编辑

删除

{% endfor %}

...

...

...

{% endblock %}

{% block js %}

{% endblock %}

　　一般结果：

　　

　　二、添加新文章

　　先吃饭吧：

　　建立路线：

　　url(r'^add_article/', views.add_article),

　　渲染页面：继承后台管理主页面

　　{% extends 'backend/backend.html' %}

{% block css %}

#title {

margin-top: 5px;

background-color: rgba(35,206,235,0.2);

height: 22px;

border-top: 1px gray solid;

border-bottom: 1px gray dashed;

}

{% endblock %}

{% block content %}

添加随笔

标题

　　查看功能：

　　def add_article(request):

return render(request, 'backend/add_article.html')

　　

　　那么就可以在以上的基础上继续了：

　　富文本编辑器 KindEditor 的使用

　　插件下载后解压，将其文件夹复制到静态文件夹

　　

　　使用 KindEditor 需要使用 textarea 输入框，所以需要在添加文章的地方添加 textarea 框

　　

　　BeautifulSoup4 模块

　　①表单提交后，后端需要截取一部分文章作为文章的抽象描述。如果直接对提交的内容进行切片，是不会得到文章文本内容的，因为我们通过富文本编辑器提交的内容其实是一行html代码，如果这段代码中有js脚本，可能是 xss 脚本攻击。这里需要对essay内容进行过滤

　　②首先请参考博客园处理xss攻击的方式：

　　在HTML源代码编辑器中写入，更新后打开

　　

　　可以看出，这段代码已经添加到博客园中，导致js脚本无法生效。同时把文章保存起来看了一下，发现这段代码被认为是删除了。

　　所以：

　　博客园处理xss攻击方法：自动给敏感标签添加内容使其失效，后端处理时直接过滤敏感标签删除。

　　引入一个模块BeautifulSoup4：可以对js脚本进行过滤，获取内容中的文本内容，然后进行分割。

　　先安装模块

pip3 install beautifulsoup4

# 这里强调一点：一定要下官方推荐的beautifulsoup4版本，因为beautifulsoup3版本已经停止开发

　　

　　富文本编辑器上传图片

　　通过富文本编辑器上传图片需要另外一个路由来处理上传的图片

　　url(r'^upload_img/', views.upload_img),

　　查看函数upload_img：

　　def upload_img(request):

if request.method == 'POST':

# 前端富文本编辑器上传的图片key值叫imgFile，拿到文件对象

img_obj = request.FILES.get('imgFile')

print(img_obj.name,type(img_obj.name))

# 手动拼接文件存放路径，该文件应该存入media文件夹

path = os.path.join(settings.BASE_DIR, 'media', 'article_img')

# 判断当前路径是否存在，如果不不存在，则创建文件夹

if not os.path.exists(path):

os.mkdir(path)

# 可以通过img_obj.name，拿到这个文件对象的文件名，然后在拼接文件的路径，用于保存写入

file_path = os.path.join(path, img_obj.name)

with open(file_path, 'wb') as f:

for line in img_obj:

f.write(line)

# 这里需要注意富文本编辑器上传图片接收的响应数据格式规定是以下这种形式：

"""

//成功时

{

"error" : 0,

"url" : "http://www.example.com/path/to/file.ext"

}

//失败时

{

"error" : 1,

"message" : "错误信息"

}

"""

back_dic = {

'error': 0,

# 这个url就是前端可以通过路由直接访问到的文件路径,这样做的目的是编辑上传一个图片，编辑器肯定需要

# 拿到该图片渲染到页面上。

'url': '/media/article_img/%s' % img_obj.name

}

return JsonResponse(back_dic)

　　

　　三、修改头像：

　　转载于：