用户管理系统之class详解编程语言

接着上一篇博客继续往下总结,上一篇博客的地址:https://www.cnblogs.com/bainianminguo/p/9189324.html

我们开始吧

这里我们就需要先看下我们设计的数据库

一、先看下数据库的设计,我们一共创建了3张表

  表1为class表,他是一个单表,只有一个classes_name的字段

  表2是student表,student表和class表一对多的关系,一个学生只能属于一个班级,但是一个班级可以有多个学生,所以多表是student,他通过外键【Foreignkey】去关联class表,字段为student_class

  表3是teacher表,teacher表和class表是多对多的关系,一个老师可以教多个班级,同样一个班级可以被多个老师教,所以teacher表和class表是一对多的关系,通过【ManyToManyField】去关联class表,字段为teacher_class,通过ManyTomManyField是由django为我们创建第三张表,这里我们自己新建第三张表,通过Foreignkey去关联teacher表和class表

  这里我们为什么为每个表定义一个__str__方法,我们先来回忆面向对象我们学过的几个特殊的方法

  __doc__方法:打印这个类的描述信息,如果有的话

  __module__方法:打印这个某个实例属于哪个类,或者哪个文件,或者哪个模块

  __dict__方法:打印某个类或者实例有哪些方法或者变量

  __str__方法:定义打印这个实例输出的值,这里我们就定义打印这个实例,就输出这个实例的名称的属性,如果没有定义,则会默认输出这个实例的内存地址

from django.db import models 
 
# Create your models here. 
 
class manager(models.Model): 
    manager_name = models.CharField(max_length=32) 
    manager_pwd = models.TextField(max_length=64) 
    manager_age = models.IntegerField() 
    def __str__(self): 
        return self.manager_name 
 
 
class student(models.Model): 
    student_name = models.CharField(max_length=32) 
    student_class = models.ForeignKey("classes") 
    def __str__(self): 
        return self.student_name 
 
 
class classes(models.Model): 
    classes_name = models.CharField(max_length=32,null=False) 
    def __str__(self): 
        return self.classes_name 
 
 
class teacher(models.Model): 
    teacher_name = models.CharField(max_length=32) 
    teacher_class = models.ManyToManyField("classes") 
    def __str__(self): 
        return self.teacher_name 

  

定义好数据库后,需要执行下面的语句来初始化表

用户管理系统之class详解编程语言

 记住,如果为某个app中定义了表,则必须要在settings中定义这个app,因为上面的命令是为创建django中默认的表,因为django自己也默认定义了很多表,所以我们需要在setinggs设置,在为django创建表的时候顺带把我的app下的表也给创建;如果我们是通过pycharm为我们创建的app,则默认pycharm就帮我们设置,下面的截图是pycharm帮我们设置的app的样式,如果是我们手动创建app,则这里只需要写app的名称即可,比如“app1”就可以了

用户管理系统之class详解编程语言

——————————————————————————————————————————————————————————

二、下面我们还得介绍模板继承

首先我们看下我们的base.html的内容

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="/static/css/css2.css"> 
    <style> 
        .hide{ 
            display: none; 
        } 
    </style> 
    {% block css %} 
 
    {% endblock %} 
</head> 
<body> 
<div id="head"> 
    <h2>乌海市第一中学管理系统</h2> 
    <div> 
        欢迎{{ username }}登陆|<a href="/app1/logout/">注销</a> 
    </div> 
</div> 
<div id="left"> 
    <div> 
        <a id="menu_class" href="/app1/classes/">班级管理</a> 
        <a id="menu_student" href="/app1/student/">学生管理</a> 
        <a id="menu_teacher" href="/app1/teacher/">老师管理</a> 
    </div> 
</div> 
<div id="right"> 
    {% block right %} 
 
    {% endblock %} 
</div> 
 
<script src="/static/jq/jquery-3.3.1.js"></script> 
    {% block jq %} 
    {% endblock %} 
</body> 
</html> 

  

首先我们在base.html中至少要写3个block,分别是css、content,还有js的

首先是css的block

    <style> 
        .hide{ 
            display: none; 
        } 
    </style> 
    {% block css %} 
 
    {% endblock %} 

  

