橡皮擦暑塑，一個逗趣的互聯(lián)網(wǎng)高級網(wǎng)蟲。新的系列锅必，讓我們一起進(jìn)入 Django 世界事格。

二十一、添加導(dǎo)航數(shù)據(jù)與導(dǎo)航數(shù)據(jù)列表

本篇博客用到的核心技術(shù)點是 CreateView搞隐，該類用于創(chuàng)建對象表單驹愚，當(dāng)數(shù)據(jù)提交之后如無異常則可以實現(xiàn)，數(shù)據(jù)直接保存入庫劣纲。

CreateView 視圖為通用視圖逢捺，使用的時候先設(shè)置 model 字段，用于記錄保存數(shù)據(jù)的模型癞季；然后設(shè)置 fields 字段劫瞳，用于指明表單提交的字段倘潜，剩下的由 Django 框架自動完成。

21.1 創(chuàng)建 utils 模塊

在正式編寫代碼之前志于，需要先編寫一個通用的基礎(chǔ)類涮因，該類主要用于驗證數(shù)據(jù)提交過來的準(zhǔn)確性。模塊在項目根目錄恨憎，結(jié)構(gòu)如下蕊退。

20210505101710507[1].png

核心為 mixins.py 類，在該類內(nèi)部編寫兩個方法憔恳，分別是 form_invalid 與 form_valid瓤荔。以后如果需要驗證表達(dá)數(shù)據(jù)正確性，只需要繼承該類即可钥组。

from django.http import JsonResponse

class AjaxResponseMixin(object):
    def form_invalid(self, form):
        response = super(AjaxResponseMixin, self).form_invalid(form)
        if self.request.is_ajax():
            data = {
                'state': 'error',
                'msg': form.errors
            }
            return JsonResponse(data, status=400)
        else:
            return response

    def form_valid(self, form):
        response = super(AjaxResponseMixin, self).form_valid(form)
        if self.request.is_ajax():
            data = {
                'state': 'success'
            }
            return JsonResponse(data)
        else:
            return response

21.2 完善 views.py 中 NavItemCreateView 類

讓 views.py 中的類 NavItemCreateView 繼承上文新增的 AjaxResponseMixin 類输硝，并對代碼進(jìn)行修改眶俩，去除返回數(shù)據(jù)部分痴昧，只保留剛才提及的 model 和 fields 兩個字段癞松。

class NavItemCreateView(AjaxResponseMixin, CreateView):
    model = NavItem
    fields = ["title", "order", "url"]
    template_name_suffix = '_add'
    success_url = "/navbar/list"

views.py 文件修改完畢煮甥，就需要修改 templates/navbar/navitem_add.html 了，打開文件瓷炮，輸入如下內(nèi)容肩刃。

{% extends 'csdn/backend/backend_common.html' %} 
{% block option-title%}導(dǎo)航菜單添加{%endblock%}
{% block content%}
<div class="col-md-12">
  <form class="form-horizontal" id="data-form">
    {% csrf_token %}
    <div class="form-group">
      <label for="title" class="col-sm-2 control-label">標(biāo)題：</label>
      <div class="col-sm-10">
        <input
          type="text"
          class="form-control"
          id="title"
          name="title"
          placeholder="請輸入標(biāo)題"
        />
      </div>
    </div>
    <div class="form-group">
      <label for="url" class="col-sm-2 control-label">鏈接</label>
      <div class="col-sm-10">
        <input
          type="text"
          class="form-control"
          id="url"
          name="url"
          placeholder="請輸入鏈接"
        />
      </div>
    </div>
    <div class="form-group">
      <label for="order" class="col-sm-2 control-label">順序</label>
      <div class="col-sm-10">
        <input
          type="text"
          class="form-control"
          id="order"
          name="order"
          placeholder="請輸入順序"
        />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-info" id="btn-submit">添加</button>
      </div>
    </div>
  </form>
</div>
{% endblock %} 
{% block ext_js %}
<script type="text/javascript">
  $('#btn-submit').click(function(e){
      e.preventDefault();
      $.post('{% url 'navbar-add' %}',$("#data-form").serializeArray(),function(data){
          var state = data.state;
          if(state == "success"){
              alert("添加成功")
              location.href = "/navbar/list"
          }
     },"json")
  })
</script>
{% endblock %}

HTML 頁面在 form 表單中增加了 {% csrf_token %}豁护，添加之后才可以向后臺發(fā)送數(shù)據(jù)挺份。

數(shù)據(jù)提交使用的是 jquery 中的 post 方法褒翰，當(dāng)返回成功時，通過 location.href = "/navbar/list" 跳轉(zhuǎn)到列表頁面匀泊，這里用到的是前端知識优训，建議搜索相關(guān)資料進(jìn)行補(bǔ)充。

路由 /navbar/list 需要在 navbar/urls.py 中進(jìn)行補(bǔ)充各聘。

from django.urls import path
from . import views

urlpatterns = [
    path('add/', views.NavItemCreateView.as_view(), name='navbar-add'),
    path('list/', views.NavItemListView.as_view(), name='navbar-list'),
]

同步補(bǔ)充 views.py 中的 NavItemListView 類揣非。

class NavItemListView(ListView):
    model = NavItem
    context_object_name = 'navbar_list'

以上內(nèi)容編寫完畢，可以重啟 Django 服務(wù)器躲因，通過訪問 http://127.0.0.1:8000/navbar/add/ 即可打開導(dǎo)航菜單添加頁面早敬，點擊添加提交數(shù)據(jù)，返回數(shù)據(jù)之后大脉，如果成功頁面跳轉(zhuǎn)到列表頁面搁嗓。

補(bǔ)充頁面模板頁面代碼。

templates/navbar/navitem_list.html

{% extends 'csdn/backend/backend_common.html' %} 
{% block option-title %}導(dǎo)航菜單列表 {% endblock %} 
{% block content %}
<div class="col-md-12">
  <table
    class="table table-hover table-responsive table-condensed dashboard-table"
  >
    <thead>
      <tr>
        <th>序號</th>
        <th>標(biāo)題</th>
        <th>URL</th>
        <th>順序</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for item in navbar_list %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.url }}</td>
        <td>{{ item.order }}</td>
        <td>
          <a href="#" class="btn btn-primary" role="button">編輯</a>
          <button class="btn btn-danger" role="button">刪除</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

21.3 本篇博客小節(jié)

本小節(jié)完成了一次數(shù)據(jù)提交與展示箱靴，學(xué)會之后，后面大量的工作都極其相似荷愕，學(xué)習(xí)的速度一下子就會提升很多衡怀。

本文章屬于《滾雪球?qū)W Python 第三輪》中的一篇棍矛，歡迎繼續(xù)關(guān)注。

今天是持續(xù)寫作的第 <font color="red">146</font> / 200 天抛杨」晃可以點贊、評論怖现、收藏啦茁帽。

繼續(xù)閱讀

1. 國內(nèi)，首套屈嗤，成體系潘拨，技術(shù)博客寫作專欄發(fā)布啦
2. 學(xué)弟學(xué)妹：大佬們，別勸了饶号，學(xué)不動了铁追，學(xué)不動了
3. 自己動手寫個微型 CSDN 吧，還能實現(xiàn)網(wǎng)頁版 Blink茫船，No.1

本文長尾關(guān)鍵詞琅束，提供給機(jī)器使用，閱讀請忽略
django api django redis django bootstrap
topview django flask django cms
django3 pycharm django django 開源