python-django-bootstrap-ajax实现数据导入导出功能总结

背 景：
刚入职一周，领导给分配了任务，写一个用户管理系统，主要方便小组成员对用户基本信息进行管理，实现基本的功能即可，即增删改查、用户数据批量导入导出等，对于初出茅庐的菜鸡来说可算是踩坑不少，这里主要对批量导入、批量导出功能进行总结。

1、用户数据导入
思 路：使用bootstrap框架，使用input标签，标签类型为type=file，将文件以表单形式传给后端，后端拿到文件后request.FILES.get(‘file’)直接获取，并将数据写入数据库。
前端页面代码如下：

<div class="page-container" id="content_show" style="display:none">
        <form action="/display/tomysql/" method="post" enctype="multipart/form-data">
             {% csrf_token %}
             <p><input type="file" style="width: 50%" name="file" id="btn_file"></p>
             <p>
             		<button id="content_hide" class="btn btn-primary-outline radius size-S btn btn-primary" type="submit">提交</button>
             </p>
        </form>
</div>

后端代码：

def to_mysql(request):
    """打开选择文件夹对话框"""
    account = {}
    f = request.FILES.get('file')
    excel_type = f.name.split('.')[1]
    if excel_type in ['xlsx', 'xls']:
        # 开始解析上传的excel表格
        wb = xlrd.open_workbook(filename=None, file_contents=f.read())
        table = wb.sheets()[0]  # 读取第一个sheet页
        rows = table.nrows  # 总行数
        try:
            for i in range(1, rows):
                rowVlaues = table.row_values(i)
                # 将第8列L2账号改为json格式
                if rowVlaues[8]:
                    for j in rowVlaues[8].split(','):
                        obj = j.split('/')
                        account[obj[0]] = obj[1]
                    rowVlaues[8] = json.dumps(account)
                CustomerInfo.objects.create(name=rowVlaues[0], hq_product=rowVlaues[1],
                                            sale_channel=rowVlaues[2], appkey=rowVlaues[3], call_data_type=rowVlaues[4],
                                            customer_status=rowVlaues[5], cooperation_pro=rowVlaues[6],
                                            call_type=rowVlaues[7],
                                            L2_account=rowVlaues[8], sdk_mode=rowVlaues[9], customer_ip=rowVlaues[10],
                                            company_ip=rowVlaues[11])
        except Exception as e:
            logger.error('解析excel文件或者数据插入错误', e)
        return redirect(reverse('index'))
    else:
        logger.error('上传文件类型错误，请检查后重新上传！')
        return render(request, 'index.html', {'message': '上传文件类型错误，请检查！'})

2、用户数据导出
思 路：前端将复选框选中，并将每行选中的数据传递给后端，本案例中主要将前端取到的用户id通过ajax传递给后端，后端用户id查询对应数据，并将用户数据写入到csv中，并将文件流传递给前端，前端拿到文件流处理后写入excel中，注：一般excel如果做服务端和客户端的代码操作都是用cvs格式，很少会直接用excel格式。因为excel格式非常专业，需要引入很大的来源库才行
前端代码：

function AllShouldPush() {
        {#var table = document.getElementById('monthCount_Table')#}
        var array = document.getElementsByClassName('warning')
        if (array.length > 0) {
            var items = new Array()
            for (var i of array) {
                var j = i.getElementsByTagName('td');
                items.push(j[1].textContent)
            }
            var obj = {'ids': items}
            $.ajax({
                type: "POST",
                url: "/display/export/",
                data: JSON.stringify(obj),
                contentType: "application/json;charset=utf-8",
                success: function (response) {
                    console.log(response)
                    var BOM = '\uFEFF';
                    csvString = BOM + response;
                    var a = document.createElement('a');
                    a.href = 'data:attachment/csv,' + encodeURI(csvString);
                    a.target = '_blank';
                    a.download = '行情客户数据.xls';//文件名
                    document.body.appendChild(a); // Firefox 中必须这么写，不然不会起效果
                    a.click();
                },
                error: function (err) {
                    alert("导出数据失败");

                }
            });
        }
        else {
            alert('请勾选用户数据后点击数据导出按钮！')
        }
    }

后端代码：

   with codecs.open('data.csv', 'w', encoding='utf-8') as csvfile:
        write = csv.writer(csvfile)
        write.writerows(data_excel)
    try:
        response = FileResponse(open("data.csv", 'rb'))
        response['Content-Type'] = 'application/octet-stream;charset=utf-8'
        response['Content-Disposition'] = 'attachment; filename="data.csv";charset=utf-8'