• Django之学员管理

    Django之学员管理

    　　实现-------在前端页面提交的数据，后端可直接写入数据库。在页面实现操作数据库的增删改查。

    　　数据表设计：（三个角色四张表）

    　　　　班级表：

　　　　　　id　　title

　　　　　　1　　 花果山国小一年级

　　　　　　2　　水帘洞小学二年级

　　　

　　　　学生表：

　　　　　　id　　name　　班级ID (FK)

　　　　　　1　　抠脚大汉　　1

　　　　　　2　　一杯倒　　  2



　　　　老师表：

　　　　　　id　　name

　　　　　　1　　George　　

　　　　　　2　　BJ

　　　　　　3　　CF

　　　　

　　　　老师班级关系表：

　　　　　　id　　老师ID　　班级ID 

　　　　　　1　　　　1　　　　1

　　　　　　2　　　　2　　　　1

　　　　　　3　　　　2　　　　2

    　　在Django之初里，我们将几乎所有的url所对应的功能函数都写在里url文件里。这样是不好看也不方便管理的。

    　　所以，我们会创建很多文件夹，每个文件夹里存放针对某一功能的代码。便于管理代码。

    　　代码在APP的views.py里。

    　　在url中，将APP的导入即可。这样url就依旧可以找到相应的函数。　　

    from APPS import views

    　　在页面拿到数据库表的数据：

    　　　　前端classes.html的MK1呈现：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>classes</title>
 6 </head>
 7 <body>
 8     <h1>classes_list</h1>
 9     <table>
10         <thead>
11             <tr>
12                 <th>ID</th>
13                 <th>班级名称</th>
14             </tr>
15         </thead>
16         <tbody>
17             {% for item in class_lsit %}
18                 <tr>
19                     <td>{{ item.cid }}</td>
20                     <td>{{ item.caption }}</td>
21                 </tr>
22             {% endfor %}
23         </tbody>
24     </table>
25 </body>
26 </html>

    　　　　后端的views.py 中的classes函数的代码呈现：

     1 def classes(request):
 2     """
 3     链接数据库
 4     :param request: 用户请求的相关的所有信息(对象)
 5     :return:
 6     """
 7     import pymysql
 8     conn = pymysql.connect(host="127.0.0.1",port=3306,user='root',passwd='劳资的数据库密码你也想知道',db='劳资的数据库名字',charset='utf8')
 9     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor) #改为字典
10     cursor.execute("select cid,caption from classes")
11     class_list = cursor.fetchall()
12     cursor.close()
13     conn.close()
14 
15     return render(request, "classes.html",{"class_lsit":class_list})

    　　　测试结果：如愿拿到了。

    　　

    　　总体进阶：MK2

    　　　　在classes.html页面，可以在页面直接添加数据并存到数据库保存。

    　　　　这样的话，就需要有一个add_class啦。

    　　　　MK2.1

    　　　　classes.html页面加一个div标签

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>classes</title>
 6 </head>
 7 <body>
 8     <h1>classes_list</h1>
 9     <div>
10         <a href="/add_class/">添加</a>
11     </div>
12     <table>
13         <thead>
14             <tr>
15                 <th>ID</th>
16                 <th>班级名称</th>
17             </tr>
18         </thead>
19         <tbody>
20             {% for item in class_lsit %}
21                 <tr>
22                     <td>{{ item.cid }}</td>
23                     <td>{{ item.caption }}</td>
24                 </tr>
25             {% endfor %}
26         </tbody>
27     </table>
28 </body>
29 </html>

    　　加add_class.html 页面：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>add_class</title>
 6 </head>
 7 <body>
 8     <h1>添加班级</h1>
 9     <form action="">
10         <p>班级名称：<input type="text" placeholder="请输入内容"/></p>
11         <input type="submit" value="提交">
12     </form>
13 </body>
14 </html>

    　　views.py中的add_class函数：

    1 def add_class(request):
2     """
3     前端添加数据到数据库
4     :param request:
5     :return:
6     """
7     return render(request,'add_class.html')

    　　MK2.5

    　　现在应该是在add_class页面中添加要提交的数据，点击submit，数据会给数据库，数据库刷新并返回结果。

    　　而add_class页面也应该再有以一次post请求。完成跳转去classes.html页面。

    　　add_class函数的实现：　

     1 def add_class(request):
 2     """
 3     前端添加数据到数据库
 4     :param request:
 5     :return:
 6     """
 7     if request.method == "GET":
 8         return render(request,"add_class.html")
 9     else:
10         print(request.POST)
11         v = request.POST.get("caption")
12         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='XXXXx', db='XXXXx',charset='utf8')
13         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
14         cursor.execute("insert into classes(caption) values(%s)",[v,]) #插入操作
15         conn.commit()  #提交数据
16         cursor.close()
17         conn.close()
18         return redirect("/classes/")

    　　add_class.html 页面

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>add_class</title>
 6 </head>
 7 <body>
 8     <h1>添加班级</h1>
 9     <form method="POST" action="/add_class/">
