Django框架 练习:学员管理系统-Ajax版

最新推荐文章于 2020-12-01 07:58:55 发布
最新推荐文章于 2020-12-01 07:58:55 发布
阅读量153 收藏
点赞数
文章标签： django ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46131409/article/details/106988920
版权 
#settings.py:

STATICFILES_DIRS=(os.path.join(BASE_DIR,  'static'),)

TEMPLATES = [
    {
        'BACKEND': '...',
        'DIRS': [os.path.join(BASE_DIR,  'templates'),],
        'APP_DIRS': ...,
        'OPTIONS': {
            'context_processors': [
                ...
            ],
        },
    },
]

#urls.py:

from django.contrib import admin
from django.urls import path
from app01.views import classes,students,teachers
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('classes.html', classes.get_classes),
    path('add_classes.html', classes.add_classes),
    path('del_classes.html', classes.del_classes),
    path('edit_classes.html', classes.edit_classes),

    path('students.html', students.get_students),
    path('add_students.html', students.add_students),
    path('del_students.html', students.del_students),
    path('edit_students.html', students.edit_students),

    path('set_teachers.html', classes.set_teachers),

    path('ajax1.html', ajax.ajax1),
    path('ajax2.html', ajax.ajax2),
    path('ajax4.html', ajax.ajax4),
]

#app01/models.py:
from django.db import models

class Classes(models.Model):
    title=models.CharField(max_length=32)
    a=models.ManyToManyField('Teachers')

class Teachers(models.Model):
    name=models.CharField(max_length=32)

class Students(models.Model):
    username=models.CharField(max_length=32)
    age=models.IntegerField()
    gender=models.BooleanField()
    cs=models.ForeignKey(Classes,on_delete=models.CASCADE)

#app01/views/classes.py:

from django.shortcuts import render,redirect
from app01 import models

def get_classes(request):
    cls_list = models.Classes.objects.all()
    return render(request,'get_classes.html',{'cls_list':cls_list})
 
def add_classes(request):
    if request.method=='GET':
        return render(request,'add_classes.html')
    elif request.method=='POST':
        title=request.POST.get('title','')
        models.Classes.objects.create(title=title)
        return redirect('/classes.html')
 
def del_classes(request):
    nid=request.GET.get('nid','')
    models.Classes.objects.filter(id=nid).delete()
    return redirect('/classes.html')
 
def edit_classes(request):
    if request.method=="GET":
        nid = request.GET.get('nid', '')
        obj=models.Classes.objects.get(id=nid)
        return render(request,'edit_classes.html',{'obj':obj})
    elif request.method=="POST":
        nid=request.POST.get('nid','')
        title=request.POST.get('xxoo','')
        models.Classes.objects.filter(id=nid).update(title=title)
        return redirect('/classes.html')

def set_teachers(request):
    if request.method=='GET':
        nid=request.GET.get('nid','')
        cls_obj=models.Classes.objects.get(id=nid)
        cls_teacher_list=cls_obj.a.all()
        all_teacher_list=models.Teachers.objects.all()
        return render(request,'set_teachers.html',{
            'cls_teacher_list':cls_teacher_list,
            'all_teacher_list':all_teacher_list,
            'nid':nid,
        })
    elif request.method=='POST':
        nid = request.POST.get('nid', '')
        ids_str=request.POST.getlist('teacher_id','')
        ids_int=[]
        for i in ids_str:
            i=int(i)
            ids_int.append(i)
        obj=models.Classes.objects.get(id=nid)
        obj.a.set(ids_int)
        return redirect('/classes.html')

<!--template/get_classes.html:-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th> <th>名称</th> <th>任课老师</th> <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for row in cls_list %}
            <tr>
                <td>{{ row.id }}</td>
                <td>{{ row.title }}</td>
                <td>
                    {% for item in row.a.all %}
                        <span>{{ item.name }}</span>
                        {% endfor %}
                </td>
                <td><a href="/del_classes.html?nid={{ row.id }}">删除</a>
                    |<a href="/edit_classes.html?nid={{ row.id }}">编辑</a>
                    |<a href="/set_teachers.html?nid={{ row.id }}">分配老师</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div><a href="/add_classes.html">添加</a> </div>
</body>
</html>

<!--template/add_classes.html:-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/add_classes.html" method="post">
    {% csrf_token %}
    <input type="text" name="title">
    <input type="submit" value="提交">