然后content的block

<div id="right"> 
    {% block right %} 
 
    {% endblock %} 
</div> 

  

最后是js的block

<script src="/static/jq/jquery-3.3.1.js"></script> 
    {% block jq %} 
    {% endblock %} 

  

然后我们写一个class的html,继承base.html

{% extends "base.html" %} 
 
{% block css %} 
    <link rel="stylesheet" href="/static/css/css1.css"> 
    <link rel="stylesheet" href="/static/css/css2.css"> 
    <style> 
        form p,table{ 
 
            margin-left:70px; 
        } 
        .modal{ 
            position: fixed; 
            background-color: coral; 
            width: 400px; 
            height: 400px; 
            z-index: 101; 
            left: 50%; 
            top: 50%; 
            margin-left: -200px; 
            margin-top: -200px; 
        } 
 
 
        .shade{ 
            position: fixed; 
            background-color: gray; 
            left: 0; 
            top: 0; 
            right: 0; 
            bottom: 0; 
            z-index: 100; 
            opacity: 0.9; 
        } 
        .del_class_modal{ 
            position: fixed; 
            width: 200px; 
            height: 150px; 
            margin-left: -100px; 
            margin-top: -75px; 
            left: 50%; 
            top: 50%; 
            z-index: 101; 
            background-color: green; 
 
 
        } 
        .hide{ 
            display: none; 
        } 
        #page_str a{ 
        padding: 10px; 
 
        } 
 
        #active{ 
            color: yellow; 
            font-size: larger; 
            background-color: black; 
        } 
    </style> 
 
{% endblock %} 
 
{% block right %} 
    <h1>班级页面</h1> 
    <form method="post" action="/app1/classes/"> 
        班级名称:<input type="text" placeholder="新的班级名称" name="new_class_name"> 
        <span id="error">{{ error }}</span> 
        <p> 
            <input type="submit" value="form添加"> 
            <input type="button" value="ajax添加" id="ajax_add_class"> 
        </p> 
        <hr> 
    </form> 
    <table border="1"> 
        <caption>班级列表</caption> 
        <thead> 
 
            <tr> 
                <th>班级id</th> 
                <th>班级名称</th> 
                <th>操作</th> 
            </tr> 
        </thead> 
        <tbody> 
            {% for class in class_list %} 
                <tr> 
                    <td>{{ class.id }}</td> 
                    <td>{{ class.classes_name }}</td> 
                    <td> 
                        <a href="/app1/edit_class/?classid={{ class.id }}">form编辑班级</a>|<a href="/app1/del_class/?classid={{ class.id }}">form删除班级</a>| 
                        <input type="button" value="ajax_编辑" class="ajax_edit_clas">|<input type="button" value="ajax_删除" class="ajax_del_class"> 
                    </td> 
                </tr> 
            {% endfor %} 
        </tbody> 
    </table> 
    <div id="page_str"> 
        {{ page_str|safe }} 
    </div> 
    <div class="hide shade" id="ajax_shade"></div> 
 
    <div class="hide modal" id="ajax_modal"> 
        <form> 
            <label for="class_name">班级名称:</label><input type="text" id="ajax_class_name"> 
            <span id="ajax_error"></span> 
            <br> 
            <input type="button" value="取消" id="del_ajax_add_class"> 
            <input type="button" value="确认" id="confir_add_class"> 
            <input type="reset" value="重置"> 
        </form> 
    </div></div> 
 
    <div class="hide del_class_modal" id="ajax_del_class_modal"> 
        <span class="hide" id="ajax_del_class_id"></span> 
        是否删除<span id="ajax_del_class_name"></span> 
        <br> 
        <span style="color:red" id="ajax_del_class_error"></span> 
        <input type="button" value="确定" id="ajax_del_class_botton"> 
        <input type="button" value="取消" id="not_ajax_del_class_botton"> 
    </div> 
{% endblock %} 
 
 
 