10         <p>班级名称：<input type="text" name="caption" placeholder="请输入内容"/></p>
11         <input type="submit" value="提交">
12     </form>
13 </body>
14 </html>

    　　MK3：删除。在每行数据的后面加一个删除操作按钮。使其可以去数据库删除掉对应的数据。并返回删除后刷新的结果,跳转到classes页面。

    　　classes.html 页面的删除按钮的添加：

    　　　　在删除过程中，设法使其知道要删除的是哪一行的数据。通过id实现。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>classes</title>
 6 </head>
 7 <body>
 8     <h1>classes_list</h1>
 9     <div>
10         <a href="/add_class/">添加</a>
11     </div>
12     <table>
13         <thead>
14             <tr>
15                 <th>ID</th>
16                 <th>班级名称</th>
17                 <th>操作</th>
18             </tr>
19         </thead>
20         <tbody>
21             {% for item in class_lsit %}
22                 <tr>
23                     <td>{{ item.cid }}</td>
24                     <td>{{ item.caption }}</td>
25                     <td><a href="/del_class/?nid={{ item.cid }}">删除</a></td>
26                 </tr>
27             {% endfor %}
28         </tbody>
29     </table>
30 </body>
31 </html>

    　　del_class函数：

     1 def del_class(request):
 2     """
 3     删除操作
 4     :param request:
 5     :return:
 6     """
 7     #那删除操作的nid。
 8     nid = request.GET.get("nid")
 9     conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='XXXx', db='XXXXx', charset='utf8')
10     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
11     cursor.execute("delete from classes where cid=%s", [nid,])
12     conn.commit()
13     cursor.close()
14     conn.close()
15     return redirect('/classes/')

     　　改编辑了：

    　　MK4：

    　　　　　问题，在后端的编辑的过程中，由于是基于Http协议的请求，所以前端页面在拿到要编辑的数据后，在在编辑完提交时，数据库不知道提交的是哪一行的数据。

    　　　　所以，前端需要连同数据行的id也一并拿走，在提交是，也一并返回，好告知数据库是哪一行的数据。

    　　解决方案一：

    　　edit_class函数：

     1 def edit_class(request):
 2     """
 3     编辑班级
 4     :param request:
 5     :return:
 6     """
 7     if request.method == "GET":
 8         nid = request.GET.get('nid')
 9         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='XXXX', db='XXXXXst', charset='utf8')
10         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
11         cursor.execute("select cid,caption from classes where cid=%s", [nid, ])
12         result = cursor.fetchone()
13         cursor.close()
14         conn.close()
15         print(result)
16         return render(request,"edit_class.html",{"result":result})
17     else:
18         nid = request.POST.get("cid")
19         caption = request.POST.get("caption")

     　　edit_class.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>edit_class</title>
 6 </head>
 7 <body>
 8     <h1>编辑班级</h1>
 9     <form method="POST" action="/edit_class/">
10         <input style="display: none" name="cid" value="{{ result.cid }}">
11         <p>班级名称：<input type="text" name="caption" value="{{ result.caption }}" placeholder="请输入替换数据"></p>
12         <input type="submit" value="submit">
13     </form>
14 </body>
15 </html>

    　　　　方案二：区别在前端页面的不通，在与如何隐藏不该用户见到的数据行id。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>edit_class</title>
 6 </head>
 7 <body>
 8     <h1>编辑班级</h1>
 9     <form method="POST" action="/edit_class/?nid={{ result.cid }}">
10         <p>班级名称：<input type="text" name="caption" value="{{ result.caption }}" placeholder="请输入替换数据"></p>
11         <input type="submit" value="submit">
12     </form>
13 </body>
14 </html>

    　　　　在views函数中，request也变了。

     1 def edit_class(request):
 2     """
 3     编辑班级
 4     :param request:
 5     :return:
 6     """
 7     if request.method == "GET":
 8         nid = request.GET.get('nid')
 9         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
10         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
11         cursor.execute("select cid,caption from classes where cid=%s", [nid, ])
12         result = cursor.fetchone()
13         cursor.close()
14         conn.close()
15         print(result)
16         return render(request,"edit_class.html",{"result":result})
17     else:
18         nid = request.GET.get("nid")  #这里与方案一的不一样
19         caption = request.POST.get("caption")
20         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest',charset='utf8')
21         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
22         cursor.execute("update classes set caption=%s where cid=%s",[caption,nid,])
23         conn.commit()
24         cursor.close()
25         conn.close()
26         return redirect("/classes/")

    ----------------以上是班级的增删改操作。----------------

    　老师的操作同理。就直接上最终版本啦。

    teacher.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>teacher</title>
 6 </head>
 7 <body>
 8     <h1>老师表</h1>
 9     <div>
10         <a href="/add_teacher/">添加</a>
11     </div>
12     <table>
13         <thead>
14             <tr>
15                 <th>ID</th>
16                 <th>name</th>
17                 <th>操作</th>
18             </tr>
19         </thead>
20         <tbody>
21             {% for foo in teacher_list %}
22                 <tr>
23                     <td>{{ foo.id }}</td>
24                     <td>{{ foo.name }}</td>
25                     <td>
26                         <a href="/del_teacher/?nid={{ foo.id }}">删除</a>
27                         |
28                         <a href="/edit_teacher/?nid={{ foo.id }}">编辑</a>
29                     </td>
30                 </tr>
31             {% endfor %}
32         </tbody>
33     </table>
34 </body>
35 </html>

    add_teacher.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>add_teacher</title>
 6 </head>
 7 <body>
 8     <h1>添加老师表</h1>
 9     <form method="POST" action="/add_teacher/">
