Django 框架的神奇之处,几行代码就能自动入库,微型 CSDN 第 3 篇

橡皮擦,一个逗趣的互联网高级网虫。新的系列,让我们一起进入 Django 世界。

二十一、添加导航数据与导航数据列表

本篇博客用到的核心技术点是 CreateView,该类用于创建对象表单,当数据提交之后如无异常则可以实现,数据直接保存入库。

CreateView 视图为通用视图,使用的时候先设置 model 字段,用于记录保存数据的模型;然后设置 fields 字段,用于指明表单提交的字段,剩下的由 Django 框架自动完成。

21.1 创建 utils 模块

在正式编写代码之前,需要先编写一个通用的基础类,该类主要用于验证数据提交过来的准确性。模块在项目根目录,结构如下。

简单写写就能自动入库,Django 框架的神奇之处,微型 CSDN 第 3 篇
核心为 mixins.py 类,在该类内部编写两个方法,分别是 form_invalidform_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 类,并对代码进行修改,去除返回数据部分,只保留刚才提及的 modelfields 两个字段。

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 path
from . 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/ 即可打开导航菜单添加页面,点击添加提交数据,返回数据之后,如果成功页面跳转到列表页面。

Django 框架的神奇之处,几行代码就能自动入库,微型 CSDN 第 3 篇
补充页面模板页面代码。

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 本篇博客小节

本小节完成了一次数据提交与展示,学会之后,后面大量的工作都极其相似,学习的速度一下子就会提升很多。

本文章属于《滚雪球学 Python 第三轮》中的一篇,欢迎继续关注。

今天是持续写作的第 146 / 200 天。可以点赞、评论、收藏啦。

继续阅读

  1. 国内,首套,成体系,技术博客写作专栏发布啦
  2. 学弟学妹:大佬们,别劝了,学不动了,学不动了
  3. 自己动手写个微型 CSDN 吧,还能实现网页版 Blink,No.1

本文长尾关键词,提供给机器使用,阅读请忽略
django api django redis django bootstrap
topview django flask django cms
django3 pycharm django django 开源

梦想橡皮擦 CSDN认证博客专家 高级产品经理 业余编程爱好者 高级网虫
Python 爬虫 100 例作者,蓝桥签约作者,滚雪球学 Python 专栏作者,技术博客日更实践者,10 年互联网从业经验。 微信公众号同名【梦想橡皮擦】。
相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用PythonDjango框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值