python-Django 增删改和分页

来源：互联网发布：景观大数据解压密码编辑：程序博客网时间：2024/06/18 11:41

先看效果：

显示和分页的效果

添加的效果：

修改页面效果：

删除效果：js判断提示

这里的分页需要用到bootstrap_pagination，我这里偷懒，用到了

bootstrap_toolkit插件，可以自行下载，安装的时候，win+D

，cmd找到安装python的的文件夹，然后

pip install django-bootstrap-toolkit

Django其实就是MTV架构，mvc我们都不陌生

Django的MTV模式本质上和MVC是一样的，也是为了各组件间保持松耦合关系，只是定义上有些许不同，Django的MTV分别是值：

M 代表模型（Model）：负责业务对象和数据库的关系映射(ORM)。
T 代表模板 (Template)：负责如何把页面展示给用户(html)。
V 代表视图（View）：负责业务逻辑，并在适当时候调用Model和Template。

除了以上三层之外，还需要一个URL分发器，它的作用是将一个个URL的页面请求分发给不同的View处理，View再调用相应的Model和Template，MTV的响应模式如下所示：

1，Web服务器（中间件）收到一个http请求
2，Django在URLconf里查找对应的视图(View)函数来处理http请求
3，视图函数调用相应的数据模型来存取数据、调用相应的模板向用户展示页面
4，视图函数处理结束后返回一个http的响应给Web服务器
5，Web服务器将响应发送给客户端

这种设计模式关键的优势在于各种组件都是松耦合的。这样，每个由 Django驱动的Web应用都有着明确的目的，并且可独立更改而不影响到其它的部分。
比如，开发者更改一个应用程序中的 URL 而不用影响到这个程序底层的实现。设计师可以改变 HTML页面的样式而不用接触Python代码。
数据库管理员可以重新命名数据表并且只需更改模型，无需从一大堆文件中进行查找和替换。

落到实处，Django的MTV模式相对应的python文件如下：

好，不啰嗦了，各位看官久等了，来点硬货！

①、看下整个项目的目录：

先要配置settings.py

红框框的，bootstrap_toolkit插件需要手动添加，hgo是app项目

②、urls.py就是配置路由的地方，这里也很重要，我这是在工程里面有个默认的urls.py，在app的hgo里面添加了urls.py,如果在创建app，就可以在添加urls.py，免得都写到工程里面的urls.py，会显得臃肿，之前文件都有讲到怎么在app里面设置urls.py和工程里面的urls.py的设置，这里直接上代码：

Higo/urls.py 工程里默认的

from django.conf.urls import include, urlfrom django.contrib import adminurlpatterns = [    url(r'^admin/', include(admin.site.urls)),     url(r'^', include('hgo.urls'))]

Hgo/urls.py 在app项目里面自己添加的

from django.conf.urls import  urlfrom hgo import viewsurlpatterns = [     url(r'^show/$', views.hgo_list),     url(r'^insert/$', views.hgo_insert,name="hgo_insert"),     url(r'^del/$', views.delById,name="hgo_del"),     url(r'^query/$', views.queryById,name="hgo_query"),      url(r'^add/$', views.upById,name="hgo_add"),]

③、models.py

from django.db import models# Create your models here.class  Stu(models.Model):    name=models.CharField(max_length=50)    gender=models.CharField(max_length=2)    age=models.IntegerField()    address=models.CharField(max_length=50)

由此可以知道我们的表的字段和类型，id是不用写出来的

④、手动添加了一个forms.py，由于要用到Django

ModelForm

from django import formsfrom hgo.models import Stuclass StuFrom(forms.ModelForm):    class Meta:        model= Stu        exclude= ("id",)

注意缩进哦！

⑤、views.py 就是我们的写逻辑的地方

