Python Day 55 Django框架、利用学生管理系统来学习Django框架（版本一）、数据库封装成类、单表操作新url方式、模态对话框 - Icon-Liang

Python Day 55 Django框架、利用学生管理系统来学习Django框架（版本一）、数据库封装成类、单表操作新url方式、模态对话框

　　##MySQL数据准备

#班级表
create table classes(
    id int auto_increment primary key,
    name varchar(32) not null default ''
)engine=Innodb charset=utf8;
#学生表
create table student(
    id int auto_increment primary key,
    name varchar(32) not null default '',
    class_id int not null default 1,
    constraint fk_student_classes foreign key(class_id) references classes(id)
)engine=Innodb charset=utf8;

#教师表
create table teacher(
    id int auto_increment primary key,
    name varchar(32) not null default ''
)engine=Innodb charset=utf8;
#关联表
create table teacher2class(
    id int auto_increment primary key,
    t_id int not null default 1,
    c_id int not null default 1,
    constraint fk_teacher_classes1 foreign key(t_id) references teacher(id),
    constraint fk_classes foreign key(c_id) references classes(id)
)engine=Innodb charset=utf8;

　　##数据库封装成类

为了提高数据库的操作速度，避免重复的进入和退出，我们可以把一些常用的数据库的操作封装成一个类。

把数据库操作写成函数：每次都得连接数据库一次连接一次提交，重复操作浪费时间

把数据库操作写成类：一次连接可以多次提交，最佳重复操作时不需要关闭数据库

import pymysql
class Sqlmanager:
    def __init__(self):
        self.connect() #实例化后自动执行此函数
    def connect(self):#此时进入数据库，游标也已经就绪
        self.conn = pymysql.connect(host='127.0.0.1',port=3306,user='root',password='123',db='db58',charset='utf8')
        self.cursor = self.conn.cursor(cursor=pymysql.cursors.DictCursor)
    def get_all(self,sql,args=None):
        self.cursor.execute(sql,args)
        result = self.cursor.fetchall()
        return result
    def get_one(self,sql,args=None):
        self.cursor.execute(sql, args)
        result = self.cursor.fetchone()
        return result
    def add_num(self,sql,args=None):
        self.cursor.execute(sql, args)
        self.conn.commit()
    def del_num(self,sql,args=None):
        self.cursor.execute(sql,args)
        self.conn.commit()
    def up_num(self,sql,args=None):
        self.cursor.execute(sql, args)
        self.conn.commit()

　　##Django框架单表操作细节（班级表和教师表）

#1、单表操作的内容

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

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

#2、两种方式的概念与区别

　　1、新url的方式

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

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

　　2、模态对话框的方式

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

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

　　##新url方式　

新url主要利用render和redirect对浏览器页面进行重新刷新，还有a标签进行页面跳转
　　{{}} :跟变量相关
   {%%} :跟逻辑相关
　　前后端传递的变量（其实时字典中的key）要一致

　　a：相当于重新向
　　render：模板引擎渲染新页面
　　redirect：重定向跳到另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h,a{
            margin: 0;
            padding: 0;
            text-decoration: none;

        }
        #hhh{
            background-color: cyan;
            text-align: center;
        }
        #ttt{
            width: 100%;
            text-align: center;
            background-color: cadetblue;
        }
        #a1{
            height:100px ;
            width: 50px;

        }

    </style>
     <style>
        .shadow{
            background-color: black;
            height: 1000px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.4;
            z-index: 99;
            display: none;
        }
        .content{
            background-color: white;
            width: 500px;
            height: 300px;
            position: fixed;
            top:100px;
            left: 500px;
            z-index: 100;
            display: none;
        }
        #error{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="hhh">教师信息</h1>
