python前后端不分离结合modelFrom实现的增删改查_bootstrap模态框增删改查django-CSDN博客

本文链接：https://blog.csdn.net/testManger/article/details/130629995

#在django的view文件的中代码如下

# 使用modleform比用from更高级-继承ModelForm这部分代码可以单独抽出来用封装继承的思路实现 这里是为了方便
class departModelfrom(ModelForm):
    # 为属性增加额外的验证
    title=forms.CharField(min_length=3,label='部门名称')
    # 为所有属性增加同样的样式
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            print(field)
            field.widget.attrs = {'class': 'form-control', 'placeholder': field.label}
    class Meta:
        model=Department
        fields=['title']

        # 用上面__init__封装的方法代替下面的方法
        # widgets={
        #     'title':forms.TextInput(attrs={'class':"form-control"})
        # }

# 查询和搜索一起处理
def showindex(request):
    # 搜索
    dict_serch = {}
    value = request.GET.get('q', '')
    if value:
        dict_serch['title__contains'] = value
    # sercher_result = models.Department.objects.filter(**dict_serch).order_by('-id')
    # print(sercher_result)

    # 查询
    object = models.Department.objects.filter(**dict_serch).order_by('id')
   

    return  render(request,'depart_infor.html',{"queryset":object,'value':value})
# 添加
def derpart_add(request):
    if request.method=='GET':
        model = departModelfrom()
        return render(request, 'depart_add.html',{'contenx1':model})
    model=departModelfrom(data=request.POST)
    print(model)
    if model.is_valid():
        model.save()
        return  redirect('../depart/')
    else:
        print(model.errors)
    return render(request,'depart_add.html',{"contenx1":model})

# 删除
def depart_userdelete(request,id):
    object= models.Department.objects.filter(id=id).delete()
    return redirect('../depart/')

# 结合modelForm实现编辑功能
def depart_update(request,id):
    object = models.Department.objects.filter(id=id).first()
    if request.method=="GET":
     form=departModelfrom(instance=object)
     return  render(request,'depart_eidtor.html',{'form':form})
    form = departModelfrom(data=request.POST,instance=object)
    if request.method=="POST":
        if form.is_valid():
            form.save()
            return redirect('../../depart/')
    return  render( request,'depart_infor.html',{'form':form})

在url中配置路由如下:

需要注意的是这里使用了二级路由，具体情况根据自己情况灵活运用


from django.urls import path
from newdjangoapp import views
urlpatterns = [
path('depart/',views.showindex,name='showindex'),
path('<int:id>/depart_update/',views.depart_update,name='depart_update'),

path('depart_userdelete/<int:id>',views.depart_userdelete,name='depart_userdelete'),

path('derpart_add/',views.derpart_add,name='derpart_add'),
path('depart_sercher/',views.depart_sercher,name='depart_sercher')

    ]

前端页面采用了Bootstrap框架，快速建站的目的，需要说明了的是。此处是将公共组件独立出来，其他页面是需要继承其页面即可，由于页面较多，这里只将继承逻辑演示一下

公共组件页面:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">

{% block css %}{% endblock %}
<style>
    .navbar{
        border-radius: 0;
    }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light container">
  <a class="navbar-brand" href="#">sales管理系统</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="{% url 'showindex' %}">部门列表<span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'booklist' %}">用户列表</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">书籍列表</a>
      </li>
          <li class="nav-item">
{#        <a class="nav-link" href="{% url 'datacollection' %}">数据统计</a>#}
      </li>
    </ul>

  </div>
</nav>



{% block content %}

    {% endblock %}



{% block js %}

{% endblock %}

<script type="text/javascript" src="{% static 'jquery.min.js'%}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js'%}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.js'%}"></script>
</body>
</html>

继承页面-这里注意查看继承规则-即头部引用文件处

{% extends 'depart_index.html' %}
{% load static %}
{% block css %}


{% endblock %}
{% block content %}
    <div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading container"><span class="glyphicon " aria-hidden="true"></span><a href="{% url 'derpart_add' %}" STYLE="text-decoration: none">添加部门</a>

       <div style="float:right;">
      <form method="get">
      <input type="text" title="搜索" name="q" value="{{ value }}"><input type="submit" value="搜索"></form></div>
  </div>



  <!-- Table -->
  <table class="table container">
    <tr>
        <td>序号</td>
        <td>部门名称</td>

        <td>操作</td>
    </tr>
      {% for items in queryset %}
      <tr>
        <td>{{ items.id }}</td>
        <td>{{ items.title}}</td>

        <td><a id="delt" href="../depart_userdelete/{{ items.id}}" style="text-decoration: none">删除</a>
            <a href="../{{ items.id }}/depart_update/" style="text-decoration: none">修改</a>
{#            <a href="../{{ items.id }}/modelupdate/" style="text-decoration: none">修改</a>#}
        </td>

    </tr>

       {% endfor %}
  </table>

      <div class="container">
        <ul class="pagination">

           {{ page_string }}


        </ul>
      </div>
   </div>


{% endblock %}



{% block js %}

{% endblock %}

实现效果