</form>
</body>
</html>

<!--template/edit_classes.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="/edit_classes.html">
    {% csrf_token %}
    <input type="hidden" name="nid" value="{{ obj.id }}">
    <input type="text" name="xxoo" value="{{ obj.title }}">
    <input type="submit" value="提交">
</form>
</body>
</html>

#app01/views/students.py

from django.shortcuts import render,redirect
from app01 import models

def get_students(request):
    stu_list=models.Students.objects.all()
    return render(request,'get_students.html',{'stu_list':stu_list})

def add_students(request):
    if request.method=='GET':
        cs_list=models.Classes.objects.all()
        return render(request,'add_students.html',{'cs_list':cs_list})
    elif request.method=='POST':
        u=request.POST.get('username','')
        a=request.POST.get('age','')
        g=request.POST.get('gender','')
        c=request.POST.get('cs','')
        models.Students.objects.create(
            username=u,
            age=a,
            gender=g,
            cs_id=c
        )
        return redirect('/students.html')

def del_students(request):
    nid = request.GET.get('nid', '')
    models.Students.objects.filter(id=nid).delete()
    return redirect('/students.html')

def edit_students(request):
    if request.method=="GET":
        nid=request.GET.get('nid', '')
        obj=models.Students.objects.get(id=nid)
        cs_list=models.Classes.objects.all()
        return render(request,'edit_students.html',{'obj':obj,'cs_list':cs_list})
    elif request.method=="POST":
        nid=request.POST.get('nid','')
        u=request.POST.get('username', '')
        a=request.POST.get('age', '')
        g=request.POST.get('gender', '')
        c=request.POST.get('cs', '')
        models.Students.objects.filter(id=nid).update(
            username=u,
            age=a,
            gender=g,
            cs_id=c)
        return redirect('/students.html')

<!--template/get_students.html:-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for row in stu_list %}
            <tr nid="{{ row.id }}">
                <td>{{ row.id }}</td>
                <td>{{ row.username }}</td>
                <td>{{ row.age }}</td>
                <td>{{ row.gender }}</td>
                <td>{{ row.cs.title }}</td>
                <td><a href="/del_students.html?nid={{ row.id }}">删除</a>
                    |<a onclick="removeStudent(this);" href="#">Ajax删除</a>
                    |<a href="/edit_students.html?nid={{ row.id }}">编辑</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div><a href="/add_students.html">添加</a> </div>
</body>
<script src="/static/jquery-3.3.1.js"></script>
<script>
    function removeStudent(ths) {
        var nid=$(ths).parent().parent().attr('nid');
        $.ajax({
            url:'/ajax4.html',
            type:'GET',
            data:{nid:nid},
            success:function (arg) {
                if (arg=='成功'){
                    window.location.reload();
                } else {
                    alert(arg);
                }
            }
        })
    }
</script>
</html>

<!--template/add_students.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/add_students.html">
    {% csrf_token %}
    <p><input type="text" name="username" placeholder="用户名"></p>
    <p><input type="text" name="age" placeholder="年龄"></p>
    <p>
        男<input type="radio" name="gender" value="1">
        女<input type="radio" name="gender" value="0">
    </p>
    <p>
        <select name="cs">
            {% for row in cs_list %}
            <option value="{{ row.id }}">{{ row.title }}</option>
            {% endfor %}
        </select>
    </p>
    <p><input type="submit" value="提交"></p>
</form>
</body>
</html>

<!--template/edit_students.html:-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>编辑用户</h1>
<form method="post" action="/edit_students.html">
    {% csrf_token %}
    <input type="hidden"  name="nid" value="{{ obj.id }}">
    <p><input type="text" name="username" placeholder="用户名"></p>
    <p><input type="text" name="age" placeholder="年龄"></p>
    <p>
        男<input type="radio" name="gender" value="1">
        女<input type="radio" name="gender" value="0">
    </p>
    <p>
        <select name="cs">
            {% for row in cs_list %}
            <option value="{{ row.id }}">{{ row.title }}</option>
            {% endfor %}
        </select>
    </p>
    <p><input type="submit" value="提交"></p>
</form>
</body>
</html>

