django中form从后端查询回显到前端以及表单的提交到服务器操作

13 篇文章 0 订阅
13 篇文章 0 订阅

这个表格是我以下代码出现的效果,以下代码也可以实现图中修改保存删除操作。

1:首先你得创建一张表,在这里建表语句我就不再写了,再也简单不过了。(别忘了加点数据哦!)

2:将表的数据通过view.py的函数返回到前端。在这里stu是表名,将所有的返回结果all通过一个data字典传到前端的all里面去

def showstu(request):

    all=stu.objects.all()
    data={
        "all":all
    }


    return render(request,"searchstu.html",context=data)

3:有数据我们就可以拿到前端来展示了。

4 :新建一个searchstu.html文件,用来展示用的。

这个是最简单的表用来提示用的

 <table border="1" cellpadding="0" >
            <tr >

           <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>班级</td>
            <td colspan="3">操作</td>

            </tr>

</table>

 

这个表是实现我们的功能的表

{% for student in all %}

 


      <form action="{% url 'homework:updatestu' %}"  method="get" >
      <table border="1" cellpadding="0">
<tr><td>
  <input type="text" name="s_id" value={{student.id}} style="display:none">
</td><td>
    <input type="text" name="s_name" value={{student.stu_name}} >
</td><td>
    <input type="text" name="s_age"value={{ student.stu_age}}>
</td><td>
    <input type="text" name="s_sex"value={{ student.stu_sex}}>
</td><td>
    <input type="text" name="s_cla" value={{ student.stu_class}}>
</td><td>
        <input type="button"  id="a" value="修改" οnclick="update(this)">

#在这里用了两种方法提交到服务器,一种是submit提交,还有一种是超链接提交。
</td><td><input type="submit" value="保存" οnclick="save(this)">
</td><td><a href="/homework/delstu/{{ student.id }}">
     <input type="button" value="删除"></a>
</td></tr>
       </table>
       </form>

 


{% endfor %}

好了查询功能已经做好了我们可以通过url访问了

    url(r"^showstu/", views.showstu,name="showstu"),

现在起要操作剩下的功能了,在这里的一个比较笨的办法,要想实现点击对应的按钮删除或者修改哪一个,就要把每行都设置成一个form提交表单。

因此我把form放在for循环内部,这样循环一条就会多一个form表单。

5:实现提交后后端的处理函数,通过get获取。

更新操作

def updatestu(request):
    id = request.GET.get("s_id")
    name=request.GET.get("s_name")
    sex=request.GET.get("s_sex")
    age=request.GET.get("s_age")
    cla=request.GET.get("s_cla")

#获取数据库中这个id将和这个id有关的数据设置成你get到前面的值,别忘记保存!修改完后直接刷新这个页面也就是重定向到这个页面

    stu1=stu.objects.filter(pk=id).first()
    stu1.stu_age=age
    stu1.stu_class=cla
    stu1.stu_sex=sex
    stu1.stu_name=name
    stu1.save()
    return HttpResponseRedirect("/homework/showstu")

删除操作

def delstu(request,id):
    stu1=stu.objects.filter(pk=id).first()
    stu1.delete()
    return HttpResponseRedirect("/homework/showstu")

 

 

 

 

 

在Vue3,可以通过以下步骤将图片上传到Django后端服务器: 1. 在Vue组件添加一个文件选择器,让用户选择要上传的图片: ``` <template> <div> <input type="file" ref="fileInput" @change="uploadImage"> </div> </template> ``` 2. 在Vue组件添加一个上传图片的方法,使用axios发送POST请求将图片上传到后端服务器: ``` <script> import axios from 'axios'; export default { methods: { uploadImage() { const formData = new FormData(); formData.append('image', this.$refs.fileInput.files[0]); axios.post('/api/upload-image/', formData) .then(response => { console.log('Image uploaded successfully'); }) .catch(error => { console.log('Error uploading image:', error); }); } } } </script> ``` 3. 在Django后端服务器添加一个接收图片上传的API视图: ``` from django.http import JsonResponse def upload_image(request): if request.method == 'POST': image = request.FILES.get('image') # Do something with the uploaded image return JsonResponse({'status': 'success'}) else: return JsonResponse({'status': 'error', 'message': 'Only POST requests are allowed'}) ``` 4. 在Django后端服务器添加一个URL路由,将上传图片的API视图和URL地址绑定: ``` from django.urls import path from .views import upload_image urlpatterns = [ path('api/upload-image/', upload_image, name='upload-image'), ] ``` 这样,当用户选择要上传的图片并点击上传按钮时,Vue组件会通过axios发送一个POST请求到Django后端服务器的上传图片API视图,后端服务器接收到请求后会将图片保存到服务器上。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值