Django blog项目《二十》：后台admin《文章轮播图功能实现》

文章轮播图功能，实现文章的增、删、改、查功能的实现

一、分析

1. 业务流程

1.文章轮播图展示

1. 业务流程

   • 从数据库中获取到所有轮播图的数据

   • 将数据传递给前端进行填充

2. 请求方式、地址、参数

   • 请求方式：GET

   • 请求地址：/admin/article/banner/

   • 权限：view_banner

   • 请求参数：无

2. 文章轮播图删除功能

1. 业务流程

   • 从前端传递一个带有文章id的delete请求
   • 判断数据库中是否有该数据
   • 逻辑删除该文章轮播图，并返回数据到前端

2. 请求方式、地址、参数

   • 请求方式：DELETE

   • 请求地址： /admin/article/banner/<int:banner_id>/

   • 权限：delete_articles

   • 请求参数：

     参数名	类型	是否必传	备注
     article_id	int	必传	路径参数

3. 文章轮播图修改功能

1. 业务流程

   • 判断文章轮播图url是否为空

   • 判断轮播图优先级是否为空

   • 判断优先级是否在规定的优先级列表内

   • 判断轮播图url是否和旧的url一样

   • 判断轮播图改变时将轮播图上传到服务器里面

   • 将数据更新到数据库

2. 请求方式、地址、参数

   • 请求方式：PUT

   • 请求地址：/admin/article/banner/<int:banner_id>/

   • 权限：change_banner

   • 请求参数：

     参数名	类型	是否必传	备注
     banner_id	int	必传	路径参数
     image_url	char	必传	请求体里
     priority	int	必传	请求体里

3. 前端功能实

   • 轮播图、文章类型、文章、优先级任意一个都不能为假

   • 判断优先级是否在规定的优先级列表内

   • 判断轮播图url是否和旧的url一样

   • 判断轮播图改变时将轮播图上传到服务器里面

   • 发起ajax POST求

     • 跳转到轮播图管理页面

4. 后端逻辑处理

   • 轮播图、文章类型、文章、优先级任意一个都不能为假
   • 判断优先级是否在规定的优先级列表内
   • 判断轮播图url是否和旧的url一样
   • 校验成功后将数据保存进数据库

4. 文章轮播图添加功能

1. 业务流程

   • 文章标签改变时对应的文章要改变
   • 判断轮播图是否和默认的图片一样
   • 轮播图、文章类型、文章、优先级任意一个都不能为假
   • 判断优先级是否在规定的优先级列表内
   • 校验成功后保存进数据库
   • 返回数据到前端

2. 请求方式、地址、参数

   • 请求方式：PUT

   • 请求地址：/admin/article/banner/add/

   • 权限：add_banner

   • 请求参数：

     参数名	类型	是否必传	备注
     image_url	char	必传	请求体里
     priority	int	必传	请求体里
     article_id	int	必传	请求体里

3. 前端功能实

   • 文章标签改变时对应的文章要改变

   • 判断轮播图是否和默认的图片一样

   • 轮播图、文章类型、文章、优先级任意一个都不能为假

   • 判断优先级是否在规定的优先级列表内

   • 发起ajax POST请求

     • 跳转到轮播图页面

4. 后端逻辑处理

   • 轮播图、文章类型、文章、优先级任意一个都不能为假
   • 判断优先级是否在规定的优先级列表内
   • 将数据保存进数据库
   • 返回数据到前端

二、文章轮播图展示、删除、更新功能实现

1. urls配置

/admin/urls.py

from django.urls import path

from admin import views

app_name = "admin"

urlpatterns = [

    path("article/banner/", views.ArticleBannerView.as_view(), name="article_banner"),
    path("article/banner/<int:banner_id>/", views.ArticleBannerView.as_view(), name="banner_edit"),
  

]

2. views视图逻辑处理

/admin/views.py

import json

from django.views import View
from django.shortcuts import render
from django.contrib.auth.mixins import PermissionRequiredMixin

from news import models
from utils.res_code.res_code import Code, error_map
from utils.res_code.json_function import to_json_data



