django-两种方式对单表的操作

单表操作的内容

我们这里对数据库单表的操作包含增删改查四部分

具体链接数据库的方式我们是通过pymysql,当然你也可以用其他的。

两种方式的概念与区别

1、新url的方式

  主要就是我们每一次向后台提交并访问数据时,后台都会给我们

  跳转到一个新的界面,来完成我们的操作

2、模态对话框的方式

  就是我们可以在页面不刷新的情况下,完成前后台数据之间的交互

两者最大的区别就是新url肯定会刷新页面,而模态框可以让页面不刷新进行交互

新url方式

新url主要利用render和redirect对浏览器页面进行重新刷新,还有a标签进行页面跳转

  a:相当于重新向

  render:模板引擎渲染新页面

  redirect:重定向跳到另一个页面

前端html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新url</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style type="text/css">
        {#* { margin:0; padding:0; }#}
        
        li { list-style:none; }
        {#body { background-color: #222222; }#}
        .xs_ul { font-size:0; line-height:0; }
        .xs_ul li {display:inline-block; font-size:20px; line-height:20px; background:#fff;}
        .xs_ul li a {
            display:block;
            width:80px;
            text-align:center;
            padding:15px 30px;
            border:1px solid #000;
            color:#999; text-decoration:none;
        }
        .xs_box{
            position: absolute;
            right: 50px;
            top: 40px;
        }
    </style>
</head>
<body>
<div class="xs_box">
    <ul class="xs_ul">
        <!--点击增加班级跳转到新url中去添加信息-->
    <li class="xs_li_13"><a href="/add_classes/">增加班级</a></li>
</ul>
</div>

<section>
  <!--for demo wrap-->
  <h1>班级列表</h1>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>班级名称</th>
          <th>操作</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        {% for item in classes %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <!--a标签提交数据只能通过GET提交,所以删除或者更新我们想要携带数据只能通过?在后面进行拼接-->
                    <td><a href="/delete_classes/?id={{ item.id }}" onclick="return del()">删除</a>|
                        <a href="/update_classes/?id={{ item.id }}">更新</a>
                    </td>
                </tr>
            {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<div class="made-with-love">
  Made with
  <i></i> by
  <a target="_blank" href="#">hesujian</a>
</div>

</body>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/index.js"></script>
<script type="text/javascript" src="/static/js/jq_button.js"></script>
<script type="text/javascript" src="/static/js/xs.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".xs_li_13").xs999(13);
    });
</script>
<script>
    function del() {
        let res = window.confirm("确认删除?");
        if (res == false) {
            return false;
        };

    }
</script>

</html>
html页面

后端路由管理并处理页面

def classes(request):
    # 生成一个操作数据库
    sq = Classes()
    classes = sq.select_all()
    # 返回一个页面(html与数据库融合过后的)
    return render(request,"classes.html",{"classes":classes})

def add_classes(request):
    if request.method == 'GET':
        # 如果请求方式是GET,那么说明是第一次按下添加操作
        # 返回一个新的静态页面让他去做添加操作
        return render(request,"add_class.html")
    else:
        # 如果请求方式是POST,那么说明是写好数据提交上来的
        classname = request.POST.get("classname")

        sq = Classes()
        sq.add_data(classname)
        # 返回的是一个重定向的页面
        return redirect("/classes/")

def delete_classes(request):
    id = request.GET.get("id")
    sq = Classes()
    sq.delete_data(id)
    return redirect('/classes/')


def update_classes(request):
    sq = Classes()
    if request.method == 'GET':
        id = request.GET.get("id")
        classes = sq.select_one(id)
        return render(request,'update_class.html',{'class':classes})
    else:
        id = request.POST.get("id")
        classname = request.POST.get("classname")
        sq.update_data(id,classname)
        return redirect('/classes/')


# 写好路由关系映射
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^classes',classes),
    url(r'^add_classes',add_classes),
    url(r'^delete_classes', delete_classes),
    url(r'^update_classes', update_classes),

]
后端页面代码

模态对话框

主要通过ajax与后台进行信息之间的交互,保证页面不进行刷新

通过给特定标签绑定click事件,在事件中通过jq对象对页面进行一些简单的修改以及与后台的数据交互

ajax参数

$.ajax({
        type: 'post',    //向后台提交数据的方式
        url: "/model_add_classes/",  //提交给后台的url,因为这里是本站跳转,直接写uri就可以
        data: {"classname": $('.classname').val()},
        //data是向后台提交的数据,用字典的方式传送,后台通过key进行取值
        //success是后台成功返回信息的情况,对应函数里的参数就是后台发送的数据
        success: function (data) {
            if (data == 'ok') {
                //刷新页面通过 window.location.href = '/model_classes';
                window.location.href = '/model_classes';
            } else {
                $('.tips').text("用户名不能为空");
                {#console.log(data);#}
            }
            ;
        },
    });

后台与ajax对应的代码

def model_classes(request):
    sq = Classes()
    classes = sq.select_all()
    # 正常访问页面还是通过render渲染一个页面回去
    return render(request, "model_classes.html", {"classes": classes})

def model_add_classes(request):
    # 前台通过ajax传过来的数据返回的是文本,通过 HttpResponse("ok")
    classname = request.POST.get("classname")
    if classname:
        sq = Classes()
        sq.add_data(classname)
        return HttpResponse("ok")
    else:
        return HttpResponse("notok")

def check_classes(request):
    id = request.POST.get("id")
    sq = Classes()
    classes = sq.select_one(id)
    return HttpResponse(classes['name'])

def model_update_classes(request):
    id = request.POST.get("id")
    classname = request.POST.get("classname")
    sq = Classes()
    sq.update_data(id,classname)
    return HttpResponse("ok")

urlpatterns = [
    url(r'^model_classes',model_classes),
    url(r'^model_add_classes',model_add_classes),
    url(r'^check_classes',check_classes),
    url(r'^model_update_classes',model_update_classes)]
后台代码

 

posted @ 2019-07-10 21:24  hesujian  阅读(221)  评论(0编辑  收藏  举报