<!--template/set_teachers.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/set_teachers.html" method="post">
    <input type="hidden" name="nid" value="{{ nid }}">
    {% csrf_token %}
    <select multiple size="10" name="teacher_id">
        {% for item in all_teacher_list %}
            {% if item in cls_teacher_list %}
            <option value="{{ item.id }}" selected="selected">{{ item.name }}</option>
            {% else %}
            <option value="{{ item.id }}">{{ item.name }}</option>
            {% endif %}
        {% endfor %}
    </select>
    <input type="submit" value="提交">
</form>
</body>
</html>

#app01/views/ajax.py:

from django.shortcuts import render,redirect,HttpResponse

def ajax1(request):
    return render(request,'ajax1.html')

def ajax2(request):
    u=request.GET.get('username')
    p=request.GET.get('password')
    return HttpResponse('我愿意')

def ajax4(request):
    nid=request.GET.get('nid')
    msg='成功'
    try:
        models.Students.objects.get(id=nid).delete()
    except Exception as e:
        msg=str(e)
    return HttpResponse(msg)

<!--template/ajax1.html:-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 15px;
            background-color: coral;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    <input placeholder="用户名" type="text" id="username">
    <input placeholder="密码" type="password" id="password">
    <div class="btn" onclick="submitForm();">提交</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script>
    function submitForm() {
        var u=$('#username').val();
        var p=$('#password').val();
        $.ajax({
            url:'ajax2.html',
            type:'GET',
            data:{username:u,password:p},
            success:function (arg) {
                //回调函数 arg是服务器返回的字符串
                console.log(arg)
            }
        })
    }
</script>
</body>
</html>

总结2种方式:
1.刷新页面:
  增加/编辑记录:推荐刷新页面
    优点:独立的页面;代码量相对较少
    适用于:字段多的情况
2.对话框+Ajax:
  增加/编辑记录:除非需要考虑性能,才使用Ajax
    优点:对Server压力小;局部刷新;异步请求,不妨碍其他操作
    适用于:字段少的情况
    注意:考虑是否在当前页还是在首/尾页添加记录;自定义属性的添加
  删除记录:永远使用Ajax