10         <p>老师添加：<input type="text" name="name" placeholder="添加老师"/></p>
11         <input type="submit" value="submit">
12     </form>
13 </body>
14 </html>

    edit_teacher.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>edit_teacher</title>
 6 </head>
 7 <body>
 8     <h1>编辑老师</h1>
 9     <form method="POST" action="/edit_teacher/?nid={{ result.id }}">
10         <p>老师名称：<input type="text" name="name" value="{{ result.name }}" placeholder="请输入替换数据"></p>
11         <input type="submit" value="submit">
12     </form>
13 </body>
14 </html>

    teacher相关函数功能代码：

     1 def teacher(request):
 2     conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
 3     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
 4     cursor.execute("select id,name from user")
 5     teacher_list = cursor.fetchall()
 6     cursor.close()
 7     conn.close()
 8     return render(request,"teacher.html",{"teacher_list":teacher_list})
 9 
10 def add_teacher(request):
11     if request.method == "GET":
12         return render(request,"add_teacher.html")
13     else:
14         print(request.POST)
15         v = request.POST.get("caption")
16         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest',charset='utf8')
17         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
18         cursor.execute("insert into user(name) values(%s,)", [v,])
19         conn.commit()
20         cursor.close()
21         conn.close()
22         return redirect("/teacher/")
23 
24 def del_teacher(request):
25     """
26     删除操作
27     :param request:
28     :return:
29     """
30     # 那删除操作的nid。
31     nid = request.GET.get("id")
32     conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
33     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
34     cursor.execute("delete from user where id=%s", [nid, ])
35     conn.commit()
36     cursor.close()
37     conn.close()
38     return redirect('/teacher/')
39 
40 
41 def edit_teacher(request):
42     """
43     编辑老师
44     :param request:
45     :return:
46     """
47     if request.method == "GET":
48         nid = request.GET.get('nid')
49         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest',charset='utf8')
50         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
51         cursor.execute("select id,name from user where id=%s", [nid, ])
52         result = cursor.fetchone()
53         cursor.close()
54         conn.close()
55         print(result)
56         return render(request, "edit_teacher.html", {"result": result})
57     else:
58         id = request.GET.get("nid")
59         name = request.POST.get("name")
60         conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest',
61                                charset='utf8')
62         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
63         cursor.execute("update user set name=%s where id=%s",[name,id,])
64         conn.commit()
65         cursor.close()
66         conn.close()
67         return redirect("/teacher/")
68 
69 
70 # Create your views here.

     ----------------------------- 以上就是老师表的全部代码 -------------------

    学生表，这里的学生表就要出现一对多的关系了。一个班级对应多个学生。

    　　学生表这里讲用到模态对话框和Ajax的知识。

    　　获取学生表数据：

     1 def students(request):
 2     """
 3     学生列表
 4     :param request:
 5     :return:
 6     """
 7     conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
 8     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
 9     cursor.execute("select student.id,student.name,class.title from student left JOIN class on student.class_id = class.id")
10     students_list = cursor.fetchall()
11     cursor.close()
12     conn.close()
13 
14     return render(request,"students.html",{"students_list":students_list})

    　　students.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>students</title>
 6 </head>
 7 <body>
 8     <h1>students_list</h1>
 9     <div>
10         <a href="/add_students/">添加</a>
11     </div>
12     <table>
13         <thead>
14             <tr>
15                 <th>ID</th>
16                 <th>学生姓名</th>
17                 <th>所属班级</th>
18                 <th>操作</th>
19             </tr>
20         </thead>
21         <tbody>
22             {% for item in students_list %}
23                 <tr>
24                     <td>{{ item.id }}</td>
25                     <td>{{ item.name }}</td>
26                     <td>{{ item.title }}</td>
27                     <td>
28                         <a href="/del_students/?nid={{ item.id }}">删除</a>
29                         |
30                         <a href="/edit_students/?nid={{ item.id }}">编辑</a>
31                     </td>
32                 </tr>
33             {% endfor %}
34         </tbody>
35     </table>
36 </body>
37 </html>

    　　创建学生信息：也就是添加学生。

    　　和删除学生信息，删除学生信息和删除班级的一样。

     1 def add_students(request):
 2     if request.method == "GET":
 3         conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
 4         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
 5         cursor.execute("select id,title from classes")
 6         class_list = cursor.fetchall()
 7         cursor.close()
 8         conn.close()
 9 
10         return render(request, 'add_students.html', {'class_list': class_list})
11     else:
12         name = request.POST.get('name') #获取POST里的name，也就是前端输入的name
13         class_id = request.POST.get('class_id') #获取班级表，班级的id
14         conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
15         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
16         cursor.execute("insert into student(name,class_id) values(%s,%s)", [name, class_id, ])
17         conn.commit()
18         cursor.close()
19         conn.close()
20         return redirect('/students/')
21 
22 def del_students(request):
23     nid = request.GET.get("nid")
24     conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
25     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
26     cursor.execute("delete from students where id=%s", [nid,])
27     conn.commit()
28     cursor.close()
29     conn.close()
30     return redirect('/students/')

    　　add_students.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>add_students</title>
 6 </head>
 7 <body>
 8     <h1>添加学生</h1>
 9     <form method="POST" action="/add_students/">
