• 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{
                 100%;
                text-align: center;
                background-color: cadetblue;
            }
            #a1{
                height:100px ;
                 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;
                 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{
                 100vw;
                height: 100vh;
                background-color: black;
                opacity: 0.4;
                top: 0;
                left: 0;
                position: fixed;
                display: none;  /*先让他不显示,然后我们点击按钮显示*/
                z-index: 6;
            }
            /*弹出框层设置基本差不多,需要注意把z-index设的比阴影层高*/
            .frame{
                 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>
    代码解析
  • 相关阅读:
    如何取消IntelliJ IDEA打开默认项目配置
    SQL注入和XSS攻击的原理
    什么是SQL注入?什么是XSS攻击?什么是CSRF攻击?
    jQuery动态添加删除CSS样式
    ArcGisJS实现地图常用工具条、距离测量和面积测量(非官方实例)
    Visual Studio Code打开终端控制台
    IntelliJ IDEA热部署教程,只要两步!
    Visual Studio Code 设置中文语言版本
    Visual Studio Code 入门教程
    使用bind配置DNS服务(CentOS 6.5)
  • 原文地址:https://www.cnblogs.com/liangzhenghong/p/11166839.html
Copyright © 2020-2023  润新知