# 文章轮播图:查和更新和删除
class ArticleBannerView(PermissionRequiredMixin, View):
    """
    article banner image show and add
    route:/admin/article/banner/ :view
    route:/admin/article/banner/<int:banner_id>/   :delete/put
    permissions:view_banner/change_banner/delete_banner
    """
    permission_required = ("news.view_banner", "news.change_banner", "news.delete_banner")
    raise_exception = True
	
    
    # 轮播图展示
    def get(self, request):
        """
        article banners show
        route:/admin/article/banner/
        :param request:
        :return:
        """
        banners = models.Banner.objects.filter(is_delete=False)
        priority = models.Banner.PRI_CHOICES
        pri_dict = OrderedDict(priority)
        return render(request, "admin/news/article_banner.html", context={
   "banners": banners, "pri_dict": pri_dict})

    # 轮播图删除
    def delete(self, request, banner_id):
        """
        article banner image del
        route:/admin/article/banner/<int:banner_id>/
        :param request:
        :param banner_id:
        :return:
        """
        banner = models.Banner.objects.only("id").filter(is_delete=False, id=banner_id).first()
        if not banner:
            return to_json_data(errno=Code.PARAMERR, errmsg=error_map[Code.PARAMERR])
        else:
            banner.is_delete = True
            banner.save(update_fields=["is_delete"])
            return to_json_data(errmsg="文章轮播图删除成功")
	
    # 轮播图更新
    def put(self, request, banner_id):
        """
        article banner image change
        route:/admin/article/banner/<int:banner_id>/
        :param request:
        :param banner_id:
        :return:
        """
        # 1. 从前端获取到数据
        try:
            json_data = request.body
            if not json_data:
                return to_json_data(errno=Code.PARAMERR, errmsg=error_map[Code.PARAMERR])
            dict_data = json.loads(json_data.decode("utf-8"))
        except Exception as e:
            logger.info("轮播图获取失败：{}".format(e))
            return to_json_data(errno=Code.UNKOWNERR, errmsg=error_map[Code.UNKOWNERR])

        # 2. 判断优先级是否在优先级列表内和为空
        priority = int(dict_data.get("priority"))
        if not priority:
            return to_json_data(errno=Code.PARAMERR, errmsg="优先级不能为空")

        if priority not in [index for index, _ in models.Banner.PRI_CHOICES]:
            return to_json_data(errno=Code.PARAMERR, errmsg="优先级必须在优先级表内")

        # 3. 判断轮播图url是否为空

        image_url = dict_data.get("image_url")
        if not image_url:
            return to_json_data(errno=Code.PARAMERR, errmsg="轮播图url不能为空")

        # 3. 从数据库中拿到该轮播图的信息
        banner = models.Banner.objects.only("priority").filter(is_delete=False, id=banner_id).first()
        if not banner:
            return to_json_data(errno=Code.PARAMERR, errmsg="没有该轮播图")
        ban_priority = banner.priority
        ban_image_url = banner.image_url

        # 4. 判断轮播图有没有做修改
        if ban_priority == priority and ban_image_url == image_url:
            return to_json_data(errno=Code.PARAMERR, errmsg="优先级没有修改")

        banner.priority = priority
        banner.image_url = image_url
        banner.save()
        return to_json_data(errmsg="轮播图优先级修改成功")

3. js前端逻辑实现

js/admin/news/article_banner.js

$(function () {
   
    let $delBtn = $(".del-btn");  //删除按钮
    let $UpdateBtn = $(".update-btn");  //更新按钮
    let $bannerImage = $(".banner-image"); //图片元素
    let $addBtn = $("#banner-add-btn"); //添加按钮
    let $banner = $(".banner");  //整个轮播图列表
    let $imageUpload = $("input[name=banner-image-select]");// 轮播图输入框


    // 轮播图删除
    $delBtn.click(function () {
   
        console.log(11111);
        let _this = this;
        let sBannerId = $(this).parents("li").data("banner-id");
        console.log(sBannerId);

        fAlert.alertConfirm({
     //弹窗
                title: "确定删除该文章轮播图吗？",
                type: "error",
                confirmButtonText: "确认删除",
                cancelButtonText: "取消",
                confirmCallback: function confirmCallback() {
   
                    $.ajax({
   
                        url: "/admin/article/banner/" + sBannerId + "/",
                        type: "DELETE",
                        dataType: "json",
                    })
                        .done(function (res) {
   
                            if (res.errno === "200") {
   
                                message.showError("成功删除文章轮播图！");
                                $(_this).parents("li").