{% block jq %} 
    <script> 
        $(function () { 
             $("#menu_class").addClass("active"); 
            ajax_add_class(); 
            del_ajax_add_class(); 
            ajax_post_new_class(); 
            ajax_del_class(); 
            not_ajax_del_class(); 
            ajax_del_class_botton(); 
        }) 
 
        function ajax_add_class() { 
            $("#ajax_add_class").bind("click",function () { 
                $("#ajax_error").html() 
                $("#ajax_modal").removeClass("hide"); 
                $("#ajax_shade").removeClass("hide"); 
            }) 
        } 
        function del_ajax_add_class() { 
            $("#del_ajax_add_class").bind("click",function () { 
                $("#ajax_modal").addClass("hide"); 
                $("#ajax_shade").addClass("hide"); 
            }) 
        } 
 
        function ajax_post_new_class() { 
            $("#confir_add_class").bind("click",function () { 
                 var new_class_name = $("#ajax_class_name").val() 
                 $.ajax({ 
                     url:"/app1/ajax_post_new_class/", 
                     type:"post", 
                     data:{ 
                         new_class_name:new_class_name 
                     }, 
                     success:function (data) { 
                         var data = JSON.parse(data); 
                         console.log(data) 
                         if (data["state"] == true){ 
 
                             window.location.href = "/app1/classes/" 
                         }else { 
                             var error = data["error"]; 
                             $("#ajax_error").html(error) 
 
                         } 
                     } 
 
                 }) 
            }) 
 
        } 
 
 
        function ajax_del_class() { 
            $(".ajax_del_class").bind("click",function () { 
                var del_class_id = $(this).parent().prev().prev().html(); 
                var del_class_name = $(this).parent().prev().html(); 
 
                $("#ajax_del_class_id").html(del_class_id); 
                $("#ajax_del_class_name").html(del_class_name); 
 
 
                $("#ajax_shade").removeClass("hide"); 
                $("#ajax_del_class_modal").removeClass("hide") 
            }) 
        } 
 
        function not_ajax_del_class() { 
            $("#not_ajax_del_class_botton").bind("click",function () { 
                $("#ajax_shade").addClass("hide") 
                $("#ajax_del_class_modal").addClass("hide") 
            }) 
        } 
 
        function ajax_del_class_botton() { 
            $("#ajax_del_class_botton").bind("click",function () { 
                var temp_id = $("#ajax_del_class_id").html() 
                $.ajax( 
                    { 
                        url:"/app1/ajax_del_class_botton/", 
                        type:"post", 
                        data:{ 
                            "ajax_del_class_id":temp_id 
                        }, 
                        success:function (data) { 
                            data = JSON.parse(data) 
                            if (data["state"] == "true"){ 
                                window.location.href = "/app1/classes/" 
                            }else { 
                                var error_info = data["info"] 
                                $("#ajax_del_class_error").html(error_info) 
                            } 
                        } 
                    } 
                ) 
            }) 
        } 
    </script> 
{% endblock %} 

  

{% extends “base.html” %}去继承母版的html

通过下面的方法重写母版中的数据

{% block right%}

{% endblock %}

——————————————————————————————————————————————————————————

下面我们正常进入class的流程的学习,下面就是我们登陆进class的页面的展示

用户管理系统之class详解编程语言

这里我们用到的知识点很多

1、首先是左边框,如果我们当前是老师页面,则左边的老师的菜单要被选中,这个是通过js实现的,

首先我们在模板中定义了左边菜单的菜单栏,并分别为每个菜单栏设置了一个id的属性

用户管理系统之class详解编程语言

 我们在class页面,待页面加载成功后,通过addClass方法自动为这个标签加一个class属性,active属性,这个active的属性就是表示被选中

用户管理系统之class详解编程语言

 我们在看这个active的属性是如何定义的,只是定义个background-color的属性

.active{ 
    background-color: purple; 
} 

  

 另外我们还为左边的菜单定义hover的css属性,意思是输入移动上显示的css的样式

#left a:hover{ 
    background-color: green; 
}

——————————————————————————————————————————————————————————

下面我们看下面页面上的添加班级按钮是如何实现的,这里我们分别实现了用form表单的方式添加班级和ajax的方式添加班

先看通过form表单的方式添加班级