10         <p>学生姓名<input type="text" name="name" /></p>
11         <p>
12             所属班级
13             <select name="class_id">
14                 {% for row in class_list %}
15                     <option value="{{ row.id }}">{{ row.title }}</option>
16                 {% endfor %}
17             </select>
18         </p>
19         <input type="submit" value="提交" />
20     </form>
21 </body>
22 </html>

    　　接下来是编辑学生表。

    　　可是，大哥们，劳资频繁的每个函数都要连一下数据库。怎的很烦。我要改一下玩法。将数据库的剔除，单独放在一个文件夹里。用的时候直接导入。

    　　等到后期，会在每个APP里见model。model里写ORM，就更方便了，但是现在慢慢来！

    　　创建一个utils，里边写一个sqlheper.py，这个py文件，放pymysql的操作。

    　　sqlheper.py

    import pymysql

def get_list(sql,args):
    """
    获取列表信息
    :param sql: pymysql语句
    :param args:
    :return:
    """
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    result = cursor.fetchall()
    cursor.close()
    conn.close()
    return result

def get_one(sql,args):
    """
　　　获取一条数据信息
    :param sql: pymysql语句
    :param args:
    :return:
    """
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    result = cursor.fetchone()
    cursor.close()
    conn.close()
    return result

def modify(sql,args):
    """
    更新，删除，修改
    :param sql: pymysql语句
    :param args:
    :return:
    """
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='redhat', db='GeorgeTest', charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute(sql,args)
    conn.commit()
    cursor.close()
    conn.close()

    　　编辑学生表的函数：edit_students:

     1 from utils import sqlheper
 2 def edit_student(request):
 3     if request.method == "GET":
 4         nid = request.GET.get('nid')
 5         class_list = sqlheper.get_list("select id,title from class",[])
 6         # 获取所有班级 sqlheper.get_list()
 7         current_student_info = sqlheper.get_one('select id,name,class_id from student where id=%s',[nid,])
 8         # 获取一条数据信息 sqlheper.get_one()
 9         return render(request,'edit_student.html',{'class_list': class_list,'current_student_info':current_student_info})
10     else:
11         nid = request.GET.get('nid')
12         name = request.POST.get('name')
13         class_id = request.POST.get('class_id')
14         sqlheper.modify('update student set name=%s,class_id=%s where id=%s',[name,class_id,nid,])
15         return redirect('/students/')

    　　edit_students.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>edit_students</title>
 6 </head>
 7 <body>
 8     <h1>编辑学生</h1>
 9     <form method="POST" action="/edit_students/?nid={{  current_student_info.id }}">
10 
11         <p>学生姓名<input type="text" name="name"  value="{{ current_student_info.name }}" /></p>
12         <p>
13             所属班级
14             <select name="class_id">
15                 <!-- 循环所有的班级 -->
16                 {% for row in class_list %}
17                     <!-- 如果是当前学生所在班级，则默认选中 -->
18                     {% if row.id == current_student_info.class_id %}
19                         <option selected value="{{ row.id }}">{{ row.title }}</option>
20                     {% else %}
21                         <option value="{{ row.id }}">{{ row.title }}</option>
22                     {% endif %}
23 
24                 {% endfor %}
25             </select>
26         </p>
27         <input type="submit" value="提交" />
28     </form>
29 </body>
30 </html>

    　　对之前的内容优化，其中：

    　　　　班级的添加，对空字符串没有识别。所以，如果在添加页面，不添加数据，直接提交是可行的。

    　　　　但是，这样不符合设定。对此进行优化。

    　　　　优化如下：

    　　　　add_classes 函数代码：

     1 def add_class(request):
 2     """
 3     前端添加数据到数据库
 4     :param request:
 5     :return:
 6     """
 7     if request.method == "GET":
 8         return render(request,"add_class.html")
 9     else:
10         print(request.POST)
11         v = request.POST.get("caption")
12         if len(v)>0:
13             conn = pymysql.connect(host="127.0.0.1", port=3306, user='root', passwd='redhat', db='GeorgeTest',charset='utf8')
14             cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 改为字典
15             cursor.execute("insert into classes(caption) values(%s)",[v,])
16             conn.commit()
17             cursor.close()
18             conn.close()
19             return redirect("/classes/")
20         else:
21             return render(request,"add_class.html",{"msg":"班级名称不能为空"})

     add_classes.html 页面代码：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>add_class</title>
 6 </head>
 7 <body>
 8     <h1>添加班级</h1>
 9     <form method="POST" action="/add_class/">