<div>
    <table border="1px" id="ttt">
        <thead>
            <tr>
                <th>ID</th>
                <th>教师名称</th>
                <th>操作</th>
            </tr>
        </thead>
        {% for item in teachers %}
            <tr>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>
                    {#   a标签提交数据只能通过GET提交，所以删除或者更新我们想要携带数据只能通过?在后面进行拼接                 #}
                    <a href="/del_teacher/?id={{ item.id }}">删除|</a>
                    <a href="/up_teacher/?id={{ item.id }}">更新</a>
                </td>
            </tr>
        {% endfor %}

    </table>
</div>
<div id="dd1">
    {#    <!--点击添加教师跳转到新url中去添加信息-->#}
    <a href="/add_teacher/" id="a1">添加教师</a>
    <button id="btn">模态对话框添加班级</button>
</div>
<div class="shadow"></div>
<div class="content">
        教师名称：<input type="text" name="teachername" id="teachername">
        <input type="button" value="提交" id="tijiao">
        <input type="button" id="cancle" value="取消">
        <spam id="error"></spam>
</div>
</body>
<script src="../static/js/js/jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function () {
        {#$(".shadow").css('display','block');#}
        $(".shadow").show();
        $(".content").show();
    });
    $('#cancle').click(function () {
        $(".shadow").css('display','none');
        $(".shadow").hide();
        $(".content").hide();
    });

    $('#tijiao').click(function () {
        $.ajax(
            {
                type:"POST",
                url:"/modal_add_teacher/",
                data:{"teachername":$('#teachername').val()},
                success:function (data) {
                    if(data == 'ok'){
                        alert('添加成功');
                        {#跳转#}
                        window.location.href = '/teacher/'
                    }
                    else {
                        alert('添加失败');
                        $('#error').text(data)
                    }
                }
            }
        )

    })
</script>
</html>

前端html页面

"""mydjango58 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from django.shortcuts import HttpResponse,render,redirect
from mydjango58.sqlmanager import *

def classes(request):
    # import pymysql
    # conn = pymysql.connect(host='127.0.0.1',user='root',password='123',db='db58',charset='utf8')
    # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # sql = 'select * from classes'
    # cursor.execute(sql)
    # classes = cursor.fetchall()
    # print(classes)
    sql="select * from classes"
    classes = Sqlmanager().get_all(sql)
    return render(request,'classes.html',{"classes":classes})
def add_class(request):
    if request.method == 'GET':
        return render(request,'add_class.html')
    else:
        classname = request.POST.get('classname')
        # print(classname)
        # import pymysql
        # conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='db58', charset='utf8')
        # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # sql = "insert into classes(name) values(%s)"
        # cursor.execute(sql,(classname,))
        # conn.commit()
        sql="insert into classes(name) values(%s)"
        Sqlmanager().add_num(sql,(classname,))
        return redirect('/classes/')
def del_class(request):
    #删除要拿到删除班级id
    class_id = request.GET.get('id')
    # print(class_id)
    # import pymysql
    # conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='db58', charset='utf8')
    # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # sql = "delete from classes where id = %s"
    # cursor.execute(sql, (class_id,))
    # conn.commit()
    sql = "delete from classes where id = %s"
    Sqlmanager().add_num(sql, (class_id,))
    return redirect('/classes/')
def up_class(request):
    if request.method == 'GET':
        id = request.GET.get('id')
        # import pymysql
        # conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='db58', charset='utf8')
        # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # sql = 'select * from classes where id = %s'
        # cursor.execute(sql, (id,))
        # classes = cursor.fetchone()
        # print(classes)

        sql = 'select * from classes where id = %s'
        classes = Sqlmanager().get_one(sql, (id,))
        return render(request, 'update_class.html', {"class_id": classes['id'], "classname": classes['name']})
    else:
        classname =request.POST.get("classname")
        id =request.POST.get('class_id')
        # print(classname,id)
        # import pymysql
        # conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='db58', charset='utf8')
        # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # sql = 'update classes set name=%s where id = %s'
        # cursor.execute(sql, (classname,id))
        # conn.commit()

        sql = 'update classes set name=%s where id = %s'
        Sqlmanager().up_num(sql,(classname,id))
        return redirect('/classes/')

def modal_add_class(request):
    classname = request.POST.get('classname')
    print(classname)
    if not classname:
        return HttpResponse('faild')
    else:
        # import pymysql
        # conn = pymysql.connect(host='127.0.0.1', user='root', password='123', db='db58', charset='utf8')
        # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # sql = "insert into classes(name) values(%s)"
        # cursor.execute(sql, (classname,))
        # conn.commit()

        sql = "insert into classes(name) values(%s)"
        Sqlmanager().add_num(sql, (classname,))
        return HttpResponse('ok')

def teacher(request):
    sql = "select * from teacher"
    teachers = Sqlmanager().get_all(sql)
    return render(request, 'teachers.html', {"teachers": teachers})
def add_teacher(request):
    if request.method == 'GET':
        return render(request,'add_teacher.html')
    else:
        teachername = request.POST.get('teachername')
        sql = "insert into teacher(name) values(%s)"
        Sqlmanager().add_num(sql, (teachername,))
        return redirect('/teacher/')
def del_teacher(request):
    teacher_id = request.GET.get('id')
    sql = "delete from teacher where id=%s"
    Sqlmanager().del_num(sql,(teacher_id,))
    return redirect('/teacher/')
def up_teacher(request):
    if request.method == 'GET':
        id = request.GET.get('id')
        sql = 'select * from teacher where id = %s'
        teachers = Sqlmanager().get_one(sql, (id,))
        print(teachers)
        return render(request, 'update_teacher.html', {"teacher_id": teachers['id'], "teachername": teachers['name']})
    else:
        teachername =request.POST.get("teachername")
        id = request.POST.get('teacher_id')
        print(teachername,id)
        sql = 'update teacher set name=%s where id = %s'
        Sqlmanager().up_num(sql, (teachername, id))
        return redirect('/teacher/')

def modal_add_teacher(request):
    teachername = request.POST.get('teachername')
    print(teachername)
    if not teachername:
        return HttpResponse('faild')
    else:
        sql = "insert into teacher(name) values(%s)"
        Sqlmanager().add_num(sql, (teachername,))
        return HttpResponse('ok')
# 写好路由关系映射
urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^classes/', classes),
    url(r'^add_class/', add_class),
    url(r'^modal_add_class/', modal_add_class),
    url(r'^del_class/', del_class),
    url(r'^up_class/', up_class),
    url(r'^teacher/',teacher),
    url(r'^add_teacher/',add_teacher),
    url(r'^modal_add_teacher/',modal_add_teacher),
    url(r'^del_teacher/',del_teacher),
    url(r'^up_teacher',up_teacher),

]

后端路由管理并处理页面

　　##模态对话框

#1、作用
主要通过ajax与后台进行信息之间的交互，保证页面不进行刷新
通过给特定标签绑定click事件，在事件中通过jq对象对页面进行一些简单的修改以及与后台的数据交互

#2、什么是模态框
网页上面新增了一个窗口，这也就是常见的模态框样式

#3、模态框结构

　　1、文本层

　　　　文本层就是原本的页面，他存在于三层图层最下面的一层

　　　　不用操作样式

　　2、阴影层

　　　　阴影层就是看着灰蒙蒙的那一层，位于三层图层中间的一层

　　　　我们需要把阴影层进行定位(fixed)，让他盖在文本层之上

　　3、弹出框层

　　　　我们看到的和需要输入内容(完成信息的前后台交互)的一层就是弹出框层，

　　　　位于三层图层最上面一层，我们也需要把这一层进行定位(fixed)，使他位于阴影层之上显示

　　注：既然阴影层和弹出框层都需要定位(fixed),那么谁显示在上面就需要根据z-index来确定

　　##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);#}
            }
            ;
        },
    });

　　##简单模态对话框代码

1.先写html代码
2.再写css样式
3.利用jquery代码绑定点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易模态框</title>
    <style>
        /*我们先来把阴影层样式搞定,大小为全屏窗口,透明度调低一些,这样可以看到文本框的内容*/
        .shadow{
            width: 100vw;
            height: 100vh;
            background-color: black;
            opacity: 0.4;
            top: 0;
            left: 0;
            position: fixed;
            display: none;  /*先让他不显示，然后我们点击按钮显示*/
            z-index: 6;
        }
        /*弹出框层设置基本差不多，需要注意把z-index设的比阴影层高*/
        .frame{
            width: 300px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 200px;
            left: 400px;
            z-index: 66;
            display: none;  /*先让他不显示，然后我们点击按钮显示*/
        }
    </style>
</head>
<body>
<!--这里我们就把body当成我们的文本层-->
<h1>这是文本层</h1>
<button type="button" class="show">点我弹出模态框</button>

<!--再来创建阴影层-->
<div class="shadow"></div>

<!--创建弹出框层-->
<div class="frame">
    <span>这是弹出框层</span><br>
    <input type="text">
    <input type="button" value="提交" class="submit">
    <input type="button" value="取消" class="cancel">
</div>

</body>
<!--导入jquery-->
<script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>

<script>
    //第一步，我们需要监视文本层的按钮，一点击我们就把模态框显示出来
    $('.show').click(function () {
        $('.shadow').show();
        $('.frame').show();
    });
    //第二步，我们需要监视弹出框层的取消按钮，一点击就把模态框隐藏起来
    $('.cancel').click(function () {
        $('.shadow').hide();
        $('.frame').hide();
    });
    //到此位置，简易模态框就完成了
</script>

</html>

代码解析

posted on 2019-07-10 21:54 Icon-Liang 阅读(180) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部