html的代码

    <form method="post" action="/app1/classes/"> 
        班级名称:<input type="text" placeholder="新的班级名称" name="new_class_name"> 
        <span id="error">{{ error }}</span> 
        <p> 
            <input type="submit" value="form添加"> 
            <input type="button" value="ajax添加" id="ajax_add_class"> 
        </p> 
        <hr> 
    </form> 

  

form的向后端提交数据的方式为:post

form的向后端提交数据的url为:/app1/classes/

input标签中的placeholder就是表框中显示的内容,提示用户这里该输入什么

用户管理系统之class详解编程语言

这里我们没有用到label这个标签,但是我这里的说明一下,因为我们在登陆的页面用到了,但是在上一篇博客中忘记说了

lable标签和input标签配合使用,我们看到label表中有一个for=”username”的属性,实现的效果就是点击label标签中的用户名,鼠标的输入框会自动跳转到for指向的username这个id的input框的输入框中

            <p><label for="username">用户名</label>:<input type="text" placeholder="用户名" name="user_name" id="username"></p> 
            <p><label for="userpwd">密码</label>:<input type="password" placeholder="密码" name="user_pwd" id="userpwd"></p> 

  

下面我们继续来介绍form表单的方式添加班级的流程

然后到urls中找到form表单要提交数据的url,看下这个url是执行的视图函数,我们看到也是classes这个函数,但是不同的是这次是通过post的方式方式的

用户管理系统之class详解编程语言

下面我们来看下视图函数classes

这里的知识点就非常多了,我们一一道来

a、首先我们为classes这个班级加了一个装饰器,outer,这个装饰器的作用就是判断用户这次的请求【request】的session是否有和我们匹配的用户名和密码,如果没有的话,则直接返回到登录,如果有的话,则执行classes这个函数,下面就是这个outer函数的代码

def outer(func): 
    def inner(request,*args,**kwargs): 
        session_name = request.session.get("username") 
        session_pwd = request.session.get("userpwd") 
        if session_name == "root" and session_pwd == "root": 
            rep = func(request,*args,**kwargs) 
            return rep 
        else: 
            return redirect("/app1/home/") 
    return inner 

  

b、下面我们看下分页这个控件是如何实现,因为我们的班级可能会很多,如果不进行分页,则一个页面显示所有的班级则不显示,所以要实现分页的功能,我们把分页这个功能单放在一个模块中,写了成类的

用户管理系统之class详解编程语言

 下面看下具体的page.py的代码,初始化这个page_helpler的类需要以下几个参数

count:一共有多少数据

current_page:要先第几页的数据

per_page_num:一页显示多少条数据

base_url:url地址,因为我们分页在页面的显示是一个一个a标签,这个a表现的href属性指向的地址我们也写自定义的

我们这个控件实现的效果就是,每页显示10条数据,一共仅仅显示11页的数据

我们先来看下我的算法

通过page_count方法中的divmod方式先算出来一共有多少条数据,divmod方法返回一个tuple,这个tuple的第一个值是除数,第二个是余数,如果余数大于0,则总页数是除数+1,如果余数等于0,则总页数就数除数

用户管理系统之class详解编程语言

算法如下

如果总数<=11

  则页面的a标签的开始值为1,页面的a标签的结束值为总数

如果总数>11

  如果当前的current_page<=6

    则页面的a标签的开始值为1,页面的a标签的结束之为11

  如果当前的current_page + 5 + 1>总数

    则页面的a标签的开始值为总数-10,页面的a标签的结束的值为总数+1

  else:    

    则页面的a标签的开始至为current_page – 5,则页面的a标签的结束值为current + 5 + 1