#coding=utf-8from django.shortcuts import renderfrom django.shortcuts import render,render_to_responsefrom django.http import HttpResponse,HttpResponseRedirectfrom django.template.context import RequestContextfrom django.views.decorators.csrf import csrf_exempt# 添加Django自带的分页插件 paginatorfrom django.core.paginator import Paginatorfrom django.core.paginator import EmptyPagefrom django.core.paginator import PageNotAnInteger#包装csrf请求，避免django认为其实跨站攻击脚本from django.views.decorators.csrf import csrf_exemptfrom .models import Stufrom Higo.forms import StuFrom# Create your views here.#显示所有数据,并分页def hgo_list(request):    limit = 5  # 每页显示的记录数    stus=Stu.objects.all()    paginator = Paginator(stus, limit)  # 实例化一个分页对象    page = request.GET.get('page')  # 获取页码    try:        stus = paginator.page(page)  # 获取某页对应的记录    except PageNotAnInteger:  # 如果页码不是个整数        stus = paginator.page(1)  # 取第一页的记录    except EmptyPage:  # 如果页码太大，没有相应的记录        stus = paginator.page(paginator.num_pages)  # 取最后一页的记录    return  render_to_response("index.html",RequestContext(request,{"lines":stus}))#添加的方法def hgo_insert(requset):    if requset.method=="POST":            stu_form=StuFrom(requset.POST)            if stu_form.is_valid():               stu_form.save()            return HttpResponseRedirect("/show/")    else:        return render(requset,"insert.html")#删除的方法def delById(request):    id=request.GET["id"];    str=Stu.objects.get(id=id)    str.delete()    return  HttpResponseRedirect("/show/")#查看的方法def queryById(request):    id=request.GET["id"];    if id=="":        return HttpResponseRedirect("/show/")    stuu=Stu.objects.get(id=id)    return  render_to_response("curd.html",{"d":stuu})#修改数据的方法@csrf_exemptdef upById(request):      id=request.POST["id"];      print(id)      name=request.POST["name"];      gender=request.POST["gender"];      age=request.POST["age"];      address=request.POST["address"];      st=Stu()      if  len(id)  > 0 :        st.id=id;      st.age=age;      st.name=name;      st.gender=gender;      st.address=address;      st.save()      return  HttpResponseRedirect("/show/")

以上几个标红的都是很重要的！

我在app项目里面创建了两个文件夹，分别为static和

Templates，static是装js，css的地方，templates是

装静态页面的地方！页面放置到根目录，之前的文章有提及

显示和分页的页面：index.html