10         <p>班级名称：<input type="text" name="caption" placeholder="请输入内容"/></p>
11         <input type="submit" value="提交">{{ msg }}
12     </form>
13 </body>
14 </html>

    　　以后再views中，对用户提交的数据进行判断，要用form组件。

    　  模态对话框：

    　　　　就是在前端做两层装饰，第一层是遮罩层，第二层是内容层(对话框)。

    　　　　针对班级管理，进行进一步的优化，用模态对话框的知识。

    　　　　班级管理：

    　　　　　　-添加操作。用模态对话框实现。

    　　　　　　　　　　模态对话框有两层，就写两个div。

    　　　　　　　　　　但要在前端的页面里加装饰，在head里加。

    　　　　　　　　　　.shadow加在遮罩层。

    　　　　　　　　　　.modal 加在内容层。

    　　　　　　　　　　模态对话框加在classes.html 里。

    　　　　　　　　　　用到了form表单提交，form表提交会导致页面刷新。 

    　　　　　　　　　　页面一涮新，模态对话框就不保留了。

     classes.html 页面：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>classes</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .shadow{
11             position: fixed;
12             left: 0;
13             top: 0;
14             right: 0;
15             bottom: 0;
16             background-color: black;
17             opacity: 0.4;
18             z-index: 999;
19         }
20         .modal{
21             z-index: 1000;
22             position: fixed;
23             left: 50%;
24             top: 50%;
25             height: 300px;
26              400px;
27             background-color: white;
28             margin-left: -200px;
29             margin-top: -150px;
30         }
31     </style>
32 </head>
33 <body>
34     <h1>classes_list</h1>
35     <div>
36         <a href="/add_class/">添加</a>
37         |
38         <a onclick="showModal();">对话框添加</a>
39     </div>
40     <table>
41         <thead>
42             <tr>
43                 <th>ID</th>
44                 <th>班级名称</th>
45                 <th>操作</th>
46             </tr>
47         </thead>
48         <tbody>
49             {% for item in class_lsit %}
50                 <tr>
51                     <td>{{ item.cid }}</td>
52                     <td>{{ item.caption }}</td>
53                     <td>
54                         <a href="/del_class/?nid={{ item.cid }}">删除</a>
55                         |
56                         <a href="/edit_class/?nid={{ item.cid }}">编辑</a>
57                     </td>
58                 </tr>
59             {% endfor %}
60         </tbody>
61     </table>
62 
63     <div id="shadow" class="shadow hide"></div>
64     <div id="modal" class="modal hide">
65         <form method="POST" action="modal_add_classes" >
66             <p>
67             <input type="text" name="title" placeholder="班级名称">
68             </p>
69             <input type="submit" name="submit">
70         </form>
71 
72     </div>
73     <script>
74         function showModal() {
75             document.getElementById("shadow").classList.remove("hide");   #找到遮罩层，并去挑遮罩层
76             document.getElementById("modal").classList.remove("hide");
77 
78         }
79     </script>
80 </body>
81 </html>

     模态对话框添加代码：

     1 def modal_add_classes(request):
 2     #获取前端的title
 3     title = request.POST.get('title')
 4     if len(title) > 0:
 5         sqlheper.modify('insert into class(title) values(%s)',[title,])
 6         # return HttpResponse('ok')
 7         return redirect('/classes/')
 8     elif title == "*?#.":
 9         pass
