对热门新闻进行管理包含有显示文章名称,文章分类,优先级,操作(编辑,删除)和添加热门新闻等功能
将数据库中的数据显示到页面中,首先创建一个热门新闻的一个模板
{% extends 'admin/base/base.html' %}
{% block title %}
热门文章管理页面
{% endblock %}
{% block content_header %}
热门文章管理
{% endblock %}
{% block header_option_desc %}
正确的决策来自众人的智慧
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="box box-primary">
<div class="box-header">
<a href="#" class="btn btn-primary pull-right"
id="btn-add-news-recommend">添加热门文章</a>
</div>
<div class="box-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>文章名称</th>
<th>文章分类</th>
<th>优先级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{##循环遍历热门新闻#}
{% for hot_new in hot_news %}
<tr data-id="{{ hot_new.id }}" data-name="{{ hot_new.news.title}}">
<td>
<a href="{% url 'news_detail' hot_new.id %}" data-news-id="{{ hot_new.id }}">
{{ hot_new.news.title }}
</a>
</td>
<td>{{ hot_new.news.tag.name }}</td>
<td>{{ hot_new.priority }}</td>
<td>
<button class="btn btn-xs btn-warning btn-edit"
data-priority="{{ hot_new.priority }}">编辑</button>
<button class="btn btn-xs btn-danger btn-del">删除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="box-footer"></div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script src="/static/js/admin/news/news_hot.js"></script>
{% endblock %}
编写相应的视图函数,将从数据库中的调用数据,显示到前台
def get(self, request):
hot_news = models.HotNews.objects.select_related('news__tag'). \
only('news_id', 'news__title', 'news__tag__name', 'priority'). \
filter(delete_is=False).order_by('priority')
return render(request, 'admin/news/news_hot.html',locals())
配置相应的路由
path('hotnews/',views.News_hot.as_view(),name='hotnews'),
path('hotnews/<int:hotnews_id>/',views.News_hot.as_view(),name='hotnews'),
实现编辑功能
编写编辑功能的js代码:
$(function () {
// 编辑热门文章
let $HotNewsEdit = $(".btn-edit"); // 1. 获取编辑按钮
$HotNewsEdit.click(function () { // 2. 点击触发事件
let _this = this;
//获取id值
let sHotNewsId = $(this).parents('tr').data('id');
// let sHotNewsTitle = $(this).parents('tr').data('name');
//获取优先级
let sPriority = $(this).data('priority');
fAlert.alertOneInput({
title: "编辑热门文章优先级",
text: "你正在编辑热门文章的优先级",
placeholder: "请输入文章优先级",
value: sPriority,
confirmCallback: function confirmCallback(inputVal) {
if (!inputVal.trim()) {
swal.showInputError('输入框不能为空!');
return false;
}
else if (inputVal == sPriority) {
swal.showInputError('优先级未修改');
return false;
}
// else if (!jQuery.inArray(inputVal, ['1', '2', '3'])) {
// swal.showInputError('优先级只能取1,2,3中的一个');
// return false;
// }
let sDataParams = {
"priority": inputVal
};
$.ajax({
// 请求地址
url: "/admin/hotnews/" + sHotNewsId + "/", // url尾部需要添加/
// 请求方式
type: "PUT",
data: JSON.stringify(sDataParams),
// 请求内容的数据类型(前端发给后端的格式)
contentType: "application/json; charset=utf-8",
// 响应数据的格式(后端返回给前端的格式)
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
swal.close();
message.showSuccess("标签修改成功");
// $(_this).parents('tr').find('td:nth-child(3)').text(inputVal);
setTimeout(function () {
window.location.href = '/admin/hotnews/';
}, 1000)
} else {
swal.showInputError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
});
});
}
)
写相应的视图函数
def put(self,request,hotnews_id):
json_data = request.body
if not json_data:
return to_json_data(errno=Code.PARAMERR, errmsg="输入数据为空")
# 将json转化为dict
dict_data = json.loads(json_data)
priority = int(dict_data.get('priority'))
priority_list = [1,2,3]
if priority not in priority_list:
return to_json_data(errno=Code.PARAMERR, errmsg='热门文章的优先级设置错误')
hotnews = models.HotNews.objects.only('id').filter(id=hotnews_id).first()
if not hotnews:
return to_json_data(errno=Code.PARAMERR, errmsg="需要更新的热门文章不存在")
if hotnews.priority == priority:
return to_json_data(errno=Code.PARAMERR, errmsg="热门文章的优先级未改变")
hotnews.priority = priority
hotnews.save(update_fields=['priority'])
return to_json_data(errmsg="热门文章更新成功")
热门新闻的删除
先写对应的js文件
$(function () {
// 编辑热门文章
let $HotNewsEdit = $(".btn-edit"); // 1. 获取编辑按钮
$HotNewsEdit.click(function () { // 2. 点击触发事件
let _this = this;
//获取id值
let sHotNewsId = $(this).parents('tr').data('id');
// let sHotNewsTitle = $(this).parents('tr').data('name');
//获取优先级
let sPriority = $(this).data('priority');
fAlert.alertOneInput({
title: "编辑热门文章优先级",
text: "你正在编辑热门文章的优先级",
placeholder: "请输入文章优先级",
value: sPriority,
confirmCallback: function confirmCallback(inputVal) {
if (!inputVal.trim()) {
swal.showInputError('输入框不能为空!');
return false;
}
else if (inputVal == sPriority) {
swal.showInputError('优先级未修改');
return false;
}
// else if (!jQuery.inArray(inputVal, ['1', '2', '3'])) {
// swal.showInputError('优先级只能取1,2,3中的一个');
// return false;
// }
let sDataParams = {
"priority": inputVal
};
$.ajax({
// 请求地址
url: "/admin/hotnews/" + sHotNewsId + "/", // url尾部需要添加/
// 请求方式
type: "PUT",
data: JSON.stringify(sDataParams),
// 请求内容的数据类型(前端发给后端的格式)
contentType: "application/json; charset=utf-8",
// 响应数据的格式(后端返回给前端的格式)
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
swal.close();
message.showSuccess("标签修改成功");
// $(_this).parents('tr').find('td:nth-child(3)').text(inputVal);
setTimeout(function () {
window.location.href = '/admin/hotnews/';
}, 1000)
} else {
swal.showInputError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
});
});
// 删除热门文章
let $HotNewsDel = $(".btn-del"); // 1. 获取删除按钮
$HotNewsDel.click(function () { // 2. 点击触发事件
let _this = this;
let sHotNewsId = $(this).parents('tr').data('id');
fAlert.alertConfirm({
title: "确定删除热门文章吗?",
type: "error",
confirmText: "确认删除",
cancelText: "取消删除",
confirmCallback: function confirmCallback() {
$.ajax({
url: "/admin/hotnews/" + sHotNewsId + "/", // url尾部需要添加/
type: "DELETE",
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
message.showSuccess("删除热门文章成功");
$(_this).parents('tr').remove();
} else {
swal.showInputError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
});
});
}
)
写相应的视图函数
def delete(self,request,hotnews_id)://
//通过传入的id来获取对应的热点新闻,然后将对应的热点新闻通过逻辑删除,实现删除功能,最后保存数据库即可
hot_news=HotNews.objects.only('id').filter(delete_is=False).first();
if hot_news:
hot_news.delete_is=True;
hot_news.save();
return to_json_data(errmsg="执行成功")
else:
return to_json_data(errno=Code.PARAMERR,errmsg="删除的资源不存在")
热点新闻的追加
写相应额前端页面
{% extends 'admin/base/base.html' %}
{% block title %}
添加热门文章
{% endblock %}
{% block content_herader %}
添加热门文章
{% endblock %}
{% block header_option %}
创建热门文章
{% endblock %}
{% block content %}
<div class="box box-primary">
<div class="box-body">
<div class="form-horizontal">
<div class="form-group">
<label for="category-select" class="col-md-2 col-sm-2 control-label">选择文章</label>
<div class="col-md-2 col-sm-3">
<select name="category" id="category-select" class="form-control input-md">
<option value="0">--请选择文章分类--</option>
{% for one_tag in tags %}
<option value="{{ one_tag.id }}">{{ one_tag.name }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-8 col-sm-7">
<label for="news-select" style="display: none;"></label>
<select name="news" class="form-control input-md" id="news-select">
<option value="0">--请选择文章--</option>
</select>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-2 col-sm-2 control-label">选择优先级</label>
<div class="col-md-2 col-sm-3">
<select name="priority" id="priority" class="form-control input-md">
<option value="0">--请选择优先级--</option>
{% for id, value in priority_dict.items %}
<option value="{{ id }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="box-footer">
<a href="javascript:void(0);" class="btn btn-primary pull-right" id="save-btn">保存</a>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script src="{% static 'js/admin/news/news_hot_add.js' %}"></script>
{% endblock %}
写js代码
$(function () {
let $tagSelect = $("#category-select"); // 获取选择分类标签元素
let $newsSelect = $("#news-select"); // 获取选择文章标签元素
let $saveBtn = $('#save-btn'); // 获取保存按钮元素
// 选择文章不同类别,获取相应的文章
$tagSelect.change(function () {
// 获取当前选中的下拉框的value
let sTagId = $(this).val();
if (sTagId === '0') {
$newsSelect.children('option').remove();
$newsSelect.append(`<option value="0">--请选择文章--</option>`);
return
}
// 根据文章分类id向后端发起get请求
$.ajax({
url: "/admin/tags/" + sTagId + "/news/", // url尾部需要添加/
type: "GET",
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
$newsSelect.children('option').remove();
$newsSelect.append(`<option value="0">--请选择文章--</option>`);
res.data.news.forEach(function (one_news) {
let content = `<option value="${one_news.id}">${one_news.title}</option>`;
$newsSelect.append(content)
});
} else {
// swal.showInputError(res.errmsg);
fAlert.alertErrorToast(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
});
// 点击保存按钮执行的事件
$saveBtn.click(function () {
// 获取优先级
let priority = $("#priority").val();
// 获取下拉框中选中的文章标签id 和 文章id
let sTagId = $tagSelect.val();
let sNewsId = $newsSelect.val();
// 打印值
// console.log(`
// priority(优先级): ${priority}
// tagId(文章标签id): ${sTagId}
// newsId(文章id): ${sNewsId}
// `);
// 判断是否为 0, 表示在第一个 未选择
if (sTagId !== '0' && sNewsId !== '0' && priority !== '0') {
let sDataParams = {
"priority": priority,
"news_id": sNewsId
};
$.ajax({
// 请求地址
url: "/admin/hotadd/", // url尾部需要添加/
// 请求方式
type: "POST",
data: JSON.stringify(sDataParams),
// 请求内容的数据类型(前端发给后端的格式)
contentType: "application/json; charset=utf-8",
// 响应数据的格式(后端返回给前端的格式)
dataType: "json",
})
.done(function (res) {
if (res.errno === "0") {
message.showSuccess("热门文章创建成功");
setTimeout(function () {
window.location.href = '/admin/hotnews/';
}, 800)
} else {
// swal.showInputError(res.errmsg);
message.showError(res.errmsg);
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
} else {
message.showError("文章分类、文章以及优先级都要选!");
}
});
})
视图函数的书写
class Hot_add(View):
def get(self,request):
#获取标签信息
tags=models.Tag.objects.values('id','name').annotate(num_news=Count('news'))\
.filter(delete_is=False).order_by('-num_news')
#获取优先级信息:OrderedDict,将无序的字典变成有序
PRI_CHOICES=[
(1,'第一级'),
(2,'第二级'),
(3,'第三级'),
]
priority_dict = OrderedDict(PRI_CHOICES)
return render(request,'admin/news/News_hot_add.html',locals())
def post(self,request):
json_data = request.body
if not json_data:
return to_json_data(errno=Code.PARAMERR, errmsg="参数错误")
# 将json转化为dict
dict_data = json.loads(json_data)
news_id = int(dict_data.get('news_id'))
if not news_id:
return to_json_data(errno=Code.PARAMERR, errmsg='参数错误')
if not models.News.objects.filter(id=news_id).exists():
return to_json_data(errno=Code.PARAMERR, errmsg='文章不存在')
#获取优先级
priority = int(dict_data.get('priority'))
priority_list = [1,2,3]
if priority not in priority_list:
return to_json_data(errno=Code.PARAMERR, errmsg='热门文章的优先级设置错误')
# 创建热门新闻
hotnews_tuple = models.HotNews.objects.get_or_create(news_id=news_id,priority=priority)
hotnews, is_created = hotnews_tuple
hotnews.priority = priority # 修改优先级
# hotnews.save(update_fields=['priority'])
hotnews.save()
return to_json_data(errmsg="热门文章创建成功")