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'})