10     else:
11         return HttpResponse('班级标题不能为空')

    　　对话框提交数据，不建议使用form表单。

    　　　

    　在Django中的Ajax的应用：数据提交，建议使用。

    　　　　Ajax，在页面不刷新的情况下，默默的向后台提交数据。这里要引入jQuery。

    　　基于Ajax，创建学员管理的班级：

    　　　　　　给前端的提交按键，绑定事件，onclick="AjaxSend();"

    　　　　　　在script里的function函数里加AjaxSend()，这时在提交时，就是Ajax提交。$.ajax()

    　　　　　　要注意：Ajax提交的数据有指定：

    　　　　　　　　　　　　数据提交到哪里，要指定：url     数据提交到指定的url中

    　　　　　　　　　　　　数据提交的方法，要指定：type   以什么方法提交数据

    　　　　　　　　　　　　数据提交的数据，要指定：data   要提交的数据，字典存储  data:{"title":"XXXXX"}

    　　　　　　　　　　　　定义success：function（data）{

    　　　　　　　　　　　　　　} ：作用是，在url，type，data发完数据后，ajax会等。等到服务端处理完了，返回数据了，这个success会自动调用。

    　　　　　　　　　　　　　　　　　function里的data是服务端返回的值。

    　　　　　　　　　　　　数据提交成功后，要干嘛：

    　　　　　　　　　　　　数据提交失败后，要干嘛：

     　　　　　

    　　　　　　ajax提交不能实现跳转，是因为ajax本质上只返回字符串。要想实现跳转，只能自己写JS进行跳转。

    =============== Ajax添加 ===============

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>classes</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .shadow{
11             position: fixed;
12             left: 0;
13             top: 0;
14             right: 0;
15             bottom: 0;
16             background-color: black;
17             opacity: 0.4;
18             z-index: 999;
19         }
20         .modal{
21             z-index: 1000;
22             position: fixed;
23             left: 50%;
24             top: 50%;
25             height: 300px;
26              400px;
27             background-color: white;
28             margin-left: -200px;
29             margin-top: -150px;
30         }
31     </style>
32 </head>
33 <body>
34     <h1>classes_list</h1>
35     <div>
36         <a href="/add_class/">添加</a>
37         |
38         <a onclick="showModal();">对话框添加</a>
39     </div>
40     <table>
41         <thead>
42             <tr>
43                 <th>ID</th>
44                 <th>班级名称</th>
45                 <th>操作</th>
46             </tr>
47         </thead>
48         <tbody>
49             {% for item in class_lsit %}
50                 <tr>
51                     <td>{{ item.cid }}</td>
52                     <td>{{ item.caption }}</td>
53                     <td>
54                         <a href="/del_class/?nid={{ item.cid }}">删除</a>
55                         |
56                         <a href="/edit_class/?nid={{ item.cid }}">编辑</a>
57                     </td>
58                 </tr>
59             {% endfor %}
60         </tbody>
61     </table>
62 
63     <div id="shadow" class="shadow hide"></div>
64     <div id="modal" class="modal hide">
65         <form method="POST" action="modal_add_classes" >
66             <p>
67             <input id="title" type="text" name="title" placeholder="班级名称">
68             </p>
69             <input type="button" name="submit" onclick="AjaxSend();"/>
70         </form>
71 
72     </div>
73     <script src="/static/jquery-1.12.4.js"></script>
74     <script>
75         function showModal() {
76             document.getElementById("shadow").classList.remove("hide");   #找到遮罩层，并去挑遮罩层
77             document.getElementById("modal").classList.remove("hide");
78 
79         }
80         function AjaxSend() {
81             $.ajax({
82                 url:'/modal_add_classes/',
83                 type:'POST',
84                 data:{"title":$("#title").val()},  //拿到全段输入的值
85                 success:function (data) {
86                     //当服务端处理完成后，返回数据时，该函数自动调用
87                     //data是服务端返回的值
88                     console.log(data);
89                     if(data=="ok"){
90                         alert('添加成功');
91                     }else {
92                         alert('添加失败');
93                     }
94                 }
95             })
96         }
97     </script>
98 </body>
99 </html>

     　　提交的解决方案：

    　　　　在提交的后面加一个span标签。　

    <span id="errormsg"></span>

    　　效果：classes.html　　

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>classes</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .shadow{
 11             position: fixed;
 12             left: 0;
 13             top: 0;
 14             right: 0;
 15             bottom: 0;
 16             background-color: black;
 17             opacity: 0.4;
 18             z-index: 999;
 19         }
 20         .modal{
 21             z-index: 1000;
 22             position: fixed;
 23             left: 50%;
 24             top: 50%;
 25             height: 300px;
 26              400px;
 27             background-color: white;
 28             margin-left: -200px;
 29             margin-top: -150px;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <h1>classes_list</h1>
 35     <div>
 36         <a href="/add_class/">添加</a>
 37         |
 38         <a onclick="showModal();">对话框添加</a>
 39     </div>
 40     <table>
 41         <thead>
 42             <tr>
 43                 <th>ID</th>
 44                 <th>班级名称</th>
 45                 <th>操作</th>
 46             </tr>
 47         </thead>
 48         <tbody>
 49             {% for item in class_lsit %}
 50                 <tr>
 51                     <td>{{ item.cid }}</td>
 52                     <td>{{ item.caption }}</td>
 53                     <td>
 54                         <a href="/del_class/?nid={{ item.cid }}">删除</a>
 55                         |
 56                         <a href="/edit_class/?nid={{ item.cid }}">编辑</a>
 57                     </td>
 58                 </tr>
 59             {% endfor %}
 60         </tbody>
 61     </table>
 62 
 63     <div id="shadow" class="shadow hide"></div>
 64     <div id="modal" class="modal hide">
 65         <form method="POST" action="modal_add_classes" >
 66             <p>
 67             <input id="title" type="text" name="title" placeholder="班级名称">
 68             </p>
 69             <input type="button" name="submit" onclick="AjaxSend();"/><span id="errormsg"></span>
 70             <input type="button" name="取消" onclick="cancleModal();"/>
 71         </form>
 72 
 73     </div>
 74     <script src="/static/jquery-1.12.4.js"></script>
 75     <script>
 76         function showModal() {
 77             document.getElementById("shadow").classList.remove("hide");   //找到遮罩层，并去挑遮罩层
 78             document.getElementById("modal").classList.remove("hide");
 79 
 80         }
 81         function cancleModal() {
 82             document.getElementById('shadow').classList.add('hide');
 83             document.getElementById('modal').classList.add('hide')
 84         }
 85         function AjaxSend() {
 86             $.ajax({
 87                 url:'/modal_add_classes/',
 88                 type:'POST',
 89                 data:{"title":$("#title").val()},  //拿到全段输入的值
 90                 success:function (data) {
 91                     //当服务端处理完成后，返回数据时，该函数自动调用
 92                     //data是服务端返回的值
 93                     console.log(data);
 94                     if(data=="ok"){
 95                         location.href='/classes/'; //指定提交成功后跳转到哪里
 96                     }else {
 97                         $('#errormsg').text(data);
 98                     }
 99                 }
100             })
101         }
102     </script>
103 </body>
104 </html>

    　　modal_add_classes:

     1 def modal_add_classes(request):
 2     #获取前端的title
 3     title = request.POST.get('title')
 4     if len(title) > 0:
 5         sqlheper.modify('insert into class(title) values(%s)',[title,])
 6         return HttpResponse('ok')
 7         # return redirect('/classes/')
 8     elif title == "*?#.":
 9         pass
10     else:
11         return HttpResponse('班级标题不能为空')

    ============  班级的编辑操作，用ajax实现：单表的  =============

     　　　　　技巧，对于a标签的事件，跳转的问题，可以绑定再绑定一个事件，跳转到别的地方。

    　　　　　 在a标签中的onclick事件中加return。

    　　　　　　在function modelEdit(){

    　　　　　　　　alert(123);

    　　　　　　　　return false

    　　　　　　}

    　　　　　　　在return 这里是关键，事件优先执行onclick，执行完后执行href，返回return，在function中将return的返回值设为False，就不会执行href里要跳转的url。

    　　　　　　　　改为True，就会进行跳转。

    　　　　　　　　这个功能用在form表单里。

    　　　　　　在点击编辑后，需要将要编辑的内容放在编辑框，需要做的方法是，将获取当前点击的标签，以及他上一级的标签。

    　　　　　　　　其次是标签父标签，再找其上方标签。

     后端代码：

     1 def modal_edit_classes(request):
 2     ret = {"status":True,"message":None}
 3     try:
 4         nid = request.POST.get("nid") # 拿id
 5         content = request.POST.get("content") #拿内容
 6         sqlheper.modify("update class set title=%s where id=%s",[content,nid,])
 7     except Exception as e:
 8         ret['status'] = False
 9         ret['message'] = "处理异常"
10     return HttpResponse(json.dumps(ret)) #json将数据转成字符串，在发给前端

    前端代码：

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>classes</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .shadow{
 11             position: fixed;
 12             left: 0;
 13             top: 0;
 14             right: 0;
 15             bottom: 0;
 16             background-color: black;
 17             opacity: 0.4;
 18             z-index: 999;
 19         }
 20         .modal{
 21             z-index: 1000;
 22             position: fixed;
 23             left: 50%;
 24             top: 50%;
 25             height: 300px;
 26              400px;
 27             background-color: white;
 28             margin-left: -200px;
 29             margin-top: -150px;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <h1>classes_list</h1>
 35     <div>
 36         <a href="/add_class/">添加</a>
 37         |
 38         <a onclick="showModal();">对话框添加</a>
 39     </div>
 40     <table>
 41         <thead>
 42             <tr>
 43                 <th>ID</th>
 44                 <th>班级名称</th>
 45                 <th>操作</th>
 46             </tr>
 47         </thead>
 48         <tbody>
 49             {% for item in class_lsit %}
 50                 <tr>
 51                     <td>{{ item.cid }}</td>
 52                     <td>{{ item.caption }}</td>
 53                     <td>
 54                         <a href="/del_class/?nid={{ item.cid }}">删除</a>
 55                         |
 56                         <a onclick="modelEdit();">对话框删除</a>
 57                         |
 58                         <a href="/edit_class/?nid={{ item.cid }}">编辑</a>
 59                     </td>
 60                 </tr>
 61             {% endfor %}
 62         </tbody>
 63     </table>
 64 
 65     <div id="shadow" class="shadow hide"></div>
 66     <div id="modal" class="modal hide">
 67         <form method="POST" action="modal_add_classes" >
 68             <p>
 69             <input id="title" type="text" name="title" placeholder="班级名称">
 70             </p>
 71             <input type="button" name="submit" onclick="AjaxSend();"/><span id="errormsg"></span>
 72             <input type="button" name="取消" onclick="cancleModal();"/>
 73         </form>
 74     </div>
 75 
 76     <div id="editModel" class="modal hide">
 77         <h3>编辑框</h3>
 78         <p>
 79             <input id="editId" type="text" name="id" style="display: none" />
 80             <input id="editTitle" type="text" name="title" />
 81         </p>
 82         <input type="button" value="提交" onclick="editAjaxSend();" /><span id="errormsg"></span>
 83         <input type="button" value="取消" onclick="cancleModal();" />
 84     </div>
 85     <script src="/static/jquery-1.12.4.js"></script>
 86     <script>
 87         function showModal() {
 88             document.getElementById("shadow").classList.remove("hide");   //找到遮罩层，并去挑遮罩层
 89             document.getElementById("modal").classList.remove("hide");
 90 
 91         }
 92 
 93         function cancleModal() {
 94             document.getElementById('shadow').classList.add('hide');
 95             document.getElementById('modal').classList.add('hide')
 96             document.getElementById('eidtModal').classList.add('hide')
 97         }
 98 
 99         function AjaxSend() {
100             $.ajax({
101                 url:'/modal_add_classes/',
102                 type:'POST',
103                 data:{"title":$("#title").val()},  //拿到全段输入的值
104                 success:function (data) {
105                     //当服务端处理完成后，返回数据时，该函数自动调用
106                     //data是服务端返回的值
107                     console.log(data);
108                     if(data=="ok"){
109                         location.href='/classes/'; //指定提交成功后跳转到哪里
110                     }else {
111                         $('#errormsg').text(data);
112                     }
113                 }
114             })
115         }
116 
117         function modelEdit(ths) {
118             document.getElementById("shadow").classList.remove("hide");   //找到遮罩层，并去挑遮罩层
119             document.getElementById("editModel").classList.remove("hide");
120             /*
121             1、获取当前点击标签
122             2、获取当前标签的父标签，再找其上方标签
123             3、获取当前行班级名称，赋值到编辑对话框中
124             */
125             var row = $(ths).parent().prevAll();
126             var content = $(row[0]).text();
127             $('editTitle').val(content);
128 
129             var contentId = $(row[1].text());
130             $('#editId').var(contentId);
131 
132         }
133 
134         function editAjaxSend() {
135             var nid = $('#editID').val();
136             var content = $('#editTitle').val();
137             console.log(nid,content);
138             $.ajax({
139                 url:'/modal_edit_classes/',
140                 type:"POST",
141                 data:{"nid":nid,"content":content},
142                 success:function (arg) {
143                     // arg字符串类型
144                     // JSON.parse(字符串) => 对象
145                     // JSON.stringify(对象) => 字符串
146                     arg = JSON.parse(arg);
147                     if(arg.status){
148                         //location.href="/classes/"
149                         location.reload();
150                     }else{
151                         alert(arg.message);
152                     }
153                 }
154             })
155         }
156     </script>
157 </body>
158 </html>

     

    ================== ajax 学生表，一对多，添加 ================== 

    　　绑定事件，都是基于jQuery。

    　　jQuery也可以阻止默认事件的发生。

    1 <script>
2     //绑定事件。
3     $(function () {
4         $("#modal_add_students").click(function () {
5             alert(123);
6             return false;   #阻止默认事件
7         })
8     })
9 </script>

    后端代码：

     1 def modal_add_students(request):
 2     ret = {"status":True,"message":None}
 3 
 4     try:
 5         name = request.POST.get("name")
 6         classes_id = request.POST.get("classes_id")
 7         sqlheper.modify('insert into students(name,classes_id) values(%s,%s)',[name,classes_id,])
 8     except Exception as e:
 9         ret['status'] = False
10         ret['message'] = str(e)
11 
12     return HttpResponse(json.dumps(ret))

    前端代码：

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>students</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .shadow{
 11             position: fixed;
 12             left: 0;
 13             top: 0;
 14             right: 0;
 15             bottom: 0;
 16             background-color: black;
 17             opacity: 0.4;
 18             z-index: 999;
 19         }
 20         .add-modal{
 21             z-index: 1000;
 22             position: fixed;
 23             left: 50%;
 24             top: 50%;
 25             height: 300px;
 26              400px;
 27             background-color: white;
 28             margin-left: -200px;
 29             margin-top: -150px;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <h1>students_list</h1>
 35     <div>
 36         <a href="/add_students/">添加</a>
 37         |
 38         <a onclick="modal_add_students">对话框添加</a>
 39     </div>
 40     <table>
 41         <thead>
 42             <tr>
 43                 <th>ID</th>
 44                 <th>学生姓名</th>
 45                 <th>所属班级</th>
 46                 <th>操作</th>
 47             </tr>
 48         </thead>
 49         <tbody>
 50             {% for item in students_list %}
 51                 <tr>
 52                     <td>{{ item.id }}</td>
 53                     <td>{{ item.name }}</td>
 54                     <td>{{ item.title }}</td>
 55                     <td>
 56                         <a href="/del_students/?nid={{ item.id }}">删除</a>
 57                         |
 58                         <a href="/edit_students/?nid={{ item.id }}">编辑</a>
 59                     </td>
 60                 </tr>
 61             {% endfor %}
 62         </tbody>
 63     </table>
 64 
 65     <div id="shadow" class="shadow hide"></div>
 66     <div id="addModal" class="add-modal hide"></div>
 67 
 68         <p>
 69             Name:<input id="addName" type="text" name="name" placeholder="Name">
 70         </p>
 71         <p>
 72             Classes:<input id="addClassesId" type="text" name="Classes" placeholder="Classes">
 73             <select name="classesID" >
 74                 {% for row in classes_list %}
 75                     <option value="{{ row.id }}">{{ row.title }}</option>
 76                 {% endfor %}
 77 
 78             </select>
 79         </p>
 80     <input id="btnAdd" type="button" value="添加" />
 81     <span id="addError" style="color: red;"></span>
 82 
 83     <script src="/static/jquery-1.12.4.js"></script>
 84     <script>
 85         //绑定事件。
 86         $(function () {
 87             $("#addModal").click(function () {
 88                 $("#shadow,#addModal").removeClass('hide');
 89             })
 90             
 91             $('#btnAdd').click(function () {
 92                 $.ajax({
 93                     url:"/modal_add_students/",
 94                     type:"POST",
 95                     data:{"name":$("#addName").val(),"classes_id":$("#addClassesId").val()},
 96                     success:function (arg) {
 97                         //回调函数，
 98                         //console.log(arg); //将数据发送给后台
 99                         arg = JSON.parse(arg);
100                         if(arg.status){
101                             location.reload();
102                         }else{
103                             $("#addError").text(arg.message);
104                         }
105                     }
106                 })
107             })
108         })
109     </script>
110 </body>
111 </html>

    --------- END ----------

    　　
  • 相关阅读:
    linux ioctl
    pkg-config用法和gcc cflags
    boost noncopyable类
    google protobuf使用2
    跨平台编译CMake使用
    Linux epoll
    docker安装
    python 脚本转成exe可执行程序
    shell相关知识
    tcpdump使用
  • 原文地址：https://www.cnblogs.com/george92/p/9447230.html
Copyright © 2020-2023  润新知