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