EdVzAs
关注
专栏目录
python django开发实战pdf_Django企业开发实战高效Python Web框架指南pdf免费版完整版...
weixin_39600616的博客
12-12 3697
开发工程师the5fire教你学会如何使用流行的Python，Web框架Django介绍Python Web框架Django在企业中的应用的书籍，从零开发到部署完整案例，Django企业开发实战高效Python Web框架指南电子版是开发工程师the5fire多年开发经验总结，以博客系统为原型，教你以真实的视角搭建自己的生产环境。Django企业开发实战高效Python Web框架指南电子版预览内...
django学生信息管理系统
12-03
django学生信息管理系统，功能完整，完整。
Django 和 Ajax 简介
weixin_34087301的博客
07-26 102
在Django里面，目前我们都是通过前端页面的form提交GET或者POST请求到后台，后台处理了业务函数之后，把渲染之后的字符串结果发回给前端。这样的结果是每次页面都会进行刷新。假设一个场景我们使用了模态对话框，正常界面打开的话，对话框一般都是隐藏的。如果点开了对话框，在模态对话框提交的POST请求之后，返回的页面因为重新刷新了，他会自动隐藏对话框，那如何在模态对话框的界面做到数据的验证？这里很...
django建立管理系统之五----单页ajax数据交互
weixin_34025151的博客
04-11 90
ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新（可以用刷新页面实现,例如 $(function(){ refresh(); }); //点击按钮调用的方法 functionrefresh(){ window.location.reloa...
基python的Django框架学生信息管理系统.zip
04-03
基python的Django框架学生信息管理系统.zip
基于django的学生信息管理系统
06-13
这是用pycharm软件编写的基于django的学生信息管理系统，含有MySQL数据库，数据库得自己配，具体配置方法需要百度，数据库表配置文件在models，数据库配置文件在setting里database，有问题可以评论
源码06 培训管理系统.rar
11-16
【源码06 培训管理系统】是一个用于管理和组织培训活动的应用程序，它涵盖了从课程创建、学员管理、报名流程到培训效果评估等一系列功能。这个压缩包文件包含的源代码是开发这样一个系统的全部技术实现，对于学习和...
curso-django-pythonpro
03-22
【描述】"Curso Django Python专业版" 暗示这门课程旨在深入讲解Django框架，帮助学员掌握使用Python进行Web开发的专业技能。课程可能涵盖了Django的基础到高级主题，包括但不限于模型（Models）、视图（Views）、...
千峰Django.7z
05-21
【千峰Django.7z】是一个包含与Python Django框架相关的学习资料的压缩包，它很可能是千峰教育机构推出的Django课程的讲义、代码示例或练习项目。Django是用Python编写的高级Web开发框架，它遵循模型-模板-视图（MTV...
Python:Python课程资料库-视频课程
04-17
10. **Web开发**：通过Django或Flask等框架构建Web应用程序。 11. **自动化脚本**：利用Python编写日常任务的自动化脚本，提高工作效率。 12. **Python在人工智能领域的应用**：包括机器学习（如Scikit-Learn库）...
Django学生管理系统(2)(学生信息增删改查)
qgy709830355的博客
05-02 7815
由于上周忙于写毕业设计，就暂停了这个项目，这周开始继续完善各个功能。 学生信息的增删改查 学生信息相关表格的建立 第一个功能需要进行的是对学生信息的操作，所以我先写好学生表(student) mysql: create table student( id int not null auto-increment, s_name varchar(30) not...
Django实战项目 ------ 学生信息管理系统
NiuXL的编程技术网络日志
06-13 4328
文章目录1. 数据库表的结构设计2. 后台引入母板3. 查询班级信息4. 添加班级信息5. 编辑班级信息6. 删除班级信息7. 查询学生信息8. 添加学生信息9. 编辑学生信息10. 删除学生信息11. Bootstrap介绍12. AJAX添加班级信息13. AJAX编辑班级信息14. AJAX删除班级信息15. 数据库操作代码复用16. AJAX添加学生信息17. AJAX编辑学生信息18. AJAX删除学生信息19. 分页展示学生表20. 数据库操作封装21. 添加教师信息22. 查询教师和任课班.
teacher列表的视图函数
defu7141的博客
06-11 221
teacher列表的增、删、改、查函数 def teacher_list(request): teacher_list = models.Teacher.objects.all() return render(request,'teacher_list.html',{'teacher_list':teacher_list}) def delete_t...
Django学生信息管理系统(4)学生班级分类
qgy709830355的博客
05-04 2743
针对于学生信息管理系统，肯定是需要班级的，在这里我们将使用到restful风格, 这种方法里面有封装好了的增删改查操作，使用起来将会会比我们之前写到的方法简单太多太多, 而且这种方法可以完全实现前后分离。。 一、创建班级表 创建grade app 班级与学生的对应关系是一个学生可以对应多个班级，也就是一对多的关系，可以在学生表中引入一个g_id外键来关联上grade表格的id字段。 首...
基于Django开发的学生信息管理系统
热门推荐
Gscsd的博客
03-22 2万+
一、 功能 实现对学生对个人信息的增删查改 实现后台对所有学生信息的操作 二、开发工具 Windows + Pycharm + Mysql + Django 三、git地址 https://github.com/Gscsd8527/StudentSystem 四、代码实现 1. model from django.db import models ...
Django框架（八）：Ajax请求（基础部分）
一点一滴铺就人生
07-28 1258
文章目录一、Ajax简介1、浏览器向服务器发送请求的形式2、Ajax引言3、Ajax两大特点4、Ajax怎么实现局部刷新呢？二、Ajax案例1、get请求2、post请求三、json在Ajax简单应用 一、Ajax简介 作用：前端浏览器向后端服务器发送请求的一种技术 AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用js
Django_学生管理系统
weixin_34342578的博客
06-12 532
一. Django简易学生管理系统 1.在pycharm中创建工程student_manage_system，添加app:student_manage 2.配置静态文件：在工程项目目录下新建目录static，并在settings.py中追加代码 STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),) 3.设计学生管理系统所需数据库 ...
pythondjango学生信息管理系统_Django实现学员管理系统
weixin_39637203的博客
12-01 2256
本文实例为大家分享了Django实现学员管理系统的具体代码，供大家参考，具体内容如下要求：实现数据的增删改查功能，并同步至数据库中。此项目实现了前端以及后端的结合。(1) 先在settings里配置static(存放的是css样式、js代码、以及imgs)，可以加在文件末尾STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DI...
《Django入门指南：中文版》- 高效Web开发框架
《Django Book中文版》是一本针对初学者和专业开发者介绍Django Web开发框架的权威指南。Django以其高效、易用和模块化的特性，旨在简化Web应用的开发过程，减轻开发者在重复性任务上的负担，让他们能专注于核心功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值