class page_helper(): 
    def __init__(self,count,current_page,per_page_num,base_url): 
        self.count = count 
        self.current_page = current_page 
        self.per_page_num = per_page_num 
        self.base_url = base_url 
    def page_count(self): 
        before, after = divmod(self.count, self.per_page_num) 
        if after > 0: 
            class_count = before + 1 
        else: 
            class_count = before 
        return class_count 
 
    def page_start(self): 
        if self.page_count() <= 11: 
            start_int = 1 
            end_int = self.page_count() 
        else: 
            if self.current_page <= 6: 
                start_int = 1 
                end_int = 11 
            elif self.current_page + 5 + 1 > self.page_count(): 
                start_int = self.page_count() - 10 
                end_int = self.page_count() + 1 
            else: 
                start_int = self.current_page - 5 
                end_int = self.current_page + 5 + 1 
        return start_int 
    def page_end(self): 
        if self.page_count() <= 11: 
            start_int = 1 
            end_int = self.page_count() 
        else: 
            if self.current_page <= 6: 
                start_int = 1 
                end_int = 11 
            elif self.current_page + 5 + 1 > self.page_count(): 
                start_int = self.page_count() - 10 
                end_int = self.page_count() + 1 
            else: 
                start_int = self.current_page - 5 
                end_int = self.current_page + 5 + 1 
 
        return end_int 
 
    def db_start(self): 
        return (self.current_page - 1) * 10 + 1 
 
 
    def db_end(self): 
        return self.current_page * 10 + 1 
 
    def page_list(self): 
        if self.current_page == 1: 
            before_page = """<a href="#">上一页</a>""" 
        else: 
            before_page = """<a href="{url}?p={num}">上一页</a>""".format(url=self.base_url,num=self.current_page - 1) 
        page_list = [] 
        page_list.append(before_page) 
 
        for i in range(self.page_start(),self.page_end() + 1): 
            if i == self.current_page: 
                s = """<a href="{url}?p={num}" class="active">{num}</a>""".format(url=self.base_url,num=i) 
            else: 
                s = """<a href="{url}?p={num}">{num}</a>""".format(url=self.base_url,num=i) 
            page_list.append(s) 
        if self.current_page == self.page_count(): 
            after_page = """<a href="#">下一页</a>""" 
        else: 
            after_page = """<a href="{url}?p={num}">下一页</a>""".format(url=self.base_url,num=self.current_page + 1) 
        page_list.append(after_page) 
        page_str = "".join(page_list) 
        return page_str 

  

page_count:计算总的页数

page_start:计算a标签的开始值

page_end:计算a标签的结束的值

db_start:计算页面显示的数据的开始的数据

db_end:计算页面显示的数据的结束的数据

page_list:计算后端返回给前端的字符串,这段字符串就会被前端渲染成具体的a标签,供客户操作

这里还有一个知识点

这里如果后端返回一段html代码的字符串,则前端不会把这段字符串渲染为html代码,而仅仅是渲染为普通的字符串

我们这里有2种方法

  方法1;前端去处理,用管道付加一个safe方法,告诉html页面,我这段代码是安全的,你可以为我渲染

  用户管理系统之class详解编程语言

  后端就可以直接放回一个字符串就可以了

  用户管理系统之class详解编程语言

  方法2:在后端处理,先需要导入一个模块的make_safe方法

  用户管理系统之class详解编程语言

  用make_safe来处理返回的字符串,则前端就可以直接接受这个字符串了,页面可以正常渲染这个html变量

  用户管理系统之class详解编程语言

  用户管理系统之class详解编程语言

下面我具体来看下添加的函数,这里有以下几个知识点

a、判断数据的合法性,首先判断名称是否为空,然后判断是否重名,通过exists()方法来判断名称是否已经存在

用户管理系统之class详解编程语言

 b、如果校验通过,则往单表中写数据,用create()方法为单表添加数据

 用户管理系统之class详解编程语言

 c、就是locals()方法,这个方位就是这个函数所有的局部变量放在一个dict中,用作render方法的渲染

用户管理系统之class详解编程语言

 下面是所有的代码,慢慢看

@outer 
def classes(request): 
    from django.utils.safestring import mark_safe 
 
    method = request.method.lower() 
    if method == "get": 
 
        count = models.classes.objects.all().count() 
        current_page = int(request.GET.get("p",1)) 
        base_url = request.path 
        obj = page.page_helper(count,current_page,10,base_url) 
        class_list = models.classes.objects.all()[obj.db_start()-1:obj.db_end()-1] 
        error = "" 
        return render(request,"classes.html",{"class_list":class_list,"error":error,"page_str":obj.page_list}) 
    else: 
        new_class_name = request.POST.get("new_class_name",None) 
        if not new_class_name: 
            error = "班级名称不允许为空" 
 
        elif models.classes.objects.filter(classes_name=new_class_name).exists(): 
            error = "班级名称[{name}]已经存在,请输入新的名称".format(name=new_class_name) 
 
        else: 
            models.classes.objects.create( 
                classes_name = new_class_name 
            ) 
 
        # class_list = models.classes.objects.all() 
        return render(request,"classes.html",locals()) 

