zoukankan      html  css  js  c++  java
  • 基于django的校园信息管理系统

    本项目基于django,前端使用了新url和模态对话框两种方式,使用了jquery和ajax技术,后端使用了MySQL,将数据存入数据库,进行增删改查等操作。

    本项目可以实现教师管理、班级管理、学生管理,在后台管理页面上,可以方便地进入每一个模块进行管理。

    url部分

     1 """database_do URL Configuration
     2 
     3 The `urlpatterns` list routes URLs to views. For more information please see:
     4     https://docs.djangoproject.com/en/2.2/topics/http/urls/
     5 Examples:
     6 Function views
     7     1. Add an import:  from my_app import views
     8     2. Add a URL to urlpatterns:  path('', views.home, name='home')
     9 Class-based views
    10     1. Add an import:  from other_app.views import Home
    11     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
    12 Including another URLconf
    13     1. Import the include() function: from django.urls import include, path
    14     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
    15 """
    16 from django.contrib import admin
    17 from django.urls import path
    18 from app01 import  views
    19 
    20 urlpatterns = [
    21     path('admin/', admin.site.urls),
    22     path('classes/',views.classes),
    23     path('add/',views.add),
    24     path('delete/',views.delete),
    25     # path('de'.views.delete),
    26     path('edit/',views.edit),
    27     path('student_manage/',views.student_manage),
    28     path('student_add/',views.student_add),
    29     path('student_edit/',views.student_edit),
    30     path('modal_add_class/',views.modal_add_class),
    31     path('modal_del_class/',views.modal_del_class),
    32     path('modal_edit_class/', views.modal_edit_class),
    33     path('modal_add_student/', views.modal_add_student),
    34     path('modal_edit_student/', views.modal_edit_student),
    35     path('modal_del_student/',views.modal_del_student),
    36     path('teacher/',views.teacher),
    37     path('add_teacher/',views.add_teacher),
    38     path('edit_teacher/',views.edit_teacher),
    39     path('layout/',views.layout),
    40     path('login/', views.login)
    41 
    42 ]

    view部分

      1 import pymysql
      2 import json
      3 from django.shortcuts import render,HttpResponse,redirect
      4 from utils import sqlhelper
      5 
      6 def classes(request):
      7 
      8     #connect
      9     conn=pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='root',db='dangdang')
     10     cursor=conn.cursor()
     11     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  # 设置查询结果为字典格式
     12     cursor.execute("select id,class_name from class")
     13     class_list=cursor.fetchall()#结果为字典
     14     cursor.close()
     15     conn.close()
     16 
     17     return render(request,'classes.html',{'class_list':class_list})
     18 
     19 def add(request):
     20     if request.method=='GET':
     21         return render(request,'add.html')
     22     else:
     23 
     24         v=request.POST.get('class_name')
     25         if(len(v)>0):
     26             conn=pymysql.connect(host='127.0.0.1',port=3306,user='root',passwd='root',db='dangdang')
     27             cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
     28             cursor.execute("insert into class(class_name) value(%s)",[v,])
     29             conn.commit()
     30             cursor.close()
     31             conn.close()
     32             return redirect('/classes/')
     33         else:
     34             return render(request,'add.html',{'msg':'班级名称不能为空'})
     35 
     36 def delete(request):
     37     # if request.method=='GET':
     38     #     return render(request,'delete.html')
     39     # else:
     40         print('==============')
     41         print(request.GET)
     42         delete_id=request.GET.get('id')
     43         conn=pymysql.connect(host='127.0.0.1',user='root',passwd='root',db='dangdang')
     44         cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
     45         cursor.execute("delete from class where id=%s",[delete_id,])
     46         conn.commit()
     47         cursor.close()
     48         conn.close()
     49         return redirect('/classes/')
     50 
     51 def edit(request):
     52     """
     53     #这一段主要是为了在跳转的页面上显示原始数据
     54     先找到指定id的值,再拿出来,显示到浏览器上
     55     sql语句是:select xxx from xxx where xxx
     56     :param request:
     57     :return:
     58     """
     59     if request.method=='GET':
     60         # return render(request,'edit.html')
     61         print('|-----------以下是get-----------------|')
     62         print(request.__dict__)
     63         edit_id=request.GET.get('id')
     64         edit_name=request.GET.get('class_name')
     65         conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='dangdang')
     66         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
     67         cursor.execute("select id,class_name from class where id=%s", [edit_id, ])
     68         result=cursor.fetchone()
     69         print(result)
     70         cursor.close()
     71         conn.close()
     72         return render(request,'edit.html',{'result':result})
     73     else:
     74         conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='dangdang')
     75         edit_id = request.GET.get('id')
     76         edit_name = request.POST.get('class_name')
     77         print('|-----------以下是post-----------------|')
     78         print(request.__dict__)
     79         print(edit_name,edit_id)
     80         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
     81         cursor.execute("update class set class_name=%s where id=%s", [edit_name,edit_id,])
     82         conn.commit()
     83         cursor.close()
     84         conn.close()
     85         return redirect('/classes/')
     86 
     87 def student_manage(request):
     88     """
     89 
     90     :param request:
     91     :return:
     92     """
     93     delete_id = request.GET.get('id')
     94     conn = pymysql.connect(host='127.0.0.1', user='root', passwd='root', db='dangdang')
     95     cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
     96     cursor.execute("SELECT student.id,student.`name`,student.classid,class.class_name FROM student LEFT JOIN class on  student.classid=class.id")
     97     student_list=cursor.fetchall()
     98     cursor.close()
     99     conn.close()
    100     class_list=sqlhelper.getall('select id,class_name from class ',[])
    101     return render(request,'student_manage.html',{'student_list':student_list,'class_list':class_list})
    102 
    103 def student_add(request):
    104     if request.method=='GET':
    105         conn = pymysql.connect(host='127.0.0.1', user='root', passwd='root', db='dangdang')
    106         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    107         cursor.execute("select id,class_name from class ")
    108         class_list = cursor.fetchall()
    109         cursor.close()
    110         conn.close()
    111         return render(request,'student_add.html',{'class_list':class_list})
    112     else:
    113         classid=request.POST.get('class_id')
    114         student_name=request.POST.get('name')
    115         print(classid)
    116 
    117         # cursor.execute("insert into student(`name`,classid)")
    118         # conn.commit()
    119         conn = pymysql.connect(host='127.0.0.1', user='root', passwd='root', db='dangdang')
    120         cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    121 
    122         cursor.execute("insert into student(`name`,classid)values(%s,%s)",[student_name,classid,])
    123         cursor.fetchone()
    124         cursor.close()
    125         conn.close()
    126 
    127         # student_list = cursor.fetchall()
    128 
    129         return redirect('/student_manage/')
    130 
    131 def student_edit(request):
    132     if request.method=='GET':
    133         # return render(request,'edit.html')
    134         print('|-----------以下是get-----------------|')
    135         print(request.__dict__)
    136         # global student_edit_id
    137         student_edit_id=request.GET.get('id')#这个id来自于html中,使用get
    138         print(student_edit_id)
    139         student_edit_name=request.GET.get('class_name')
    140         current_student_info=sqlhelper.getone("select id,`name`,classid from student where id=%s", [student_edit_id, ])
    141         # conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='dangdang')
    142         # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    143         # cursor.execute("select `name`,classid from student where id=%s", [student_edit_id, ])
    144         #
    145         # #把student中的一条选中,发到html中
    146         # """
    147         #  result name,classid
    148         # """
    149         # result=cursor.fetchone()
    150         print(current_student_info)
    151         # cursor.execute("select id,class_name from class")
    152         # class_list = cursor.fetchall()
    153         # cursor.close()
    154         # conn.close()
    155         class_list=sqlhelper.getall("select id,class_name from class",[])
    156         return render(request,'student_edit.html',{'current_student_info':current_student_info,'class_list':class_list,'student_id':student_edit_id})
    157     else:
    158         student_edit_id = request.GET.get('id')#学号,也就是学生的唯一id
    159         student_edit_classid=request.POST.get('classid')
    160         student_edit_name = request.POST.get('student_name')
    161         print('|-----------以下是post-----------------|')
    162         print(student_edit_classid,student_edit_name,student_edit_id)
    163         print(request.__dict__)
    164         sqlhelper.modify('update student set `name`=%s,classid=%s where id=%s', [student_edit_name, student_edit_classid ,student_edit_id, ] )
    165 
    166         # conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root', db='dangdang')
    167         # cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    168         #
    169         # cursor.execute("update student set `name`=%s,classid=%s where id=%s", [student_edit_name, student_edit_classid ,student_edit_id, ])
    170         # print('===================')
    171         # conn.commit()
    172         # cursor.close()
    173         # conn.close()
    174         return redirect('/student_manage/')
    175 
    176 def modal_add_class(request):
    177     # class_name=request.POST.get('class_name')
    178     # msg='班级不能为空空哦'
    179     # if(len(class_name)>0):
    180     #     sqlhelper.modify('insert into class(class_name)values(%s)',[class_name,])
    181     #     return redirect('/classes/')
    182     # else:
    183     #     #
    184     #     return render(request,'classes.html',{'msg':msg})
    185     class_name = request.POST.get('class_name')
    186     if len(class_name) > 0:
    187         print('=====等待插入=========')
    188         sqlhelper.modify('insert into class (class_name)value(%s)', [class_name, ])
    189         return HttpResponse('ok')
    190         print('=====插入成功=========')
    191         return   redirect('/classes/')
    192     else:
    193         return HttpResponse('班级标题不能为空')
    194 
    195 def modal_del_class(request):
    196     ret = {'status': True, 'message': None}
    197     try:
    198         nid = request.POST.get('nid')
    199         print('接收到',nid)
    200         content = request.POST.get('content')
    201         print('准备删除======================')
    202         sqlhelper.modify('delete from class where id=%s', [nid,])
    203         print('删除成功====================')
    204     except Exception as e:
    205         ret['status'] = False
    206         ret['message'] = str(e)
    207     import json
    208     return HttpResponse(json.dumps(ret))  # 使用json将字典转变成字符串
    209 
    210 def modal_edit_class(request):
    211     ret={'status':True,'message':None}
    212     try:
    213         nid=request.POST.get('nid')
    214         content=request.POST.get('content')
    215         sqlhelper.modify('update class set class_name=%s where id=%s',[content,nid])
    216     except Exception as e:
    217         ret['status']=False
    218         ret['message']=str(e)
    219     import json
    220     return HttpResponse(json.dumps(ret))#使用json将字典转变成字符串
    221 
    222 def modal_add_student(request):
    223     ret={'status':True,'message':None}
    224     name=request.POST.get('name')
    225     class_id=request.POST.get('class_id')
    226     # try:
    227     #     if(len(name)>0):
    228     #         sqlhelper.modify('insert into student(name,classid)values (%s,%s)',[name,class_id])
    229     #     else:
    230     # except Exception as e:
    231     #     ret['status']=False
    232     #     ret['message']=str(e)
    233     # return  HttpResponse(json.dumps(ret))
    234     if(len(name)>0):
    235         sqlhelper.modify('insert into student(name,classid)values (%s,%s)',[name,class_id])
    236         return HttpResponse('ok')
    237     else:return HttpResponse('error')
    238 
    239 def modal_edit_student(request):
    240     # 'student_id':$('#edit_student_id').val(),
    241     # 'class_id':$('#edit_class_id').val(),
    242     # 'student_name':$('#edit_name').val},
    243     student_id=request.POST.get('student_id')
    244     class_id=request.POST.get('class_id')
    245     student_name=request.POST.get('student_name')
    246     print(student_name,student_id,class_id)
    247     sqlhelper.modify('update student set `name`=%s,classid=%s where id=%s',[student_name, class_id, student_id, ])
    248     print('=================okk=====================')
    249     return HttpResponse('okk')#这一步非常重要,告诉前端,你好了
    250 
    251 def modal_del_student(request):
    252     student_id = request.POST.get('student_id')
    253     class_id = request.POST.get('class_id')
    254     student_name = request.POST.get('student_name')
    255     print('+++++++*****已获取身份******++++++')
    256     print(student_name, student_id, class_id)
    257     sqlhelper.modify('delete from student where id=%s',[student_id,])
    258     return HttpResponse('ok')
    259 
    260 def teacher(request):
    261     sql="""
    262         
    263     SELECT teacher.id as tid,teacher.name, class.class_name FROM teacher
    264 
    265 LEFT JOIN teacher_class on teacher.id=teacher_class.teacher_id
    266 LEFT JOIN class on class.id=teacher_class.class_id
    267     
    268     """
    269     teacher_list=sqlhelper.getall(sql,[])
    270     # print(teacher_list)
    271     result = {}
    272     for row in teacher_list:
    273 
    274         tid = row['tid']
    275         if tid in result:
    276             result[tid]['titles'].append(row['class_name'])
    277         else:
    278             result[tid] = {'tid': row['tid'], 'name': row['name'], 'titles': [row['class_name'], ]}
    279     # print(result)
    280     return render(request,'teacher.html',{'teacher_list':result.values()})
    281 """
    282 list=[{'tid': 1, 'name': '刘玉杰', 'class_name': '电科技161'}, 
    283 {'tid': 1, 'name': '刘玉杰', 'class_name': '电科技162'},
    284 {'tid': 1, 'name': '刘玉杰', 'class_name': '通信161'},
    285 {'tid': 2, 'name': '梁瑞宇', 'class_name': '电科技161'},
    286 {'tid': 2, 'name': '梁瑞宇', 'class_name': '电科技162'}, 
    287 {'tid': 2, 'name': '梁瑞宇', 'class_name': '计科技161'}, 
    288 {'tid': 3, 'name': '潘子宇', 'class_name': '电信161'}, 
    289 {'tid': 4, 'name': '唐晓雨', 'class_name': '电信161'},
    290 {'tid': 5, 'name': '冯月芹', 'class_name': '电信161'}]
    291  list.0['tid']
    292  for i in range(0,len(list))
    293    
    294 
    295 """
    296 def add_teacher(request):
    297     if request.method=='GET':
    298         class_list=sqlhelper.getall('select id,class_name from class',[])
    299         return  render(request,'add_teacher.html',{'class_list':class_list})
    300     else:
    301         data_list=[]
    302         name=request.POST.get('name')
    303         class_ids=request.POST.getlist('class_id')
    304         print(name,class_ids)
    305         obj=sqlhelper.SqlHelper()
    306         #老师表中添加一条数据
    307         teacher_id=obj.create('insert into teacher(name)value(%s)',[name,])#create has return value
    308         for item in class_ids:
    309             temp=(teacher_id,item,)
    310             data_list.append(temp)
    311         obj.multiple_modify('insert into teacher_class(teacher_id,class_id)values (%s,%s)',data_list)
    312         return redirect('/teacher/')
    313 
    314 def edit_teacher(request):
    315     if request.method == 'GET':
    316         obj=sqlhelper.SqlHelper()
    317         current_teacher_id=request.GET.get('nid')
    318         print(current_teacher_id)
    319 
    320         #班级列表
    321         class_list =obj.getall('select id,class_name from class', [])
    322         #当前教师信息
    323         current_teacher_info=obj.getone('select id,name from teacher where id=%s',[current_teacher_id,])
    324         #老师-班级关系
    325         class_id_list=obj.getall('select class_id from teacher_class where teacher_id=%s',[current_teacher_id,])
    326 
    327         print('当前老师任教的班级id',class_id_list)
    328 
    329         print('当前老师信息',current_teacher_info)
    330         print('班级列表',class_list)
    331         temp = []
    332         for i in class_id_list:
    333             temp.append(i['class_id'])
    334         print(temp)
    335         return render(request, 'edit_teacher.html', {'class_list': class_list,'info':current_teacher_info,'class_id_list':temp})
    336     else:
    337         data_list=[]
    338         teacher_id=request.GET.get('nid')
    339         teacher_name=request.POST.get('name')
    340         class_id=request.POST.getlist('class_id')
    341         print('teacher id',teacher_id)
    342         print('teacher_name',teacher_name)
    343         print('classid',class_id)
    344         obj=sqlhelper.SqlHelper()
    345         obj.modify('update teacher set name=%s where id=%s',[teacher_name,teacher_id])
    346         obj.modify('delete from teacher_class where teacher_id=%s',[teacher_id,])
    347         for item in class_id:
    348             temp=(teacher_id,item,)
    349             data_list.append(temp)
    350         obj=sqlhelper.SqlHelper()
    351         obj.multiple_modify('insert into teacher_class(teacher_id,class_id)values (%s,%s)',data_list)
    352         obj.close()
    353 
    354         return redirect('/teacher/')
    355 
    356 def layout(request):
    357     tk=request.get_signed_cookie('ticket',salt='qst')
    358     print(request.COOKIES)
    359     if not tk:
    360         return redirect('/login/')
    361 
    362     else:
    363         return render(request,'layout.html')
    364 
    365 
    366 
    367 
    368 
    369 def login(request):
    370     if request.method=='GET':
    371         return render(request,'login.html')
    372     else:
    373         username=request.POST.get('username')
    374         password=request.POST.get('password')
    375         if username=='qst' and password=='123':
    376             obj=redirect('/layout/')
    377             obj.set_signed_cookie('ticket','666',salt='qst')#设置签名,加盐
    378             # obj.set_cookie('ticket','666',path='/layout/')#
    379             """
    380             max_age: 存在10s,expire:具体的时间如2019/7/22/22:20:35
    381             path:cookie的写入地址
    382             
    383             
    384             """
    385             return obj
    386 
    387         else:
    388             return render(request,'login.html')
    389 
    390 
    391 
    392 """
    393         使用装饰器,不用每个都加登录代码
    394          
    395          1.bootstrap响应式布局,@media()
    396          2.栅格;
    397          3.表格
    398          4.导航条
    399          5.路径导航
    400          6.fontawesome
    401          
    402          7.布局position:absolute 和relative
    403          fixed:固定
    404          
    405          
    406          
    407          8.overflow:超过某范围出现滚动条
    408          9.当鼠标移动到xx样式的标签上时,其子标签.g应用
    409          以下属性  
    410           .c1:hover .c2{
    411          }
    412          
    413          10.django母版
    414          <html>
    415           ...
    416           {%block s1%} {%endblock%}
    417           ...
    418           </html>
    419           
    420           
    421           子板:
    422           {%extends "layout.html"%}
    423           ...
    424           {%block s1%}<h1>fff</h1> {%endblock%}
    425           ...
    426           </html>
    427           
    428           
    429         10.
    430         cookie 保存在浏览器端的键值对 ,设置超时时间
    431         发送http请求时,在请求头中携带当前所有可访问的cookie
    432         以响应头响应
    433         
    434         11.
    435         obj.set_cookie(k1,v1,max_age)---request.COOKIES.get(..)
    436         obj.set_signed_cookie(k1,v1,max_age,salt='')---request.get_signed_cookie(...)  
    437         obj=Httpresponse()
    438         obj=render()
    439         obj.set_cookie(k1,v1,max_age)
    440         请求发给后台--后台回写cookie
    441   
    442 
    443           1.布局代码
    444           2.登录 cookie 装饰器
    445           3.布局页面html css
    446         
    447         
    448         """
    449 #day70
    450 """
    451     project
    452         -app01 自己创建的目录
    453             -views.py
    454         sqlhelper 封装sql操作
    455     
    456     django
    457     -路由
    458     -视图
    459     -模板
    460     -orm 实现数据库操作(类 表:对象-行,pymsql连接数据库)
    461      
    462      tornado
    463      -路由
    464     -视图
    465     -模板
    466     -自由 pymsql,sqlachemy
    467     
    468     
    469   
    470 """

    template部分

    1.添加班级

     1 <body background="2.jpg">
     2 
     3 <h1>添加班级</h1>
     4 
     5 
     6 <form method="post" action="/add/">
     7 
     8     <p>班级名称:<input type="text" name="class_name" /></p>
     9     <input type="submit" value="提交">{{ msg }}
    10 {#    <img src="2.jpg">#}
    11 </form>
    12 
    13 </body>

    2.添加老师

     1 <h1 style="color:orangered">添加教师信息</h1>
     2 
     3 <form method="post" >
     4 
     5     <p>教师姓名:<input type="text" name="name" /></p>
     6     <p>任教班级
     7        <select multiple name="class_id" >
     8            {% for item in class_list %}
     9                <option value="{{ item.id }}">{{ item.class_name }}</option>
    10            {% endfor %}
    11        </select>
    12     </p>
    13     <input type="submit" value="提交">
    14 
    15 </form>

    3.班级管理(模态对话框)-增删改查

      1 <h1 style="color: orangered">班级列表</h1>
      2 
      3 {#<link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/>#}
      4 {#<div>#}
      5 {#    <a href="/add/" >添加</a>#}
      6 {#    <a href="/student_manage/" >点击此处管理学生</a>#}
      7 {#    <a onclick="showModal();"  >点击使用对话框添加</a>#}
      8 {#    //<a onclick="show_modal_del()">点击使用对话框删除</a>#}
      9 {#</div>#}
     10 
     11 <div>
     12     <a href="/add/" >添加</a>
     13     <a href="/student_manage/" >点击此处管理学生</a>
     14     <a href="/teacher/" class="btn btn-danger">点击此处管理教师</a>
     15     <a id="add_class" >点击使用对话框添加</a>
     16 {#    //<a onclick="show_modal_del()">点击使用对话框删除</a>#}
     17 </div>
     18 
     19 <table class="table">
     20     <thead>
     21     <tr>
     22         <th>ID</th>
     23         <th>班级名称</th>
     24         <th>操作</th>
     25     </tr>
     26     </thead>
     27     <tbody>
     28     {% for row in class_list %}
     29         <tr>
     30             <td>{{  row.id }}</td>
     31             <td>{{ row.class_name }}</td>
     32             <td>
     33                 <a href="/edit/?id={{ row.id }}">编辑</a>
     34                 |
     35                 <a onclick="modal_edit(this);">点击使用对话框编辑</a>
     36                 |
     37                 <a href="/delete/?id={{ row.id }}" >删除</a>
     38                 |
     39                 <a onclick="modal_del(this)" >点击使用对话框删除</a>
     40 {#****************href="/delete/?id={{ row.id }}#}
     41             </td>
     42         </tr>
     43     {% endfor %}
     44     </tbody>
     45 </table>
     46 <style>
     47     .hide{
     48         display: none;
     49     }
     50     {#以下是遮罩层,shadow全占满 z-index越大,越外#}
     51     .shadow{
     52         position: fixed;
     53         left: 0;
     54         right: 0;
     55         top: 0;
     56         bottom: 0;
     57         background: #000;
     58         opacity: 0.4;
     59         z-index: 999;
     60     }
     61     .modal{
     62          position: fixed;
     63         left: 50%;
     64         top: 50%;
     65         height: 300px;
     66         width: 400px;
     67         z-index: 1000;
     68         background-color: azure;
     69         margin-top: -200px;
     70         margin-left: -200px;
     71     }
     72 </style>
     73 <div id="shadow" class="shadow hide"></div>
     74 
     75 <div>
     76 <div id="modal_del" class="modal hide">
     77     <p>确定删除嘛?</p>
     78     <p>
     79         <input type="text" id="del_id" name="id" style="display: none"/>
     80 
     81     </p>
     82     <p>
     83         <input type="button" value="我确定" onclick="del_ajaxsend()">
     84         <input type="button" value="点错了" onclick="hidemodal()">
     85 
     86     </p>
     87 </div>
     88 </div>
     89 
     90 <div id="btn_add_modal" class="modal hide" >
     91 
     92      <p>
     93       <input type="text" id="class_name"/>
     94   </p>
     95       <input type="button" value="提交" onclick="ajaxSend();"/>
     96     <input type="button" value="取消" id="btn_add_cancel" ;"/>
     97 
     98 </div>
     99 
    100 
    101 <div id="modal_edit" class="modal hide" >
    102      <h1>编辑对话框</h1>
    103      <p>
    104          <input type="text" id="edit_id" name="id" style="display: none"/>
    105       <input type="text" name="title" id="edit_title"/>
    106   </p>
    107       <input type="button" value="提交" onclick="edit_ajaxsend();"/>
    108     <input type="button" value="取消" onclick="hidemodal();"/>
    109 
    110 </div>
    111 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    112 
    113 <script>
    114     /*
    115     下面是新加的
    116 
    117      */
    118     $('#add_class').click(function () {
    119       $('#shadow,#btn_add_modal').removeClass('hide')
    120     });
    121     $('#btn_add_cancel').click(function () {
    122         location.reload()
    123 
    124     })
    125 
    126     function hidemodal() {
    127         document.getElementById('shadow').classList.add('hide');
    128         document.getElementById('modal').classList.add('hide');
    129         document.getElementById('modal_edit').classList.add('hide');
    130         document.getElementById('modal_del').classList.add('hide');
    131 
    132 
    133     }
    134 function showModal() {
    135      document.getElementById('shadow').classList.remove('hide');
    136      console.log('去掉了shadow')
    137      document.getElementById('modal').classList.remove('hide');
    138      console.log('去掉了')
    139 
    140 
    141  }
    142 function modal_edit(ths) {
    143          document.getElementById('modal_edit').classList.remove('hide');
    144      document.getElementById('shadow').classList.remove('hide');
    145 /*
    146 1.获取当前点击标签
    147 2.当前标签的父标签
    148 3.找父标签前面的两个,里面有id和class_name
    149 4.获取当前行班级名称,赋值到编辑对话框中
    150 
    151  */
    152   var row=$(ths).parent().prevAll();
    153     var content=$(row[0]).text();
    154     {#row[0].text() 班级名#}
    155     {#row[1]#}
    156     $('#edit_title').val(content);
    157     var contentid=$(row[1]).text();
    158     $('#edit_id').val(contentid)
    159 }
    160 function ajaxSend() {
    161     $.ajax({
    162         url: '/modal_add_class/',
    163         type: 'POST',
    164         data: {'class_name': $('#class_name').val()},
    165         success: function (data) {
    166             console.log(data);
    167             if (data == 'ok') {
    168                 alert('提交成功')
    169                  location.href = '/classes/';//使用location.href进行跳转
    170             } else {
    171                alert('班级不能为空空哦!');
    172             }
    173         }
    174     })
    175 }
    176 function edit_ajaxsend() {
    177         var nid=$('#edit_id').val();
    178     var content=$('#edit_title').val();
    179     {#console.log(nid,content)#}
    180     $.ajax(
    181         {
    182             url:'/modal_edit_class/',
    183             type:'post',
    184             data:{'nid':nid,'content':content},
    185             success:function (arg) {
    186                 arg=JSON.parse(arg);
    187                 if(arg.status)
    188                 {
    189                     console.log(arg);
    190                     location.reload();
    191                 }
    192                 else{
    193                     alert(arg.message)
    194 
    195                 }
    196             }
    197         }
    198     )
    199     
    200 }
    201 function modal_del(ths){
    202          document.getElementById('modal_del').classList.remove('hide');
    203      document.getElementById('shadow').classList.remove('hide');
    204 /*
    205 1.获取当前点击标签
    206 2.当前标签的父标签
    207 3.找父标签前面的两个,里面有id和class_name
    208 4.获取当前行班级名称,赋值到编辑对话框中
    209 
    210  */
    211   var row=$(ths).parent().prevAll();
    212     {#var content=$(row[0]).text();#}
    213     {#row[0].text() 班级名#}
    214     {#row[1]#}
    215     {#$('#del_title').val(content);#}
    216     var contentid=$(row[1]).text();
    217     $('#del_id').val(contentid)
    218 
    219 }
    220 
    221 function del_ajaxsend() {
    222          var nid=$('#del_id').val();
    223     //var content=$('#edit_title').val();
    224     {#console.log(nid,content)#}
    225     $.ajax(
    226         {
    227             url:'/modal_del_class/',
    228             type:'post',
    229             data:{'nid':nid,},
    230             success:function (arg) {
    231                 arg=JSON.parse(arg);
    232                 if(arg.status)
    233                 {
    234                     console.log(arg);
    235                     location.reload();
    236                 }
    237                 else{
    238                     alert(arg.message)
    239 
    240                 }
    241             }
    242         }
    243     )
    244 
    245 }
    246 
    247 
    248 </script>

    4.编辑班级(新url的方式)

     1 <body>
     2 {{ result.id }}
     3 {{ result.class_name }}
     4 
     5 <h1>编辑班级</h1>
     6 
     7 <form method="post" action="/edit/?id={{ result.id }}">
     8 
     9     <p>班级名称:<input type="text" name="class_name" value="{{ result.class_name }}" /></p>
    10     <input type="submit" value="提交">
    11 
    12 </form>
    13 </body>

    5.编辑老师(新url)

     1 <h1 style="color:orangered">修改教师信息</h1>
     2 
     3 <form method="POST" action="/edit_teacher/?nid={{ info.id }}">
     4 
     5     <p>教师姓名:<input type="text" name="name" value="{{ info.name }}"/></p>
     6     <p>任教班级
     7        <select multiple name="class_id"  >
     8            {% for item in class_list %}
     9                {% if item.id in class_id_list %}
    10                <option selected value="{{ item.id}}">{{ item.class_name }}</option>
    11                    {% else %}
    12                    <option value="{{ item.id}}">{{ item.class_name }}</option>
    13 
    14                {% endif %}
    15            {% endfor %}
    16        </select>
    17     </p>
    18     <input type="submit" value="提交">
    19 
    20 </form>

    6.后台管理

      1 <head>
      2     <meta charset="UTF-8">
      3     <title></title>
      4     <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css" />
      5     <link rel="stylesheet" href="/static/plugin/font-awesome-4.7.0/css/font-awesome.css" />
      6     <link rel="stylesheet" href="/static/css/commons.css" />
      7     {% block css %}{% endblock %}
      8 </head>
      9 <body>
     10     <div class="pg-header">
     11         <div style="text-align: center" class="logo left">学员后台管理</div>
     12         <div class="avatar right" style="position: relative">
     13             <img style=" 40px ;height: 40px" src="/static/1.jpg">
     14             <div class="user-info">
     15                 <a>个人资料</a>
     16                 <a>注销</a>
     17             </div>
     18         </div>
     19         <div class="rmenus right">
     20             <a><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息</a>
     21             <a><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a>
     22         </div>
     23     </div>
     24     <div class="pg-body">
     25         <div class="menus">
     26             <a style="text-align: center" href="/classes/"> <i class="fa fa-futbol-o" aria-hidden="true"></i> 班级管理</a>
     27             <a style="text-align: center" href="/student_manage/"><i class="fa fa-address-book" aria-hidden="true"></i> 学生管理</a>
     28             <a style="text-align: center" href="/teacher/"><i class=' fa fa-battery-full'></i> 老师管理</a>
     29         </div>
     30         <div class="content">
     31             <ol class="breadcrumb">
     32               <li><a href="#">首页</a></li>
     33               <li><a href="#">班级管理</a></li>
     34               <li class="active">添加班级</li>
     35             </ol>
     36             {% block xx  %}{% endblock %}
     37 
     38         </div>
     39     </div>
     40     {% block js %}{% endblock %}
     41 <style>
     42 body{
     43             margin: 0;
     44         }
     45         .left{
     46             float: left;
     47         }
     48         .right{
     49             float: right;
     50         }
     51         .hide{
     52             display: none;
     53         }
     54         .pg-header{
     55             height: 48px;
     56             min-width: 1190px;
     57             background-color: #204d74;
     58             line-height: 48px;
     59         }
     60         .pg-header .logo{
     61             color: white;
     62             font-size: 18px;
     63             width: 200px;
     64 
     65             border-right: 1px solid #8a6d3b;
     66         }
     67         .pg-header .rmenus a{
     68             display: inline-block;
     69             padding: 0 15px;
     70             color: white;
     71         }
     72         .pg-header .rmenus a:hover{
     73             background-color: #269abc;
     74         }
     75         .pg-header .avatar{
     76             padding:4 20px;
     77         }
     78         .pg-header .avatar img{
     79             border-radius: 50%;
     80         }
     81         .pg-header .avatar .user-info{
     82             display: none;
     83             background-color: white;
     84             border: 1px solid #dddddd;
     85             position: absolute;width: 100px;top: 48px;right: 20px;color: white;z-index: 100;
     86              text-align: center;
     87         }
     88         .pg-header .avatar:hover .user-info{
     89             display: block;
     90         }
     91         .pg-header .avatar .user-info a{
     92             display: block;
     93         }
     94         .menus{
     95             width: 200px;
     96             position: absolute;
     97             left: 0;
     98             bottom: 0;
     99             top: 48px;
    100             border-right: 1px solid #dddddd;
    101             background-color: #dddddd;
    102         }
    103         .content{
    104             position: absolute;
    105             left: 200px;
    106             right: 0;
    107             top: 48px;
    108             bottom: 0;
    109             min-width: 990px;
    110             overflow: scroll;
    111             z-index: 99;
    112         }
    113         .pg-body .menus a{
    114             display: block;
    115             padding: 10px 5px;
    116             border-bottom: 1px solid #ffffff;
    117         }
    118  </style>

    7.登录界面

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 
     9 <form method="post" action="/login/">
    10     <input type="text" name="username">
    11     <input type="password" name="password" >
    12     <input type="submit" value="提交">
    13 
    14 
    15 
    16 </form>
    17 
    18 
    19 </body>
    20 </html>

    8.添加学生(新url)

     1 <body background="2.jpg">
     2 
     3 <h1 style="color:orangered">添加学生信息</h1>
     4 
     5 <form method="post" action="/student_add/">
     6 {#如果不写action,就提交到当前url,在这里写不写都一样#}
     7 
     8     <p>学生姓名:<input type="text" name="name" /></p>
     9 {#    <p>学生姓名:<input type="text" name="name"></p>#}
    10 {#    这里用一个下拉框,只限定在这几个班级中#}
    11     <p>学生班级
    12        <select name="class_id">
    13 {#       以id为名接收数据#}
    14            {% for row in class_list %}
    15 {#  就好像1班是文强班,22班是奥赛班,提交到后台,直接提交班级号,而不提交班级名称,这是由数据库的结构决定的#}
    16                <option value="{{ row.id }}">{{ row.class_name }}</option>
    17 
    18            {% endfor %}
    19        </select>
    20     </p>
    21     <input type="submit" value="提交">
    22 
    23 </form>
    24 </body>

    9.编辑学生

     1 <body>
     2 <h1>编辑学生信息</h1>
     3 
     4 <form method="post" action="/student_edit/?id={{current_student_info.id }}"  >
     5 
     6 
     7     <p>学生姓名:<input type="text" name="student_name" value="{{ current_student_info.name }}" /></p>
     8     <p>学生班级
     9     <select name="classid">
    10         {% for row in class_list %}
    11             {% if row.id == current_student_info.classid %}
    12 {#                返回的班级的号码==返回的学生信息中的班级号码,则选中其中的那一条,在框中显示#}
    13 
    14 
    15             <option selected value="{{ row.id }}">{{ row.class_name }}</option>
    16                 {% else %}
    17                 <option  value="{{ row.id }}">{{ row.class_name }}</option>
    18 
    19             {% endif %}
    20         {% endfor %}
    21     </select>
    22 
    23     </p>
    24     <input type="submit" value="提交">
    25 
    26 </form>
    27 </body>

    10.学生管理(模态对话框)

      1 <h1 style="color: orangered">学生列表</h1>
      2 
      3 <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/>
      4 
      5 <div>
      6     <a href="/student_add/" class="btn btn-info">添加学生信息</a>
      7 {#    //基于jQuery绑定#}
      8     <a id="add_modal" class=" btn btn-primary">点击使用对话框添加学生</a>
      9 </div>
     10 <table class="table-striped table-bordered table table-hover">
     11     <thead>
     12     <tr>
     13         <th>ID</th>
     14         <th>学生姓名</th>
     15         <th>所属班级</th>
     16         <th>操作</th>
     17     </tr>
     18     </thead>
     19     <tbody>
     20     {% for row in student_list %}
     21         <tr>
     22             <td>{{ row.id }}</td>
     23             <td>{{ row.name }}</td>
     24             <td class_id="{{ row.classid }}">{{ row.class_name }}</td>
     25             <td>
     26                 <a class="modal_student_edit glyphicon glyphicon-pencil" ></a>
     27                 |
     28                 <a class="modal_del glyphicon glyphicon-trash"></a>
     29 
     30             </td>
     31         </tr>
     32     {% endfor %}
     33     </tbody>
     34 </table>
     35 
     36 <style>
     37     .hide{
     38         display:none;
     39     }
     40 
     41     .shadow{
     42 
     43         position:fixed;
     44         left:0;
     45         right: 0;
     46         bottom: 0;
     47         top: 0;
     48         background-color: black;
     49         opacity: 0.5;
     50         z-index: 999;
     51 
     52     }
     53 
     54 
     55     .add_modal{
     56         position:fixed;
     57         left:50%;
     58         top: 50%;
     59         width:300px;
     60         height: 400px;
     61         background-color:azure;
     62         z-index: 1000;
     63         margin-left:-200px;
     64         margin-top: -200px;
     65 
     66 
     67     }
     68 </style>
     69 
     70 <div id="show_shadow" class="shadow hide " >
     71 
     72 
     73 
     74 </div>
     75 <div id="show_del" class="add_modal hide">
     76     <input id="btn_del" type="button" value="确定删除">
     77 {#    <input id="">#}
     78     <input id="btn_del_cancel" type="button" value="点错了">
     79 
     80 
     81 </div>
     82 <div id="show_edit" class="add_modal hide" >
     83     <p>    姓名:<input id="edit_name" type="text" name="name" placeholder="请输入姓名">
     84         <input id="edit_student_id" type="text" hidden value="0">
     85 </p>
     86     <p>
     87         班级:<select id="edit_class_id" name="classid">
     88         {% for row in class_list %}
     89             <option id="edit_class" value="{{ row.id }}">
     90             {{ row.class_name }}
     91             </option>
     92 
     93 
     94         {% endfor %}
     95     </select>
     96     </p>
     97 <p><input type="button" id="submit_edit" value="提交"></p>
     98 <p><input type="button" id="cancel" value="我点错了"></p>
     99 </div>
    100 
    101 <div id="show_add" class="add_modal hide" >
    102     <p>    姓名:<input id="add_name" type="text" name="name" placeholder="请输入姓名">
    103 </p>
    104     <p>
    105         班级:<select id="add_class_id" name="classid">
    106         {% for row in class_list %}
    107             <option value="{{ row.id }}">
    108             {{ row.class_name }}
    109             </option>
    110 
    111 
    112         {% endfor %}
    113 
    114 
    115     </select>
    116     </p>
    117 <input id="submitinfo" type="button" value="确认添加">
    118 <input id="cancel_1" type="button" value="我点错了">
    119 
    120 
    121 </div>
    122 
    123 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    124 
    125 <script>
    126 {#页面框架加载完成,自动执行#}
    127 $(function () {
    128 
    129     $('.modal_del').click(function () {
    130 
    131         $('#show_shadow,#show_del').removeClass('hide');
    132         var tds=$(this).parent().prevAll();
    133         var student_id=$(tds[2]).text();
    134         var student_name=$(tds[1]).text();
    135         var class_id=$(tds[0]).attr('class_id');
    136         console.log(student_id,student_name,class_id);
    137          $('#edit_name').val(student_name);
    138         $('#edit_class_id').val(class_id);
    139         $('#edit_student_id').val(student_id)
    140 
    141 
    142     });
    143      $('#btn_del_cancel').click(function () {
    144          location.reload()
    145      });
    146      $('#btn_del').click(function () {
    147         {# var tds=$(this).parent().prevAll();#}
    148         {#var student_id=$(tds[2]).text();#}
    149         {#var student_name=$(tds[1]).text();#}
    150         {#var class_id=$(tds[0]).attr('class_id');#}
    151         {#console.log(student_id,student_name,class_id);#}
    152 
    153          $.ajax({
    154 
    155              url:'/modal_del_student/',
    156              type:'POST',
    157              data: {
    158                    'student_id': $('#edit_student_id').val(),
    159                    'class_id': $('#edit_class_id').val(),
    160                    'student_name': $('#edit_name').val(),
    161                },
    162              success:function () {
    163                  alert('已删除');
    164                  location.reload();
    165              }
    166 
    167 
    168          })
    169 
    170 
    171 
    172 
    173      });
    174 
    175     $('.modal_student_edit').click(function () {
    176         $('#show_edit,#show_shadow').removeClass('hide');
    177         var tds=$(this).parent().prevAll();
    178         var student_id=$(tds[2]).text();
    179         var student_name=$(tds[1]).text();
    180         var class_id=$(tds[0]).attr('class_id');
    181         console.log(student_id,student_name,class_id);
    182         $('#edit_name').val(student_name);
    183         $('#edit_class_id').val(class_id);
    184         $('#edit_student_id').val(student_id)
    185     });
    186 
    187     $('#submit_edit').click(function () {
    188        $.ajax(
    189 
    190            {
    191                url:'/modal_edit_student/',
    192                type:'POST',
    193                data: {
    194                    'student_id': $('#edit_student_id').val(),
    195                    'class_id': $('#edit_class_id').val(),
    196                    'student_name': $('#edit_name').val(),
    197                },
    198                success:function () {
    199                    alert('ok');
    200                    location.reload()
    201 
    202                }
    203 
    204 
    205            }
    206 
    207 
    208 
    209 
    210        )
    211     });
    212     $('#cancel').click(function () {
    213         location.reload()
    214         
    215     });
    216      $('#cancel_1').click(function () {
    217         location.reload()
    218 
    219     });
    220 
    221     $('#add_modal').click(function () {
    222         $('#show_add,#show_shadow').removeClass('hide');
    223         {#return false阻止默认事件发生#}
    224 
    225     });
    226 
    227     $('#submitinfo').click(function () {
    228         $.ajax({
    229             url:'/modal_add_student/',
    230             type:'POST',
    231             data:{name:$('#add_name').val(),class_id:$('#add_class_id').val()},
    232             success:function (arg) {
    233 
    234                 {#arg=JSON.parse(arg);#}
    235                 if(arg=='ok'){
    236                     location.reload()
    237                 }else {alert('名字没写')}
    238 
    239 
    240             }
    241         })
    242 
    243 
    244         
    245     })
    246 
    247 
    248 
    249 })
    250 
    251 
    252 </script>

    11.教师管理(模态对话框)

      1 <h1 style="color: orangered">任课教师一览表</h1>
      2 <a class="btn btn-danger" href="/add_teacher/">添加教师</a>
      3 
      4 
      5 <link rel="stylesheet" href="/static/plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/>
      6 
      7 <nav class="navbar navbar-default">
      8   <div class="container-fluid">
      9     <!-- Brand and toggle get grouped for better mobile display -->
     10     <div class="navbar-header">
     11       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
     12         <span class="sr-only">Toggle navigation</span>
     13         <span class="icon-bar"></span>
     14         <span class="icon-bar"></span>
     15         <span class="icon-bar"></span>
     16       </button>
     17       <a class="navbar-brand" href="#">Brand</a>
     18     </div>
     19 
     20     <!-- Collect the nav links, forms, and other content for toggling -->
     21     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     22       <ul class="nav navbar-nav">
     23         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
     24         <li><a href="#">Link</a></li>
     25         <li class="dropdown">
     26           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
     27           <ul class="dropdown-menu">
     28             <li><a href="#">Action</a></li>
     29             <li><a href="#">Another action</a></li>
     30             <li><a href="#">Something else here</a></li>
     31             <li role="separator" class="divider"></li>
     32             <li><a href="#">Separated link</a></li>
     33             <li role="separator" class="divider"></li>
     34             <li><a href="#">One more separated link</a></li>
     35           </ul>
     36         </li>
     37       </ul>
     38       <form class="navbar-form navbar-left">
     39         <div class="form-group">
     40           <input type="text" class="form-control" placeholder="Search">
     41         </div>
     42         <button type="submit" class="btn btn-default">Submit</button>
     43       </form>
     44       <ul class="nav navbar-nav navbar-right">
     45         <li><a href="#">Link</a></li>
     46         <li class="dropdown">
     47           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
     48           <ul class="dropdown-menu">
     49             <li><a href="#">Action</a></li>
     50             <li><a href="#">Another action</a></li>
     51             <li><a href="#">Something else here</a></li>
     52             <li role="separator" class="divider"></li>
     53             <li><a href="#">Separated link</a></li>
     54           </ul>
     55         </li>
     56       </ul>
     57     </div><!-- /.navbar-collapse -->
     58   </div><!-- /.container-fluid -->
     59 </nav>
     60 <table class="table table-hover table-bordered table-striped">
     61     <thead>
     62     <tr>
     63         <th>ID</th>
     64         <th>教师姓名</th>
     65         <th>任教班级</th>
     66         <th>操作</th>
     67     </tr>
     68     </thead>
     69     <tbody>
     70     {% for row in teacher_list %}
     71         <tr>
     72             <td>{{  row.tid }}</td>
     73             <td>{{ row.name }}</td>
     74         <td>
     75             {% for item in row.titles %}
     76                 <span>{{item }}</span>
     77             {% endfor %}
     78         </td>
     79             <td>
     80                 <a class="glyphicon glyphicon-pencil" href="/edit_teacher/?nid={{ row.tid }}">编辑</a>
     81                 |
     82                 <a class="glyphicon glyphicon-trash">删除</a>
     83             </td>
     84         </tr>
     85     {% endfor %}
     86     </tbody>
     87 </table>
     88 
     89 <style>
     90     .hide{
     91         display: none;
     92     }
     93     {#以下是遮罩层,shadow全占满 z-index越大,越外#}
     94     .shadow{
     95         position: fixed;
     96         left: 0;
     97         right: 0;
     98         top: 0;
     99         bottom: 0;
    100         background: #000;
    101         opacity: 0.4;
    102         z-index: 999;
    103     }
    104     .modal{
    105          position: fixed;
    106         left: 50%;
    107         top: 50%;
    108         height: 300px;
    109         width: 400px;
    110         z-index: 1000;
    111         background-color: azure;
    112         margin-top: -200px;
    113         margin-left: -200px;
    114     }
    115 </style>
    116 <div id="shadow" class="shadow hide"></div>
    117 
    118 <div>
    119 <div id="modal_del" class="modal hide">
    120     <p>确定删除嘛?</p>
    121     <p>
    122         <input type="text" id="del_id" name="id" style="display: none"/>
    123 
    124     </p>
    125     <p>
    126         <input type="button" value="我确定" onclick="del_ajaxsend()">
    127         <input type="button" value="点错了" onclick="hidemodal()">
    128 
    129     </p>
    130 </div>
    131 </div>
    132 
    133 <div id="btn_add_modal" class="modal hide" >
    134 
    135      <p>
    136       <input type="text" id="class_name"/>
    137   </p>
    138       <input type="button" value="提交" onclick="ajaxSend();"/>
    139     <input type="button" value="取消" id="btn_add_cancel" />
    140 
    141 </div>
    142 
    143 
    144 <div id="modal_edit" class="modal hide" >
    145      <h1>编辑对话框</h1>
    146      <p>
    147          <input type="text" id="edit_id" name="id" style="display: none"/>
    148       <input type="text" name="title" id="edit_title"/>
    149   </p>
    150       <input type="button" value="提交" onclick="edit_ajaxsend();"/>
    151     <input type="button" value="取消" onclick="hidemodal();"/>
    152 
    153 </div>
    154 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    155 
    156 <script>
    157     /*
    158     下面是新加的
    159 
    160      */
    161     $('#add_class').click(function () {
    162       $('#shadow,#btn_add_modal').removeClass('hide')
    163     });
    164     $('#btn_add_cancel').click(function () {
    165         location.reload()
    166 
    167     })
    168 
    169     function hidemodal() {
    170         document.getElementById('shadow').classList.add('hide');
    171         document.getElementById('modal').classList.add('hide');
    172         document.getElementById('modal_edit').classList.add('hide');
    173         document.getElementById('modal_del').classList.add('hide');
    174 
    175 
    176     }
    177 function showModal() {
    178      document.getElementById('shadow').classList.remove('hide');
    179      console.log('去掉了shadow')
    180      document.getElementById('modal').classList.remove('hide');
    181      console.log('去掉了')
    182 
    183 
    184  }
    185 function modal_edit(ths) {
    186          document.getElementById('modal_edit').classList.remove('hide');
    187      document.getElementById('shadow').classList.remove('hide');
    188 /*
    189 1.获取当前点击标签
    190 2.当前标签的父标签
    191 3.找父标签前面的两个,里面有id和class_name
    192 4.获取当前行班级名称,赋值到编辑对话框中
    193 
    194  */
    195   var row=$(ths).parent().prevAll();
    196     var content=$(row[0]).text();
    197     {#row[0].text() 班级名#}
    198     {#row[1]#}
    199     $('#edit_title').val(content);
    200     var contentid=$(row[1]).text();
    201     $('#edit_id').val(contentid)
    202 }
    203 function ajaxSend() {
    204     $.ajax({
    205         url: '/modal_add_class/',
    206         type: 'POST',
    207         data: {'class_name': $('#class_name').val()},
    208         success: function (data) {
    209             console.log(data);
    210             if (data == 'ok') {
    211                 alert('提交成功')
    212                  location.href = '/classes/';//使用location.href进行跳转
    213             } else {
    214                alert('班级不能为空空哦!');
    215             }
    216         }
    217     })
    218 }
    219 function edit_ajaxsend() {
    220         var nid=$('#edit_id').val();
    221     var content=$('#edit_title').val();
    222     {#console.log(nid,content)#}
    223     $.ajax(
    224         {
    225             url:'/modal_edit_class/',
    226             type:'post',
    227             data:{'nid':nid,'content':content},
    228             success:function (arg) {
    229                 arg=JSON.parse(arg);
    230                 if(arg.status)
    231                 {
    232                     console.log(arg);
    233                     location.reload();
    234                 }
    235                 else{
    236                     alert(arg.message)
    237 
    238                 }
    239             }
    240         }
    241     )
    242 
    243 }
    244 function modal_del(ths){
    245          document.getElementById('modal_del').classList.remove('hide');
    246      document.getElementById('shadow').classList.remove('hide');
    247 /*
    248 1.获取当前点击标签
    249 2.当前标签的父标签
    250 3.找父标签前面的两个,里面有id和class_name
    251 4.获取当前行班级名称,赋值到编辑对话框中
    252 
    253  */
    254   var row=$(ths).parent().prevAll();
    255     {#var content=$(row[0]).text();#}
    256     {#row[0].text() 班级名#}
    257     {#row[1]#}
    258     {#$('#del_title').val(content);#}
    259     var contentid=$(row[1]).text();
    260     $('#del_id').val(contentid)
    261 
    262 }
    263 
    264 function del_ajaxsend() {
    265          var nid=$('#del_id').val();
    266     //var content=$('#edit_title').val();
    267     {#console.log(nid,content)#}
    268     $.ajax(
    269         {
    270             url:'/modal_del_class/',
    271             type:'post',
    272             data:{'nid':nid,},
    273             success:function (arg) {
    274                 arg=JSON.parse(arg);
    275                 if(arg.status)
    276                 {
    277                     console.log(arg);
    278                     location.reload();
    279                 }
    280                 else{
    281                     alert(arg.message)
    282 
    283                 }
    284             }
    285         }
    286     )
    287 
    288 }
    289 
    290 
    291 </script>
  • 相关阅读:
    BGP Reflector(反射器)配置实例
    BGP Confederation配置实例
    OSPF Stub配置实例
    OSPF虚链路配置实例
    OSPF多区域配置实例
    数据库用varchar存储时间时会出现时间差解决办法
    判断是否为微信内置浏览器
    PHP中获取文件扩展名
    PHP中$_SERVER的详细参数与说明
    php查询字符串是否存在 strpos
  • 原文地址:https://www.cnblogs.com/clement-chiu/p/11282123.html
Copyright © 2011-2022 走看看