Django 里实现表格内容上传

先看效果图:
请添加图片描述

当没有添加数据,就按 提交 键就会出现报错
请添加图片描述


下面是操作步骤

1. 先在 views.py 文件里做添加

# 在 views.py 

class AssetModelForm(forms.ModelForm):
    #newField = forms.CharField()
    class Meta:
        model = models.AssetSet 
        fields = ['name', 'price', 'category', 'depart']
        #fields = "__all__"

        """
        # 单一的给某个field添加样式
        widgets = {
            'category': forms.Select(attrs={'style': "width: 300px;"})
        }
        """

    # 给所有的 field 提供样式
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for name, field in self.fields.items():
            if name == "price":
                continue
            field.widget.attrs['style'] = "width: 100px"

def asset_add(request):
    """
    # 获取所有类型
    cat_list = models.AssetSet.category_choices
    dp_list = models.Department.objects.all()

    form = AssetForm()
    """
    
    if request.method == "GET":
        cat_list = models.AssetSet.category_choices
        dp_list = models.Department.objects.all()
        form = AssetModelForm()
        return render(request, 'asset_add.html', {'cat_list': cat_list, 'dp_list': dp_list, 'form': form})

    # print(request.POST)
    # 隐含功能:字段不能为空
    form = AssetModelForm(data=request.POST)
    if form.is_valid():
        # data_dict = form.cleaned_data

        # 在数据库里创建一条数据
        # 第一种写法
        # models.AssetSet.objects.create(name=data_dict['name'], price=data_dict['price'], category=data_dict['category'], depart_id=data_dict['depart'].id)
        
        """
        obj = models.Department.objects.filter(id = 1).first()
        models.AssetSet.objects.create(name="", price="", category=1, depart=obj)
        """

        # 第二种写法
        # models.AssetSet.objects.create(name=data_dict['name'], price=data_dict['price'], category=data_dict['category'], depart=data_dict['depart'])

        # 第三种方法
        # models.AssetSet.objects.create(**data_dict)

        # 第四种方法
        # 用户提交的数据,直接写入数据库
        # 这种写法更快地将数据保存到数据表里
        form.save()

        return redirect('/asset/list/')
    else:
        print(form.errors)
        #return HttpResponse("失败")

		# 传 form 是为了保存表格输入的数据
        return render(request, "asset_add.html", {"form": form})

2. 在 asset_add.html 文件里修改

<form method="post" action="/asset/add/" novalidate>
    <!-- {{ form.name }}
    {{ form.price }} -->

    {% csrf_token %}
    {% for field in form %}
        <div>
            <label>{{ field.label }}</label>
            <div>
                {{ field }}
                <!-- 取错误里的第一个字段,会显示英文 -->
                <span style="color: red;">{{ field.errors.0 }}</span>
            </div>
        </div>
    {% endfor %}

    <button type="submit">提 交</button>
</form>

3. 为了使网页呈现中文
settings.py 文件里修改

#LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'


点个赞呗~

  • 14
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端部: 1.使用vue框架编写前端页面,包括上传控件和表格展示区域。 2.使用axios库将文件上传后端服务器: ```javascript methods: { /* 上传Excel文件 */ handleUpload (file) { let formData = new FormData() formData.append('file', file) axios.post('/upload/excel', formData) .then(res => { /* 处理返回的数据,例如将表格数据展示在页面上 */ }).catch(err => { console.error(err) }) }, } ``` 3.在页面上展示表格数据: ```javascript data () { return { tableData: [] // 表格数据数组 } }, methods: { /* 处理上传Excel文件返回的表格数据 */ handleTableData (data) { /* 将data解析成表格数据数组,例如: for (let i = 0; i < data.length; i++) { this.tableData.push({ id: data[i].id, name: data[i].name, ... }) } */ }, }, ``` 4.将表格数据展示在页面的table组件中: ```html <el-table :data="tableData"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> ... </el-table> ``` 后端: 1.使用django框架编写后端接口,包括文件上传接口和表格数据查询接口。 2.使用pandas库处理Excel文件,并将数据写入数据库: ```python import pandas as pd from .models import TableModel def upload_excel(request): file = request.FILES['file'] data = pd.read_excel(file) # 将数据写入数据库 for index, row in data.iterrows(): TableModel.objects.update_or_create( id=row['id'], defaults={ 'name': row['name'], ... } ) return HttpResponse('success') ``` 3.查询数据库并返回表格数据: ```python from .models import TableModel def get_table_data(request): data = [] for row in TableModel.objects.all(): data.append({ 'id': row.id, 'name': row.name, ... }) return JsonResponse(data, safe=False) ``` 4.配置路由,使前后端能够通过接口进行通信: ```python from django.conf.urls.static import static from django.conf import settings from django.urls import path from . import views urlpatterns = [ path('upload/excel', views.upload_excel), path('get/table', views.get_table_data), ] urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` 需要注意的是,在上传Excel文件的时候,需要在django的settings文件中设置MEDIA_ROOT和MEDIA_URL。在前端页面中的表格数据展示组件中,需要填写表格数据的属性名和标签名,以及请求接口的地址和方法等信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值