至此,form表单的方式添加班级已经完成  

 —————————————————————————————————————————————————————————— 

 这里开始介绍ajax的方式添加班级

先看下前端的代码

 写一个input标签,type使用button,然后设置一个id,我们下面要通过id去绑定jquery的事件

用户管理系统之class详解编程语言

 下面是jquery的代码,这里需要用到3个函数

第一个函数,点击ajax添加的按钮,首先要把模态对话框的显示出来,把hide的属性remove掉

        function ajax_add_class() { 
            $("#ajax_add_class").bind("click",function () { 
                $("#ajax_error").html() 
                $("#ajax_modal").removeClass("hide"); 
                $("#ajax_shade").removeClass("hide"); 
            }) 
        } 

  

下面是模态对话框的html代码

    <div class="hide shade" id="ajax_shade"></div> 
 
    <div class="hide modal" id="ajax_modal"> 
        <form> 
            <label for="class_name">班级名称:</label><input type="text" id="ajax_class_name"> 
            <span id="ajax_error"></span> 
            <br> 
            <input type="button" value="取消" id="del_ajax_add_class"> 
            <input type="button" value="确认" id="confir_add_class"> 
            <input type="reset" value="重置"> 
        </form> 
    </div></div> 

  

第二个函数,点击模态对话框中的取消按钮,还需要把模态对话框隐藏回去,也就是给模态对话框的hide属性加回去

        function del_ajax_add_class() { 
            $("#del_ajax_add_class").bind("click",function () { 
                $("#ajax_modal").addClass("hide"); 
                $("#ajax_shade").addClass("hide"); 
            }) 
        } 

  

第三个函数,就是点击确定,然后使用$.ajax方法向后端发送数据

        function ajax_post_new_class() { 
            $("#confir_add_class").bind("click",function () { 
                 var new_class_name = $("#ajax_class_name").val() 
                 $.ajax({ 
                     url:"/app1/ajax_post_new_class/", 
                     type:"post", 
                     data:{ 
                         new_class_name:new_class_name 
                     }, 
                     success:function (data) { 
                         var data = JSON.parse(data); 
                         console.log(data) 
                         if (data["state"] == true){ 
 
                             window.location.href = "/app1/classes/" 
                         }else { 
                             var error = data["error"]; 
                             $("#ajax_error").html(error) 
 
                         } 
                     } 
 
                 }) 
            }) 
 
        } 

  

最后我们需要在注册执行上述的三个函数,$(function)函数,正如我们之前说的,只要页面加载完成,就会自动执行的函数

        $(function () { 
             $("#menu_class").addClass("active"); 
            ajax_add_class(); 
            del_ajax_add_class(); 
            ajax_post_new_class(); 
            ajax_del_class(); 
            not_ajax_del_class(); 
            ajax_del_class_botton(); 
        }) 

  

下面我们看下后端的代码,正如我们前面说的,如果是ajax的方法,则后端返回的信息必须要通过Httpsponse方法来返回,同样返回的字典要通过json.dumps方法处理,然后在前端使用JSON.parse方法反序列化

@outer 
def ajax_post_new_class(request): 
 
    method = request.method.lower() 
    if method == "get": 
        obj = models.classes.objects.all() 
    else: 
        new_class_name = request.POST.get("new_class_name", None) 
        ajax_dict = {"state":True,"error":None} 
        if not new_class_name: 
            ajax_dict["state"] = False 
            ajax_dict["error"] = "名称不允许为空" 
             
 
        elif models.classes.objects.filter(classes_name=new_class_name).exists(): 
            ajax_dict["state"] = False 
            ajax_dict["error"] = "当前数据库中已经存在同名的班级" 
 
        else: 
            models.classes.objects.create( 
                classes_name=new_class_name 
            ) 
        ajax_dict = json.dumps(ajax_dict) 
        return HttpResponse(ajax_dict)

 ——————————————————————————————————————————————————————————

 这里我们看下编辑操作,我们也是用俩种方法实现编辑操作,一个form的方式编辑,一个ajax的方式编辑

