VS2019 开发Django（十一）------表单

导航：VS2019开发Django系列

 

今天是中华人民共和国成立70周年的日子，普天同庆，看阅兵看得满腔热血，热泪盈眶，祖国都这么优秀了，我要更加努力才行啊！

这个Django系列的文章，没有很深刻的研究，仅仅只是个入门笔记吧！作Web开发，Java，.Net Core都已经很牛逼了，Python在Web方面其实并无什么优点，由于Python是脚本语言，执行效率确定不如编译语言，这是毋庸置疑的，因此呢？学习Python的话，最终确定要往爬虫，自动化运维，数据挖掘，人工智能方向继续努力......由于这才是Python的真正优点，也是这个时代煊赫一时的技能。

那么，言归正传，继续今天的主题内容，表单，作一个简单的增删改。

1）删除。经过Ajax发送请求实现无刷新删除。

• let category = JSON.stringify($bttable_category.bootstrapTable('getSelections'));获取选中行的数据，序列化成JSON以后获得选中的Category_Id

• var url = "{% url 'category_delete' category_id=0 %}" 在Ajax中发送请求须要使用的Url须要传递一个参数，可是这个参数是改变的，而渲染路径的时候就须要这个ID，不然执行会报错，由于若是不给这个参数的话，Django框架会找不到这个Url

• url = url.replace('0', category_id);因此在每次发送请求以前，须要使用真实id替换

• 着色部分的代码，是从数据库中删除成功以后，从界面上移除刚才删除的行
  

$btbtn_category_delete.click(function () { let category = JSON.stringify($bttable_category.bootstrapTable('getSelections')); let json = JSON.parse(category); if (json.length==0) { $('#myModal').modal('show'); } else { let url = "{% url 'category_delete' category_id=0 %}" let category_id = json[0].category_id; url = url.replace('0', category_id); console.log(url) $.ajax({ url: url, //请求的url地址
                    dataType: "json", //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    //data: { "category_id": category_id }, //参数值
                    type: "GET", //请求方式
                    beforeSend: function () { //请求前的处理
 }, success: function (req) { //请求成功时处理
                        //alert(req.message);
                        var ids = $.map($bttable_category.bootstrapTable('getSelections'), function (row) { return row.category_id }) $bttable_category.bootstrapTable('remove', { field: 'category_id', values: ids }) }, complete: function () { //请求完成的处理
 }, error: function (req) { //请求出错处理
 console.log(req); } }); } })

def category_delete(request,category_id): Category.objects.get(pk=category_id).delete() return JsonResponse({'code':0,'message':'ok'})

2）新增和修改。其实也很简单，引入的新的知识点就是表单Form

• 新建文件forms.py，而后粘贴下面的代码，在表单中咱们能够控制具体的数据类型渲染成什么html标签，还能够经过widget指定CSS样式等，针对模型的表单，更多知识点参考官方文档

from django import forms
from django.forms import ModelForm from hello.models import Category class EditCategoryForm(ModelForm):  category_name = forms.CharField(label='类别名:',max_length=10,widget=forms.TextInput({ 'class': 'form-control', 'placeholder': '类别名'})) class Meta: model = Category #fields = ['category_name']
        fields = '__all__'

• views.py中增长函数category_add

def category_add(request): if request.method == 'GET': form = EditCategoryForm() context={'form':form} return render(request,'hello/category_add.cshtml',context) else: form = EditCategoryForm(request.POST) if form.is_valid(): form.save() return JsonResponse({'code':0,'message':'ok'})

• 新增长category_add.cshtml文件，粘贴以下代码

{% extends "hello/layout.cshtml" %} {% block content %} <form action="{% url 'category_add' category_id %}" method="post"> {% csrf_token %} <div class="form-group"> {{ form }} </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form> {% endblock %}

渲染出来的效果以下图：

 

 3）修改。其实修改只是在增长的基础上变更了一点点，就是跳转的时候，要传入须要修改的那个类别的参数，而后把它显示出来

$btbtn_category_edit.click(function () { let category = JSON.stringify($bttable_category.bootstrapTable('getSelections')); let json = JSON.parse(category); if (json.length == 0) { $('#myModal').modal('show'); } else { let urlEdit = "{% url 'category_edit' category_id=0 %}" let category_id = json[0].category_id; urlEdit = urlEdit.replace('0', category_id); self.location = urlEdit; } })

def category_edit(request,category_id): category = get_object_or_404(Category, pk=category_id) if request.method == 'GET': form = EditCategoryForm(instance=category) context = {'form':form,'category_id':category.category_id} return render(request,'hello/category_detail.cshtml',context) elif request.method == 'POST': form = EditCategoryForm(request.POST) if form.is_valid(): category.category_name = form.data['category_name'] category.save() #category.category_name = request.POST['category_name']
        #category.save()
        return JsonResponse({'code':0,'message':'ok'})