一、后臺功能的初始配置
1. urls.py路由分發(fā)
re_path('app02/', include('app02.urls')),
2.app02/urls.py
from django.urls import path, re_path, include
from app02 import views
urlpatterns = [
path('home/', views.home),
path('article_list/', views.article_list),
path('add_article/', views.add_article),
path('upload_image/', views.upload_image),
]
二、后臺功能之首頁
1.首頁前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'js/jquery.min.js' %}"></script>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>
</head>
<body>
{# 導(dǎo)航條開始 #}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BBS博客園后臺系統(tǒng)</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">文章 <span class="sr-only">(current)</span></a></li>
<li><a href="#">分類</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">點我看更多美女哦 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{% if request.session.username %}
<li style="line-height: 50px;">
<!-- /media/{ article.blog.userinfo.avatar }} -->
{# <img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" style="width: 100px;" alt="..."> #}
<img src="/media/{{ cur_avatar }}" style="width: 50px; height: 36px;" class="onImg" alt="">
</li>
<li><a href="#">{{ request.session.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li>
<li><a href="#">更改頭像</a></li>
<li><a href="/logout/">退出登錄</a></li>
<li><a href="#">后臺管理</a></li>
</ul>
</li>
{% else %}
<li><a href="/login/">登錄</a></li>
<li><a href="/register/">注冊</a></li>
{% endif %}
</ul>
<!-- 模態(tài)框 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<h1 class="text-center">修改密碼</h1>
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
用戶名：<input type="text" readonly value="{{ request.session.username }}"
class="form-control">
</div>
<div class="form-group">
原密碼：<input type="password" id="old_password" class="form-control" msg="原密碼必須輸入">
</div>
<div class="form-group">
新密碼：<input type="password" id="new_password" class="form-control" msg="原密碼必須輸入">
</div>
<div class="form-group">
確認(rèn)密碼：<input type="password" id="re_password" class="form-control" msg="原密碼必須輸入">
</div>
<div class="form-group">
<input type="button" value="修改密碼" class="btn btn-primary btn-block btn_password">
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{# 導(dǎo)航條結(jié)束 #}
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">
首頁
</a>
<a href="/app02/article_list/" class="list-group-item">文章列表</a>
<a href="#" class="list-group-item">分類類別</a>
<a href="#" class="list-group-item">標(biāo)簽列表</a>
<a href="#" class="list-group-item">更多</a>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-info">
<div class="panel-heading">我自一口真氣足</div>
<div class="panel-body">
{% block content %}
<div class="jumbotron">
<h1>最牛叉的博客平臺</h1>
<p>無招勝有招</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">更過風(fēng)景</a></p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img2.baidu.com/it/u=3323311628,2330835932&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1692464400&t=3cf590e7ea88465e48ef5170f7c70884"
alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>清風(fēng)拂山崗</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
class="btn btn-default"
role="button">如來神掌</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img2.baidu.com/it/u=3323311628,2330835932&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1692464400&t=3cf590e7ea88465e48ef5170f7c70884"
alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>清風(fēng)拂山崗</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
class="btn btn-default"
role="button">如來神掌</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://img2.baidu.com/it/u=3323311628,2330835932&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1692464400&t=3cf590e7ea88465e48ef5170f7c70884"
alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>清風(fēng)拂山崗</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
class="btn btn-default"
role="button">如來神掌</a>
</p>
</div>
</div>
</div>
</div>
{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% block js %}
{% endblock %}
</body>
</html>
2.首頁后端
def home(request):
return render(request, 'backend/home.html', locals())
三、后臺功能之文章列表展示
1.文章列表展示前端
{% extends 'backend/home.html' %}
{% block content %}
<h2 class="text-center">文章列表</h2>
<form action="">
<div class="form-group">文章標(biāo)題
<input type="text" id="title" class="form-control">
</div>
<div class="form-group">文章分類
<select name="" id="cate" class="form-control">
{% for cate in cate_list %}
<option value="{{ cate.pk }}">{{ cate.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<p>文章標(biāo)簽</p>
{% for tags in tags_list %}
{{ tags.name }} <input type="checkbox" value="{{ tags.pk }}" name="tags">
{% endfor %}
</div>
<div class="form-group">文章內(nèi)容
<textarea id="editor_id" name="content" style="width:100%;height:300px;"></textarea>
</div>
<div class="form-group">
<input type="button" id="title" value="提交" class="btn btn-success btn-block btn_article">
</div>
</form>
{% endblock %}
{% block js %}
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
height: '500px',
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'
],
colorTable: [
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
],
resizeType: 0, // 0,1,2
uploadJson : '/app02/upload_image/',
extraFileUploadParams : {
csrfmiddlewaretoken: '{{ csrf_token }}'
},
});
});
$(".btn_article").click(function () {
// 接收參數(shù)
// 標(biāo)題
let title = $("#title").val();
//分類
let cate_id = $("#cate").val();
// 標(biāo)簽:由于是復(fù)選框，所以有可能有多個值的情況，需用循環(huán)取值
// 定義一個數(shù)組，用于接收tags的值
tags_arr = []
var tags = $("input[name='tags']:checked");
$.each(tags, function (index, value) {
console.log(index, $(this).val());
// 將復(fù)選框的值放入數(shù)組中
tags_arr.push($(this).val());
});
console.log(tags_arr); // [3, 4]
// 注意：由于這里的值是數(shù)組，在后端獲取不到，需要轉(zhuǎn)為字符串才能傳給后端獲取
// 數(shù)組轉(zhuǎn)字符串 join
var tags_str = tags_arr.join(',') // 3, 4
console.log(tags_str);
// 內(nèi)容
// 同步數(shù)據(jù)后可以直接取得textarea的value
editor.sync();
content = $('#editor_id').val(); // jQuery
console.log(content)
// 發(fā)起Ajax請求
$.ajax({
url: '',
type: 'post',
data: {
title: title,
cate_id: cate_id,
tags: tags_str,
content: content,
csrfmiddlewaretoken: '{{ csrf_token }}',
},
success: function (res) {
if (res.code === 200) {
layer.msg(res.msg, {} ,function () {
location.href = '/app02/article_list/'
});
} else {
layer.msg(res.msg, {});
}
}
});
});
</script>
{% endblock %}
2.文章列表后端
def article_list(request):
# 查詢出所有的文章列表
articles_list = models.Article.objects.all()
return render(request, 'backend/article_list.html', locals())
三、后臺功能之添加文章
1.添加文章前端
{% extends 'backend/home.html' %}
{% block content %}
<h3 class="text-center">添加文章</h3>
<form action="">
<div class="form-group">文章標(biāo)題：
<input type="text" id="title" class="form-control">
</div>
<div class="form-group">文章分類：
<select name="" id="cate" class="form-control">
{% for category in category_list %}
<option value="{{ category.pk }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<p>文章標(biāo)簽：</p>
{% for tags in tags_list %}
{{ tags.name }}
<input type="checkbox" id="title" name="tags" value="{{ tags.pk }}" style="margin-right: 10px;">
{% endfor %}
</div>
<div class="form-group">文章內(nèi)容：
<textarea id="editor_id" name="content" style="width:100%;height:400px;"></textarea>
</div>
<div class="form-group">
<!-- type="submit" 會自動提交表單 -->
<!-- <button></button> 會自動提交表單，注意：當(dāng)寫在外面的時候才不會自動提交form表單 -->
{# <input type="submit" value="提交" id="title" class="btn btn-success btn-block"> #}
<!-- type="button" 不會自動提交表單 -->
<input type="button" value="提交" id="title" class="btn btn-success btn-block btn_article">
</div>
</form>
{% endblock %}
2.添加文章后端
def add_article(request):
# 文本編輯器官網(wǎng) http://www.kindsoft.net/down.php
user_obj = models.UserInfo.objects.filter(pk=request.session.get('id')).first()
if not user_obj:
return redirect('/login/')
blog = user_obj.blog
# 查詢所有的分類
category_list = models.Category.objects.all()
# 查詢所有的標(biāo)簽列表
tags_list = models.Tag.objects.all()
back_dict = {'code': 200, 'msg': '添加成功', 'data': []}
# 1.獲取前段傳遞過來的數(shù)據(jù)
if request.method == 'POST':
title = request.POST.get('title')
cate_id = request.POST.get('cate_id')
content = request.POST.get('content')
tags = request.POST.get('tags') # 1, 2
# tags原本是一個列表，但是前端傳值時進(jìn)行了轉(zhuǎn)換，有列表轉(zhuǎn)為了字符串
# 在此，要先轉(zhuǎn)位列表去使用
tags_list = tags.split(',') # [1, 2]
# 2.參數(shù)驗證
if not title:
back_dict['code'] = 1500
back_dict['msg'] = '標(biāo)題必須有'
return JsonResponse(back_dict)
if not cate_id:
back_dict['code'] = 1501
back_dict['msg'] = '分類必須選擇'
return JsonResponse(back_dict)
if not tags:
back_dict['code'] = 1502
back_dict['msg'] = '標(biāo)簽必須選擇'
return JsonResponse(back_dict)
if not content:
back_dict['code'] = 1503
back_dict['msg'] = '內(nèi)容不能為空'
return JsonResponse(back_dict)
'''
1.摘要截取的問題
2.xss攻擊的問題----->原理：有了script標(biāo)簽------>把提交過來的內(nèi)容過濾出script標(biāo)簽，然后做刪除
解決方法：
1.使用正則匹配 script，匹配到之后，做刪除，這個方法很麻煩，不推薦
2.利用第三方模塊來處理：bs4模塊
pip install bs4
BeautifulSoup它是用在爬蟲里面，它能夠篩選數(shù)據(jù)，清晰html數(shù)據(jù)
BeautifulSoup('', 'html.parser')
使用lxml的話需要安裝 pip install lxml
BeautifulSoup('', 'lxml')
'''
# 解決xss攻擊的問題
from bs4 import BeautifulSoup
soup = BeautifulSoup(content, 'html.parser')
# print(soup.find_all('a')) # 寫的a那么久就篩選a
# print(soup.find_all('script'))
# print(soup.text) # 打印文本內(nèi)容
for tag in soup.find_all():
# print(tag.name)
if tag.name == 'script':
# 刪除script
tag.decompose()
# 文章摘要直接從內(nèi)容中截取 100字
desc = soup.text[:100]
# 3.數(shù)據(jù)入庫，需要操作文章表，文章、標(biāo)簽的第三張表
article_obj = models.Article.objects.create(title=title, content=str(soup), desc=desc, category_id=cate_id,
blog=blog)
# 操作標(biāo)簽的第三張表，數(shù)據(jù)是多對多，選擇批量插入數(shù)據(jù)
article_tag_list = []
for i in tags_list:
article_tag_obj = models.Article2Tag(article_id=article_obj.pk, tag_id=i)
article_tag_list.append(article_tag_obj)
models.Article2Tag.objects.bulk_create(article_tag_list)
return JsonResponse(back_dict)
return render(request, 'backend/add_article.html', locals())
四、后臺功能之上傳文件
1.添加文章前端
{% extends 'backend/home.html' %}
{% block content %}
<h3 class="text-center">添加文章</h3>
<form action="">
<div class="form-group">文章標(biāo)題：
<input type="text" id="title" class="form-control">
</div>
<div class="form-group">文章分類：
<select name="" id="cate" class="form-control">
{% for category in category_list %}
<option value="{{ category.pk }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<p>文章標(biāo)簽：</p>
{% for tags in tags_list %}
{{ tags.name }}
<input type="checkbox" id="title" name="tags" value="{{ tags.pk }}" style="margin-right: 10px;">
{% endfor %}
</div>
<div class="form-group">文章內(nèi)容：
<textarea id="editor_id" name="content" style="width:100%;height:400px;"></textarea>
</div>
<div class="form-group">
<!-- type="submit" 會自動提交表單 -->
<!-- <button></button> 會自動提交表單，注意：當(dāng)寫在外面的時候才不會自動提交form表單 -->
{# <input type="submit" value="提交" id="title" class="btn btn-success btn-block"> #}
<!-- type="button" 不會自動提交表單 -->
<input type="button" value="提交" id="title" class="btn btn-success btn-block btn_article">
</div>
</form>
{% endblock %}
{% block js %}
{% load static %}
<script charset="utf-8" src="{% static 'kindeditor/kindeditor-all.js' %}"></script>
<script charset="utf-8" src="{% static 'kindeditor/lang/zh-CN.js' %}"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
height: '300px',
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,
colorTable: [
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000'],
],
uploadJson: '/upload_image/',
extraFileUploadParams: {
csrfmiddlewaretoken: '{{ csrf_token }}'
},
});
});
// 綁定點擊事件
$(".btn_article").click(function () {
// 同步數(shù)據(jù)后可以直接取得textarea的value
editor.sync();
// 獲取數(shù)據(jù)
// 標(biāo)題
let title = $("#title").val();
// 分類
let cate = $("#cate").val();
// 文章標(biāo)簽是復(fù)選框，所以通過屬性選擇器獲取值，
// 由于是復(fù)選框的緣故，可能會有多個值的情況出現(xiàn)，所以應(yīng)該循環(huán)取值
// 注意：獲取復(fù)選框時，不要加上 .val(),循環(huán)取值的再加上
let tags = $("input[name='tags']:checkbox");
let tags_arr = []
$.each(tags, function (index, value) {
tags_arr.push($(this).val());
});
console.log(tags_arr); // [1,2,3,4]
// 由于是數(shù)組，所以傳遞到后臺的數(shù)據(jù)不是字符串，要先轉(zhuǎn)為字符串
// 在下面的Ajax的 data 中傳值也要傳遞字符串
var tags_str = tags_arr.join(',');
console.log(tags_str);
// 內(nèi)容
{#html = document.getElementById('editor_id').value; // 原生API#}
{#html = K('#editor_id').val(); // KindEditor Node API#}
let content = $("#editor_id").val(); // jQuery
console.log(content);
// 發(fā)起Ajax請求
$.ajax({
url: '',
type: 'post',
data: {
title: title,
cate: cate,
tags: tags_str,
content: content,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (res) {
if (code === 200) {
layer.msg(res.msg, {}, function () {
location.href = '/app02/article_list/';
});
} else {
layer.msg(res.msg, {});
}
}
});
});
</script>
{% endblock %}
2.添加文章后端
# 上傳圖片
def upload_image(request):
'''
返回格式：josn
//成功時
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失敗時
{
"error" : 1,
"message" : "錯誤信息"
}
'''
# 方式1：
if request.method == 'POST':
file_obj = request.FILES.get('imgFile')
# print(file_obj) # <MultiValueDict: {'imgFile': [<InMemoryUploadedFile: 7.jpg (image/jpeg)>]}>
# 拼接上傳文件的路徑
import os
from django.conf import settings
# /media/article_img/xx.123.png
BASE_DIE = os.path.join(settings.BASE_DIR, 'media', 'article_img')
file_name = os.path.join(BASE_DIE, file_obj.name)
with open(file_name, 'wb') as f:
for line in file_obj:
f.write(line)
# return HttpResponse('OK')
return JsonResponse({
"error": 0,
"url": "/media/article_img/%s" % file_obj.name
})
# 方式2：將文件名用uuid隨機(jī)生成重命名
# 生成新的文件名
import uuid
new_str = str(uuid.uuid4())
new_uuid = new_str.replace('-', '')
new_file_name = new_uuid + '.' + file_obj.name.rsplit('.')[-1]
new_file = os.path.join(BASE_DIE, new_file_name)
with open(new_file, 'wb') as f:
for line in file_obj:
f.write(line)
return JsonResponse({
"error": 0,
"url": "/media/article_img/%s" % new_file_name
})
文章來源地址http://www.zghlxwxcb.cn/news/detail-661262.html
文章來源：http://www.zghlxwxcb.cn/news/detail-661262.html
到了這里，關(guān)于BBS項目day05 后臺系統(tǒng)功能(首頁、文章列表展示、添加文章、上傳文件)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![如何實現(xiàn)仿微信界面[我的+首頁聊天列表+長按菜單功能+添加菜單功能]](https://imgs.yssmx.com/Uploads/2024/04/844354-1.jpg)