这里先看下如何通过form方式实现编辑

页面的效果是这样的

用户管理系统之class详解编程语言

 具体的实现如下,这里是定义一个a标签,然后跳转到另外一个html页面

这里有一个知识点

a、因为我们要在另外一个页面进行编辑操作,那么在另外一个页面就需要知道我要编辑的到底是哪个班级,因为a标签是通过get方式去发起请求,所以我们在url中使用?classid={{class_id}}的方法传参给后端,后端通过request.GET.get(“classid”)的方式拿到这个id,然后从数据库中获取这个id对应的名称,然后渲染到新的页面中

用户管理系统之class详解编程语言

 同样这个页面也必须在url文件中定义

用户管理系统之class详解编程语言

我我们看到这个url对应是视图函数的edit_class这个函数,我们接着看这个函数的代码

首先是get的方式访问,拿到班级的id,然后通过render的方式渲染一个edit_class,html页面

然后是一个post方式方式,根据前端输入的信息执行update方法更新数据库即可

@outer 
def edit_class(request): 
    method = request.method.lower() 
 
    if method == "get": 
        class_id = request.GET.get("classid") 
        class_name = models.classes.objects.get(id=class_id).classes_name 
        return render(request,"edit_class.html",locals()) 
    else: 
        class_id = request.POST.get("class_id") 
        new_class_name = request.POST.get("new_name") 
        if not new_class_name: 
            error = "新的名称不能为空" 
            return render(request,"edit_class.html",locals()) 
        elif models.classes.objects.filter(classes_name=new_class_name).exists(): 
            error = "班级名称{new_name}已经存在".format(new_name=new_class_name) 
            return render(request,"edit_class.html",locals()) 
        else: 
            print(new_class_name) 
            print(class_id) 
            models.classes.objects.filter(id=class_id).update(classes_name = new_class_name) 
            return redirect("/app1/classes/") 

  

新页面的html的代码如下,就一个简单的form表单

{% extends "base.html" %} 
 
{% block css %} 
    <style> 
        .hide{ 
            display: none; 
        } 
    </style> 
{% endblock %} 
{% block right %} 
 
    <form method="post" action="/app1/edit_class/"> 
        <label for="edit_name"></label> 
        <input class="hide" type="text" name="class_id" value={{ class_id }}> 
        <input type="text" id="edit_name" name="new_name" value={{ class_name }}> 
        <span>{{ error }}</span> 
        <br> 
        <input type="submit" value="提交"> 
        <input type="reset" value="重置"> 
        <a href="/app1/classes/">取消</a> 
    </form> 
 
 
{% endblock %}

 ——————————————————————————————————————————————————————————

下面在来看下ajax的方式编辑

用户管理系统之class详解编程语言

如果使用ajax的方式,则要写一个模态对话框

    <div class="hide del_class_modal" id="ajax_del_class_modal"> 
        <span class="hide" id="ajax_del_class_id"></span> 
        是否删除<span id="ajax_del_class_name"></span> 
        <br> 
        <span style="color:red" id="ajax_del_class_error"></span> 
        <input type="button" value="确定" id="ajax_del_class_botton"> 
        <input type="button" value="取消" id="not_ajax_del_class_botton"> 
    </div> 
{% endblock %} 

  

 为这个input标签绑定事件即可

——————————————————————————————————————————————————————————

下面我们在来看下删除的班级的代码

先看form表单的方式删除班级

用户管理系统之class详解编程语言

这个同样也是a标签,同样使用?clss_id={{class.id}}的方式传参给后端

用户管理系统之class详解编程语言

 我们先看del_class这个url会执行的函数

用户管理系统之class详解编程语言

下面在来看下del_class这个函数的内容

