Django 前端页面展示数据

前端介绍了建立模型(表),并写了保存数据,与查询数据,那么在前端页面,如何将用户输入的数据提交到后台保存呢

1,创建前端页面

通用情况下,前端页面都是html文件,在myweb\web\templates目录新建一个taskAdd.html文件,编辑代码如下:

{% extends 'base.html' %}

{% block content %}

{% include "v3/v3Com.html" %}

    <form enctype="multipart/form-data" action="/taskAdd" method="post" class="tableForm" id="taskForm">

        {% csrf_token %}

<table width='100%' border='1' bgcolor="#eeeeee" bordercolor='#aabbcc' cellspacing='1' cellpadding='0'>

<tr class="tit"><td align="center" colspan="6" bgcolor='#aabbcc'>新增任务</td></tr>

<tr>

<td>任务名称:</td>

<td><input type="text" name="task_name " id="task_name " ></td>

<td>操作人:</td>

<td ><input type="text" name="task_user " id="task_user"></td>

</tr>

<tr>

<td>开始日期:</td>

<td><input type="text" name="task_start_date" id="task_start_date"></td>

<td>结束日期:</td>

<td><input type="text" name="task_end_date" id="task_end_date"></td>

</tr>

<tr>

<td>任务描述:</td>

<td colspan="3"><textarea rows="20" cols="180" name="task_describe" id="task_describe"></textarea></td>

</tr>

<tr class="btnBar">

<td align="center" colspan="4">

<input type="submit" value="提交" class="u-btn s-primary">

</td>

</tr>

<tr>

<td colspan="4">{{ info }}</td>

</tr>

</table>

{% endif %}    

</form>

{% endblock %}

2,编辑views.py文件

编辑myweb\web\views.py文件,加入代码:

import database

# 保存任务表

def task_add(request):

    task_info = dict()

    task_info['task_name'] = request.POST.get('task_name')

    task_info['task_user'] = request.POST.get('task_user')

    task_info['task_describe'] = request.POST.get('task_describe')

    task_info['task_start_date'] = request.POST.get('task_start_date')

    task_info['task_end_date'] = request.POST.get('task_end_date')

    dataBase.save_task(task_info)

因为我们把保存数据的逻辑是写在 database.py里的save_task函数里的

所以先引入database,再调用save_task函数。(如果不清楚,看“保存数据”那章节的内容)

3,配置urls.py文件

编辑urls.py文件,加入:

url(r'^taskAdd/', views.task_add),

前端页面的form提交时会先在urls.py里找到form里action指定的路径taskAdd,urls根据taskAdd,去调用views.task_add函数

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为AI助手,我无法知晓你与我之间的约定和要求。但是,我可以为你提供一份Django导入表格、导入数据库,并在前端页面展示的代码示例,供参考: 首先,需要安装一些Python包: ```bash pip install django pip install openpyxl pip install pandas ``` 接下来,创建一个Django项目,然后在`urls.py`中添加以下路由: ```python # urls.py from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('upload/', views.upload, name='upload'), ] ``` 在`views.py`中添加以下代码: ```python # views.py import pandas as pd from django.shortcuts import render from django.http import HttpResponseRedirect from .forms import ExcelForm from .models import ExampleModel def index(request): data = ExampleModel.objects.all() return render(request, 'index.html', {'data': data}) def upload(request): if request.method == 'POST': form = ExcelForm(request.POST, request.FILES) if form.is_valid(): file = request.FILES['file'] # 读取Excel文件 xls = pd.ExcelFile(file) df = xls.parse('Sheet1') # 保存数据数据库中 for index, row in df.iterrows(): data = ExampleModel() data.col1 = row['col1'] data.col2 = row['col2'] data.col3 = row['col3'] data.save() return HttpResponseRedirect('/') else: form = ExcelForm() return render(request, 'upload.html', {'form': form}) ``` 在`models.py`文件中创建一个模型: ```python # models.py from django.db import models class ExampleModel(models.Model): col1 = models.CharField(max_length=100) col2 = models.CharField(max_length=100) col3 = models.CharField(max_length=100) ``` 接下来,创建一个表单`forms.py`: ```python # forms.py from django import forms class ExcelForm(forms.Form): file = forms.FileField() ``` 最后,在`templates`目录中创建两个HTML文件,`index.html`和`upload.html`,分别用于显示数据和上传文件。 `index.html`代码: ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> {% for item in data %} <tr> <td>{{ item.col1 }}</td> <td>{{ item.col2 }}</td> <td>{{ item.col3 }}</td> </tr> {% endfor %} </tbody> </table> </body> </html> ``` `upload.html`代码: ```html <!-- upload.html --> <!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <form method="POST" enctype="multipart/form-data"> {% csrf_token %} {{ form.as_p }} <button type="submit">Upload</button> </form> </body> </html> ``` 以上代码可以实现将Excel文件导入数据库,并在前端页面展示数据。但应根据实际情况进行修改和适配。希望能对你有所帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值