第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说

Posted 2020-10-08 林贵秀

第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，自定义列表页上传插件

 

设置后台列表页面字段统计

在当前APP里的adminx.py文件里的数据表管理器里设置

aggregate_fields = {\'字段名称\':\'sum为统计数，min为统计时间\'}

class CourseAdmin(object):               # 自定义数据表管理器类

    # 设置xadmin后台显示字段
    list_display = [\'name\', \'desc\', \'detail\', \'degree\', \'learn_times\', \'students\',
                    \'fav_nums\', \'image\', \'click_nums\', \'add_time\']

    # 设置xadmin后台搜索字段，注意：搜索字段如果有时间类型会报错
    search_fields = [\'name\', \'desc\', \'detail\', \'degree\', \'learn_times\', \'students\',
                     \'fav_nums\', \'image\', \'click_nums\']

    # 设置xadmin后台过滤器帅选字段，时间用过滤器来做
    list_filter = [\'name\', \'desc\', \'detail\', \'degree\', \'learn_times\', \'students\',
                   \'fav_nums\', \'image\', \'click_nums\', \'add_time\']
    model_icon = \'fa fa-clone\'
    style_fields = {\'detail\':\'ueditor\'}
    # import_excel = True
    aggregate_fields = {\'fav_nums\':\'sum\'}

xadmin.site.register(Course, CourseAdmin)     # 将数据表注册到xadmin后台显示

 

 

自定义列表页上传插件

 

注册插件APP

INSTALLED_APPS = [
    \'django.contrib.admin\',
    \'django.contrib.auth\',
    \'django.contrib.contenttypes\',
    \'django.contrib.sessions\',
    \'django.contrib.messages\',
    \'django.contrib.staticfiles\',
    \'app_users\',                        # 注册 APP
    \'app_courses\',
    \'app_organization\',
    \'app_operation\',
    \'xadmin\',                           # 注册xadmin的app
    \'reversion\',
    \'crispy_forms\',                     # 注册xadmin的依赖app
    \'captcha\',                          # 注册验证码app
    \'pure_pagination\',                  # 注册分页app
    \'DjangoUeditor\',                    # 注册DjangoUeditor的APP
    \'wen_jian_shang_chuanpy\',           # 注册上传插件app
]

 

配置插件上传URL路由逻辑

from extra_apps.wen_jian_shang_chuanpy.shang_chuan_wen_jian import Shang_chuan_wen_jian
urlpatterns = [
    url(r\'^xadmin/\', xadmin.site.urls),

    url(r\'^index.html\', TemplateView.as_view(template_name=\'index.html\'), name=\'index\'),

    # 注册
    url(r\'^register.html\', zhu_ce.as_view(), name=\'register\'),
    url(r\'^captcha/\', include(\'captcha.urls\'), name=\'captcha\'),
    url(r\'^active/(?P<active_de>.*)/$\', active_code.as_view(), name="user_active"),

    # 登录
    url(r\'^login.html\', TemplateView.as_view(template_name=\'login.html\'), name=\'login\'),
    url(r\'^deng_lu\', deng_lu.as_view(), name=\'deng_lu\'),
    url(r\'^logout\', logout.as_view(), name=\'deng_lu\'),

    # 授课机构
    url(r\'^org_list.html\', org_list.as_view(), name=\'org_list\'),

    # 专门处理静态资源请求映射，也就是media上传文件夹里的请求映射
    url(r\'media/(?P<path>.*)$\', serve, {\'document_root\': MEDIA_ROOT}),

    # 配置静态文件访问
    # url(r\'static/(?P<path>.*)$\', serve, {\'document_root\': STATIC_ROOT}),

    url(r\'course_comment.html\', course_comment.as_view(), name=\'course_comment\'),
    url(r\'usercenter_info.html\', usercenter_info.as_view(), name=\'usercenter_info\'),

    # 上传头像
    url(r\'touxiang/\', touxiang.as_view(), name=\'touxiang\'),

    # 配置DjangoUeditor富文本路由映射
    url(r\'^ueditor/\', include(\'DjangoUeditor.urls\')),

    # 配置后台上传映射
    url(r\'^shang_chuan_wen_jian/\', Shang_chuan_wen_jian, name=\'Shang_chuan_wen_jian\'),
]

 

models.py里要上传文件的类里自定义函数，函数里执行插件里的一个函数

class CourseResource(models.Model):
    course = models.ForeignKey(Course, verbose_name=\'外键课程表\')
    name = models.CharField(max_length=100, verbose_name=\'课程资源名称\')
    download = models.FileField(upload_to=\'course/resource/%Y/%m\', storage=ImageStorage(), verbose_name=\'资源文件\', max_length=100)
    add_time = models.DateTimeField(default=datetime.now, verbose_name=\'添加日期\')

    class Meta:
        verbose_name = \'课程资源表\'
        verbose_name_plural = verbose_name

        # 自定义列

    def xiougai(self):
        from extra_apps.wen_jian_shang_chuanpy.shang_chuan_wen_jian import book_hanshu
        book = book_hanshu(self.download, self.id, \'app_courses\', \'CourseResource\', \'download\')
        return book  # 返回HTML显示到页面
    xiougai.short_description = \'修改文件\'

    def __str__(self):
        return self.name

 

adminx.py里开启插件

class CourseResourceAdmin(object):
    list_display = [\'course\', \'name\', \'download\', \'add_time\', \'xiougai\']
    search_fields = [\'course\', \'name\', \'download\']
    list_filter = [\'course\', \'name\', \'download\', \'add_time\']
    model_icon = \'fa fa-hdd-o\'
    # list_editable = [\'download\']
    # show_detail_fields = [\'download\']
    shang_chuan_wen_jian = True

xadmin.site.register(CourseResource, CourseResourceAdmin)

 

插件文件shang_chuan_wen_jian.py

#!/usr/bin/env python
# -*- coding:utf8 -*-
import json
from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt,csrf_protect
from django.utils.safestring import mark_safe                       # 允许执行html代码

from xadmin.sites import site
from xadmin.views import BaseAdminPlugin, ListAdminView, CommAdminView, ModelAdminView

from MxOnline import settings
from apps.utils.uploadfile import Uploadfile


def book_hanshu(download, id, app, models_biao, ziduan):
    """
    :第一个参数，接收上传数据字段的数据库数据
    :第二个参数，接收上传数据字段的数据库数据id
    :第三个参数，接收当前的APP名称
    :第四个参数，接收当前数据表的类名
    :第五个参数，接收，当前上传字段名称
    :return:
    """
    book = """
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span></button>
                    <h4 class="modal-title">上传文件</h4></div>
                <div class="modal-body">
                    <form method="post" enctype="multipart/form-data">
                        <div id="yuan_shi" class="alert alert-success"></div>
                        <div id="tishi" class="alert alert-success">请选择您要上传的文件</div>
                        <input id="file" class="btn btn-default" type="file" name="file"/>
                        <input id=\'app\' value="" type="hidden" name="app"/>
                        <input id=\'models_biao\' value="" type="hidden" name="models_biao"/>
                        <input id=\'n_id\' value="" type="hidden" name="n_id"/>
                        <input id=\'ziduan\' value="" type="hidden" name="ziduan"/>
                        <span id="daxiao"></span><br/>
                        <span id="daxiao2"></span><br/>
                        <div id="jdt" class="progress">
                            <div id="prog" class="progress-bar" style="min-width:20px; width: 0%;">0%</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="shch_anllou" type="button" class="btn btn-primary">
                        上传文件
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--data-toggle="modal"声明事件切换类型，modal表示模态框类型(Bootstrap)-->
    <!--data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素(Bootstrap)-->
    <span></span>
    <button n_nr="{download}" n_id=\'{n_id}\' app=\'{app}\' models_biao=\'{models_biao}\' ziduan=\'{ziduan}\' class="btn btn-primary btn-xs xiou_gai" data-toggle="modal" data-target="#myModal">
        点击修改
    </button>
    """.format(download=download, n_id=id, app=app, models_biao=models_biao, ziduan=ziduan)
    return mark_safe(book)

# 上传逻辑
@csrf_exempt
def Shang_chuan_wen_jian(request):
    if request.method == "POST":
        file = request.FILES.get(\'file\')                    # 获取上传文件对象
        xieru_wjian = Uploadfile(\'course/resource\',file)

        app = request.POST.get(\'app\')                       # 获取前台传过来的APP名称
        models_biao = request.POST.get(\'models_biao\')       # 获取前台传过来的数据表名称
        n_id = request.POST.get(\'n_id\')                     # 获取前台传过来的数据id
        ziduan = request.POST.get(\'ziduan\')                 # 获取要修改的字段

        # 动态导入数据库模块
        orm = __import__(\'{0}.models\'.format(app),models_biao,fromlist=True)
        pd_models_biao = hasattr(orm,models_biao)           # 判断当前数据表是否存在
        if pd_models_biao and xieru_wjian:
            hq_models_biao = getattr(orm,models_biao)       # 如果存在，找到数据表类
            xieru = {ziduan:xieru_wjian}
            biao = hq_models_biao.objects.filter(id=n_id).update(**xieru)
            if biao:
                return HttpResponse(json.dumps({\'url\':xieru_wjian}))
        else:
            return HttpResponse(\'数据表不存在\')

    return HttpResponse(\'\')


class EditablePlugin(BaseAdminPlugin):
    shang_chuan_wen_jian = False

    def init_request(self, *args, **kwargs):
        return bool(self.shang_chuan_wen_jian)

    # 在网页头部注入js[列表页，内容页]
    def block_extrahead(self, context, nodes):
        js = \'<script type="text/javascript" src="{0}"></script>\'.format(settings.STATIC_URL + \'shang_chuan_wen_jian.js\')
        # js += \'<script type="text/javascript" src="{0}"></script>\'.format(settings.STATIC_URL + \'jquery.form.js\')
        nodes.append(js)


site.register_plugin(EditablePlugin, ListAdminView)         # 列表逻辑

 

js文件

/**
 * Created by admin on 2017/9/26.
 */
jQuery(function ($) {

    var totalSize = 0;


    //初始化隐藏进度条
    $(\'#jdt\').hide();

    //绑定所有type=file的元素的onchange事件的处理函数
    //当选定文件时触发函数
    $(\':file\').change(function () {
        var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
        name = file.name;
        size = file.size;
        type = file.type;
        url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片

        //$(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);

        totalSize += size;//字节
        var mb = parseInt(totalSize / 1024 / 1024);
        $("#daxiao").html("总大小: " + totalSize + "-字节");
        $("#daxiao2").html("总大小: " + mb + "-mb");

    });


    //点击修改按钮时触发函数
    $(\'.xiou_gai\').click(function () {
        //获取需要传递到后台的参数
        var n_nr = $(this).attr(\'n_nr\');
        var n_id = $(this).attr(\'n_id\');
        var app = $(this).attr(\'app\');
        var models_biao = $(this).attr(\'models_biao\');
        var ziduan = $(this).attr(\'ziduan\');
        //将参数填充到表单以便提交后台
        $(\'#yuan_shi\').text(\'原始文件：\' + n_nr);
        $(\'#n_id\').val(n_id);
        $(\'#app\').val(app);
        $(\'#models_biao\').val(models_biao);
        $(\'#ziduan\').val(ziduan);
    });


    //向表单区域添加一个form标签
    $(\'#myModal\').wrap(\'<form id="form" method="post" enctype="multipart/form-data">\');
    $(\'#form\').wrap(\'<div id="form_zhuti">\');


    //点击上传按钮后触发函数
    $(\'#shch_anllou\').click(function () {
        var file_zhi = $(\'#file\').val();
        if (file_zhi){
            upload()
        }else {
            $(\'#tishi\').attr(\'class\',\'alert alert-danger\')
        }

    });


    //点击选择框后恢复提示框颜色
    $(\'#file\').click(function () {
        $(\'#tishi\').attr(\'class\',\'alert alert-success\');
        $(\'#tishi\').text(\'请选择您要上传的文件\')
    });


    //ajax提交函数
    function upload() {
        //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
        var formData = new FormData($(\'#form_zhuti form\')[0]);
        $(\'#jdt\').show();
        $.ajax({
            url: "/shang_chuan_wen_jian/",
            type: "POST",
            data: formData,
            dataType: \'json\',
            //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();
                //检查upload属性是否存在
                if (myXhr.upload) {
                    //绑定progress事件的回调函数
                    myXhr.upload.addEventListener(\'progress\', progressHandlingFunction, false);
                }
                return myXhr; //xhr对象返回给jQuery使用
            },
            success: function (result) {
                //返回json格式，里面是上传成功后的URL
                // alert(result.url);
                $(\'#yuan_shi\').text(result.url);
                $(\'#tishi\').text(\'恭喜上传成功！\');
                $(\'#tishi\').attr(\'class\',\'alert alert-info\');
                $(\'#tishi\').attr({\'style\':\'font-size:20px;font-weight:bold;\'});

                //睡眠
                setTimeout(function () {
                    // window.location.reload();   //刷新浏览器
                    top.location.reload();   //刷新页面
                }, 2000);

            },
            contentType: false,  //必须false才会自动加上正确的Content-Type
            processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
            error:function (xhr, status, info){
                $(\'#tishi\').attr(\'class\',\'alert alert-danger\');
                $(\'#tishi\').text(\'遗憾上传出错了\')
            }
        });
    }


    //上传进度回调函数：
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            var bfbi = percent.toFixed(2) + "%";
            $(\'#prog\').attr("style", \'width:\' + bfbi); //更新数据到进度条
            $(\'#prog\').html(bfbi);
            // $(\'#daxiao3\').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
        }
    }


    //当上传框关闭后触发
    $(\'#myModal\').on(\'hide.bs.modal\', function () {
        //当模态框关闭是清空表单和参数
        $(\'#yuan_shi\').text(\'\');
        $(\'#n_id\').val(\'\');
        $(\'#app\').val(\'\');
        $(\'#models_biao\').val(\'\');
        $(\'#file\').val(\'\');
        $(\'#daxiao\').text(\'\');
        $(\'#daxiao2\').text(\'\');
        $(\'#jdt\').hide();
        $(\'#prog\').attr("style", {\'width\': 0}); //更新数据到进度条
        $(\'#prog\').html(0);
        $(\'#tishi\').attr(\'class\',\'alert alert-success\');
        $(\'#ziduan\').val(\'\');
    });





});

 

最终效果

 

补充：adminx.py 注册管理器，接收每次后台提交的请求，进行逻辑处理

# 录音作品
class app_zuopinAdmin(object):

    # 设置xadmin后台显示字段
    list_display = [\'id\', \'title\', \'psrc\', \'lu_yin_shang_chuan\', \'yangsrc\', \'yamg_yin_shit\', \'shen_chen_yang_yin\']

    # 设置xadmin后台搜索字段，注意：搜索字段如果有时间类型会报错
    search_fields = [\'id\', \'title\', \'des\', \'key\', \'psrc\']

    # # 设置xadmin后台过滤器帅选字段，时间用过滤器来做
    list_filter = [\'title\', \'des\', \'key\', \'xing_bie\', \'yu_zhong\', \'ti_cai\', \'shi_jian\']
    
    def post(self, request, *args, **kwargs):
   
        逻辑处理


        # 一定要这样返回，否则会出错
        return super(app_zuopinAdmin, self).post(request, *args, **kwargs)

# 管理器重写后重新注册
xadmin.site.register(Zuopin, app_zuopinAdmin)