@outer 
def del_class(request): 
    method = request.method.lower() 
    if method == "get": 
        del_class_id = request.GET.get("classid") 
        del_class_name = models.classes.objects.get(id=del_class_id).classes_name 
        return render(request,"del_class.html",locals()) 
    else: 
        del_class_id = request.POST.get("del_class_id") 
        models.classes.objects.get(id=del_class_id).delete() 
        return redirect("/app1/classes/") 

  

最后我们看喜爱del_class.html的代码,同样也继承了模板,同样也是写了一个form表单

{% extends "base.html" %} 
 
 
{% block right %} 
    <form method="post" action="/app1/del_class/"> 
        <input type="text" class="hide" name="del_class_id" value={{ del_class_id }}> 
        <span>是否删除{{ del_class_name }}</span> 
        <hr> 
        <br> 
        <input type="submit" value="确定"> 
        <a href="/app1/classes/">取消</a> 
    </form> 
{% endblock %} 
 
{% block jq %} 
 
{% endblock %}

——————————————————————————————————————————————————————————

最后我们在看下通过ajax的方式删除班级

用户管理系统之class详解编程语言

如果是ajax的方式,同样我们也需要写一个模态对话框

    <div class="hide del_class_modal" id="ajax_del_class_modal"> 
        <span class="hide" id="ajax_del_class_id"></span> 
        是否删除<span id="ajax_del_class_name"></span> 
        <br> 
        <span style="color:red" id="ajax_del_class_error"></span> 
        <input type="button" value="确定" id="ajax_del_class_botton"> 
        <input type="button" value="取消" id="not_ajax_del_class_botton"> 
    </div> 

  

然后为ajax删除的按钮绑定事件的函数

这里只有4个知识点

a、$(this)的意思当前点击的标签

b、$(this).parent().prev().prev().html()的意思当前点击的标签的父标签的上一个标签的上一个标签的的值,也就是要删除的班级id

c、$(this).parent().prev().html()的意思当前点击的标签的父标签的上一个标签的值,也就是要删除的班级名称

d、.html()的括号中为空,则是获取值,如果html()的括号有值,则是给这个标签赋值

        function ajax_del_class() { 
            $(".ajax_del_class").bind("click",function () { 
                var del_class_id = $(this).parent().prev().prev().html(); 
                var del_class_name = $(this).parent().prev().html(); 
 
                $("#ajax_del_class_id").html(del_class_id); 
                $("#ajax_del_class_name").html(del_class_name); 
 
 
                $("#ajax_shade").removeClass("hide"); 
                $("#ajax_del_class_modal").removeClass("hide") 
            }) 
        } 

  

用户管理系统之class详解编程语言

 页面的效果如下

用户管理系统之class详解编程语言

 先取消按钮,他也input的button的标签,点击这个标签,把模态对话框的hide的属性加会就可以了 

用户管理系统之class详解编程语言

 我们看下这个取消按钮绑定的事件函数

        function not_ajax_del_class() { 
            $("#not_ajax_del_class_botton").bind("click",function () { 
                $("#ajax_shade").addClass("hide") 
                $("#ajax_del_class_modal").addClass("hide") 
            }) 
        } 

  

最后我们看确定按钮绑定的事件,这个就要发ajax的请求了

如果成功,则跳转到class的页面

如果失败,则错误信息赋值给<span></span>标签

        function ajax_del_class_botton() { 
            $("#ajax_del_class_botton").bind("click",function () { 
                var temp_id = $("#ajax_del_class_id").html() 
                $.ajax( 
                    { 
                        url:"/app1/ajax_del_class_botton/", 
                        type:"post", 
                        data:{ 
                            "ajax_del_class_id":temp_id 
                        }, 
                        success:function (data) { 
                            data = JSON.parse(data) 
                            if (data["state"] == "true"){ 
                                window.location.href = "/app1/classes/" 
                            }else { 
                                var error_info = data["info"] 
                                $("#ajax_del_class_error").html(error_info) 
                            } 
                        } 
                    } 
                ) 
            }) 
        } 

  

 用户管理系统之class详解编程语言

 用户管理系统之class详解编程语言

 后端的函数拿到id后,直接做一个delete的方法删除就可以了

——————————————————————————————————————————————————————————

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/20821.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论