橡皮擦，一个逗趣的互联网高级网虫。新的系列，让我们一起进入 Django 世界。
二十一、添加导航数据与导航数据列表
本篇博客用到的核心技术点是 CreateView，该类用于创建对象表单，当数据提交之后如无异常则可以实现，数据直接保存入库。
CreateView 视图为通用视图，使用的时候先设置 model 字段，用于记录保存数据的模型；然后设置 fields 字段，用于指明表单提交的字段，剩下的由 Django 框架自动完成。
21.1 创建 utils 模块
在正式编写代码之前，需要先编写一个通用的基础类，该类主要用于验证数据提交过来的准确性。模块在项目根目录，结构如下。
核心为 mixins.py 类，在该类内部编写两个方法，分别是 form_invalid 与 form_valid。以后如果需要验证表达数据正确性，只需要继承该类即可。
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 类，并对代码进行修改，去除返回数据部分，只保留刚才提及的 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 了，打开文件，输入如下内容。
{% extends 'csdn/backend/backend_common.html' %} {% block option-title%}导航菜单添加{%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">标题：</label> <div class="col-sm-10"> <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" /> </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 %}，添加之后才可以向后台发送数据。
数据提交使用的是 jquery 中的 post 方法，当返回成功时，通过 location.href = "/navbar/list" 跳转到列表页面，这里用到的是前端知识，建议搜索相关资料进行补充。
路由 /navbar/list 需要在 navbar/urls.py 中进行补充。
from django.urls import pathfrom . import views
urlpatterns = [ path('add/', views.NavItemCreateView.as_view(), name='navbar-add'), path('list/', views.NavItemListView.as_view(), name='navbar-list'),]
复制代码
同步补充 views.py 中的 NavItemListView 类。
class NavItemListView(ListView): model = NavItem context_object_name = 'navbar_list'
复制代码
以上内容编写完毕，可以重启 Django 服务器，通过访问 http://127.0.0.1:8000/navbar/add/ 即可打开导航菜单添加页面，点击添加提交数据，返回数据之后，如果成功页面跳转到列表页面。
补充页面模板页面代码。
templates/navbar/navitem_list.html
{% extends 'csdn/backend/backend_common.html' %} {% block option-title %}导航菜单列表 {% endblock %} {% block content %}<div class="col-md-12"> <table class="table table-hover table-responsive table-condensed dashboard-table" > <thead> <tr> <th>序号</th> <th>标题</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 本篇博客小节
本小节完成了一次数据提交与展示，学会之后，后面大量的工作都极其相似，学习的速度一下子就会提升很多。
评论