<!DOCTYPE html>{% load staticfiles %}<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>    <script type="text/javascript">        $(function(){            $("a:contains('删除')").click(function(){                if(confirm('你确定要删除吗？'))                {                    return true;                }else                {                    return false;                }            });        });    </script>    <style type="text/css">           .pagination {    height: 40px;    margin: 20px 0;}.pagination ul {    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);    display: inline-block;    margin-bottom: 0;    margin-left: 0;}.pagination li {    display: inline;}.pagination a, .pagination span {    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background-color: #FFFFFF;    border-color: #DDDDDD;    border-image: none;    border-style: solid;    border-width: 1px 1px 1px 0;    float: left;    line-height: 38px;    padding: 0 14px;    text-decoration: none;}.pagination a:hover, .pagination .active a, .pagination .active span {    background-color: #F5F5F5;}.pagination .active a, .pagination .active span {    color: #999999;    cursor: default;}.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {    background-color: transparent;    color: #999999;    cursor: default;}.pagination li:first-child a, .pagination li:first-child span {    border-left-width: 1px;    border-radius: 3px 0 0 3px;}.pagination li:last-child a, .pagination li:last-child span {    border-radius: 0 3px 3px 0;}.pagination-centered {    text-align: center;}.pagination-right {    text-align: right;}    </style></head><body>   <button class="btn btn-primary" type="button" onclick="location.href='{% url 'hgo_insert' %}'">添加用户信息</button>    {% load bootstrap_toolkit %}   {% block content %}   <table class="table table-striped table-bordered">       <caption>用户信息</caption>        <thead class="table-bordered">            <tr>              <th>姓名</th>              <th>性别</th>              <th>年龄</th>                <th>住址</th>                <th>操作</th>            </tr>        </thead>        <tbody class="table-bordered">          {% for user in lines %}            <tr class="table-bordered">              <td>{{ user.name}}</td>              <td>{{ user.gender }}</td>              <td>{{ user.age}}</td>                <td>{{user.address }}</td>              <td>                  <a href="/del?id={{user.id }}"  class="text-danger">删除</a>                  <a href="/query/?id={{user.id }}"  class="text-primary">修改</a>              </td>            </tr>        {% endfor %}        </tbody>   </table>      {% bootstrap_pagination lines url="/show?page=1" align="center" size="large" %}{% endblock %}</body></html>

爽吧，这里 {%bootstrap_paginationlines url="/show?page=1"align="center"size="large"%}

一行代码搞定分页，但是不是bootstrap的分页效果，需要在添加css，上面有独立写的css就是分页按钮的样式

添加的页面：insert.html

<!DOCTYPE html>{% load staticfiles %}<html lang="en"><head>    <meta charset="UTF-8">    <title>添加数据</title>     <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">     <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>    <style>.col-center-block {    float: none;    display: block;    margin-left: auto;    margin-right: auto;}</style></head><body>  <div class="container">  <div class="row myCenter">    <div class="col-xs-6 col-md-4 col-center-block">    <form role="form-horizontal" method="post" action="{% url 'hgo_insert' %}">        {% csrf_token %}      <div class="form-group">          <label for="name">姓名：</label>          <div class="controls">          <input type="text"  id="name" class="form-control" name="name" placeholder="请输入姓名" style="width: 300px">              </div>      </div>        <div class="form-group">            <label class="gender">性别：</label>            <label class="checkbox-inline">                <input type="radio" name="gender" id="gender1" value="男" checked="checked">男            </label>             <label class="checkbox-inline">                <input type="radio" name="gender"  id="gender1" value="女">女            </label>        </div>        <div class="form-group">            <label for="age">年龄：</label>             <div class="controls">            <input type="text" name="age" class="form-control"  id="age" placeholder="请输入年龄：" style="width: 300px">                 </div>        </div>        <div class="form-group">            <label for="address">住址：</label>             <div class="controls">            <input type="text" id="address" class="form-control"  name="address" placeholder="请输入住址：" style="width: 300px">                  </div>        </div>        <button class="btn btn-primary" type="submit">提交</button>    </form>        </div>      </div>      </div></body></html>

这里要注意的是 {%csrf_token%}这行代码，因为是post提及，必须要写！不然会报403错误哦！

修改的页面：curd.html

<!DOCTYPE html>{% load staticfiles %}<html lang="en"><head>    <meta charset="UTF-8">    <title>修改信息</title>    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>    <script type="text/javascript">        $(function(){            var g=$("#hids").val();            if(g=="男")            {              $("#gender1").attr("checked",true);            }else            {                $("#gender2").attr("checked",true);            }        })    </script></head><body><div class="container"><form action="{% url 'hgo_add' %}" method="post" role="form">       {% csrf_token %}        <input type="hidden" name="id"  value="{{ d.id }}" ><br/>      <div class="form-group">        <label class="control-label">姓名:  </label>        <input class="form-control" type="text" name="name" value="{{ d.name  }}"/>      </div>      <div class="form-group">        <label class="control-label">年龄:  </label>        <input class="form-control" type="text" name="age" value="{{ d.age }}"/>      </div>         <input type="hidden" id="hids"  value="{{ d.gender }}" ><br/>        <div class="form-group">            <label class="gender">性别：</label>            <label class="checkbox-inline">                <input type="radio" name="gender" id="gender1" value="男" checked="checked">男            </label>             <label class="checkbox-inline">                <input type="radio" name="gender"  id="gender2" value="女">女            </label>        </div>        <div class="form-group">        <label class="control-label">住址:  </label>        <input class="form-control" type="text" name="address" value="{{ d.address }}"/>      </div>          <input type="submit" value="保存" class="btn btn-default "/></form></div></body></html>

可能大家也注意到一点，就是我这里用到了两个隐藏域，一般来说不建议使用，第一个隐藏域是绑定id的，另一个是绑定接收的性别的，然后在通过Jquery来实现单选按钮的选中！

每天进步一点点！明天的你感谢今天努力的自己！

0 0