django练习

最新推荐文章于 2022-06-28 15:38:51 发布
最新推荐文章于 2022-06-28 15:38:51 发布
阅读量357 收藏
点赞数
分类专栏： Python学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Marvin_Wind/article/details/81138556
版权

1，创建project

2,settings中添加

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

创建‘static’目录，加入JS

3，models

from django.db import models

class Classes(models.Model):
    """
    班级表,男
    """
    title = models.CharField(max_length=32)
    m = models.ManyToManyField("Teachers")

class Teachers(models.Model):
    """
    老师表，女
    """
    name = models.CharField (max_length=32)

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

4,运行python manage.py makemigrations

python manage.py migrate

 

5,url.py

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('students/',views.students),
    path('add_student/',views.add_student),
    path('del_student/',views.del_student)
]

views.py

from django.shortcuts import render,HttpResponse
from app01 import models
import json

def students(request):
    cls_list = models.Classes.objects.all()
    stu_list = models.Student.objects.all()
    return  render(request,'students.html',{'stu_list':stu_list,'cls_list':cls_list})

def add_student(request):
    response = {'status':True,'message':None,'data':None}
    try:
        print(request.POST)
        u = request.POST.get('username')
        a = request.POST.get('age')
        g = request.POST.get('gender')
        c = request.POST.get('cls_id')
        obj= models.Student.objects.create(
            username=u,
            age=a,
            gender=g,
            cs_id=c
        )
        response['data'] = obj.id    #向前端返回ID以便前端删除数据
    except Exception as e:
        response['status']=False
        response['message']='用户输入错误'
    result = json.dumps(response,ensure_ascii=False)
    return HttpResponse(result)

def del_student(request):
    ret = {'status':True}
    try:
        nid = request.GET.get('nid')
        models.Student.objects.filter(id=nid).delete()
    except Exception as e:
        ret['status':False]
    return HttpResponse(json.dumps(ret))

students.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="container">
    <div>
        <a class="btn btn-primary" id="addBtn">添加记录</a>
    </div>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">
            {% 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 class="fa fa-pencil-square-o"></a>
                        <a class="glyphicon glyphicon-remove del-row"></a>
                    </td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">创建学生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="gender" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="0"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="class" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cls_id">
                                {% for row in cls_list %}
                                    <option value="{{ row.id }}">{{ row.title }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <span id="errorMsg" style="color:red"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="btnSave">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger" role="alert">
            <h3>删除学生信息？</h3>
            <div>...<input style="display: none;" type="text" id="delNid" /></div>
            <div>
                <button type="button" class="btn btn-default">取消</button>
                <button id="delConfirm" type="button" class="btn btn-danger">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $(function () {
        bindEvent();
        bindSave();
        bindDel();
        bindDelConfirm();
    });
    function bindDelConfirm() {
        $('#delConfirm').click(function () {
            var rowId = $('#delNid').val();
            console.log(rowId);

            $.ajax({
                url: '/del_student/',
                type: 'GET',
                data: {'nid': rowId},
                success:function (arg) {
                    var dict = JSON.parse(arg);
                    if(dict.status){
                        $('tr[nid="'+ rowId+'"]').remove();
                    }
                    $('#delModal').modal('hide');
                }
            })

        });


    }
    function bindDel() {
        $('.del-row').click(function () {
            $('#delModal').modal('show');
            // 获取当前行的ID
            var rowId = $(this).parent().parent().attr('nid');
            $('#delNid').val(rowId);
        })
    }
    function bindEvent() {
        $('#addBtn').click(function () {
            $('#addModal').modal('show');
        })
    }
    function bindSave() {

        $('#btnSave').click(function () {
            var postData = {};
            $('#addModal').find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr('name');
                if(n=='gender'){
                    if($(this).prop('checked')){
                        postData[n] = v;
                    }
                }else{
                    postData[n] = v;
                }
            });

            /*
            postData = {
                 username: 'asdf',
                 age:18,
                 gender: 1,
                 cls_id: 2
            }
             */

            $.ajax({
                url: '/add_student/',
                type: 'POST',
                data: postData,
                success:function (arg) {
                    // arg是字符串
                    // JSON.parse将字符串转换成字典， json.loads
                    var dict = JSON.parse(arg);
                    if(dict.status){
                        /*
                        postData = {
                             username: 'asdf',
                             age:18,
                             gender: 1,
                             cls_id: 2
                        }
                        自增id  = dict.data
                         */
                        createRow(postData,dict.data);
                        $('#addModal').modal('hide');
                        // window.location.reload();
                    }else {
                        $('#errorMsg').text(dict.message);
                    }
                }
            })

        });


    }
    function  createRow(postData,nid) {
        var tr = document.createElement('tr');

        var tdId = document.createElement('td');
        tdId.innerHTML = nid;
        $(tr).append(tdId);

        var tdUser = document.createElement('td');
        tdUser.innerHTML = postData.username;
        $(tr).append(tdUser);

        var tdAge = document.createElement('td');
        tdAge.innerHTML = postData.age;
        $(tr).append(tdAge);


        var tdGender = document.createElement('td');
        if(postData.gender == "0"){
            tdGender.innerHTML = 'False';
        }else{
             tdGender.innerHTML = 'True';
        }
        $(tr).append(tdGender);


        var tdClass = document.createElement('td');
        var text = $('select[name="cls_id"]').find('option[value="'+ postData.cls_id +'"]').text();
        tdClass.innerHTML = text;
        $(tr).append(tdClass);

        var tdHandle = '<td> <a class="glyphicon glyphicon-remove icon"></a><a class="fa fa-pencil-square-o icon"></a> </td>';
        $(tr).append(tdHandle);

        $('#tb').append(tr);
    }
</script>
</body>
</html>

 

新增标签需要使用事件委托：

$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})

$('要绑定标签的上级标签').delegate('click','要绑定的标签',function(){})

修改位置1：

function bindDel() {
        $('#tb').on('click','.del-row',function () {
            

        //$('.del-row').click(function () {
            $('#delModal').modal('show');
            // 获取当前行的ID
            var rowId = $(this).parent().parent().attr('nid');
            $('#delNid').val(rowId);
        })

 

修改位置2：

var tdHandle = '<td><a class="fa fa-pencil-square-o icon"></a> <a class="glyphicon glyphicon-remove icon del-row"></a> </td>';

 

修改位置3：

        var tr = document.createElement('tr');
        $(tr).attr('nid',nid);

 

编辑功能

新建一个模态对话框

 

 

 

 

 

 

URL

views

def edit_student(request):
    response ={'code':1000,'message':None}
    try:
        nid = request.POST.get('nid')
        user = request.POST.get('user')
        age = request.POST.get('age')
        gender = request.POST.get('gender')
        cls_id = request.POST.get('cls_id')
        models.Student.objects.filter(id=nid).update(
            username=user,
            age=age,
            gender=gender,
            cs_id=cls_id
        )
    except Exception as e:
        response['code'] = 1001
        response['message'] =str(e)
    return HttpResponse(json.dumps(response))

 

html再增加

    $(function () {
        bindEvent();
        bindSave();
        bindDel();
        bindDelConfirm();
        bindEdit();
        bindEditConfirm();
    });

    function bindEditConfirm() {
        $('#btnEditSave').click(function () {
            var postData = {};
            $('#editModal').find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr('name');
                if (n == 'gender') {
                    if ($(this).prop('checked')) {
                        postData[n] = v;
                    }
                } else {
                    postData[n] = v;
                }
            });
            $.ajax({
                url: '/edit_student/',
                type: 'POST',
                data: postData,
                dataType: 'JSON', //解析返回可序列化数据。否则报错
                success: function (arg) {
                    if (arg.code == 1000) {

                        window.location.reload();

                    } else {
                        alert(arg.message);
                    }

                }

            })
        })
    }

 

改进：

function bindEditConfirm() {
        $('#btnEditSave').click(function () {
      
            $.ajax({
                url: '/edit_student/',
                type: 'POST',
                data: $('#fm').serialize(),
                dataType: 'JSON', //解析后端返回可序列化数据。否则报错。
                success: function (arg) {
                    if (arg.code == 1000) {

                        window.location.reload();

                    } else {
                        alert(arg.message);
                    }

                }

            })
        })
    }

 

 

Marvin_Kai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Django练习题.zip
04-09
Django的一些小型的项目题型，需要实现的 技术有基本ORM思想，对数据库的增删改查，图片的上传，Django的高级操作，Django实现的发送邮件。
Jquery学习前传
什么最重要？算法！！
10-06 987
博客核心内容：加载顺序 如何选择标签并进行执行 通过Jquery如何获取某个标签中某个属性对应的数值方法1 通过Jquery如何获取某个标签中某个属性对应的数值方法2 通过Jquery如何获取某个标签中某个属性对应的数值方法3 常见的创建标签 通过浏览器查找标签的技巧注意浏览器中就不要加var了 JS和Jquery当中一种值得学习的函数加载方式 Form表单中通过a标签向后台发送数据加载顺序:如何选
Django编程练习——10道
weixin_50517509的博客
06-28 667
Django项目中实现的一些简单方法
Django练习
feifeiyechuan的博客
12-20 748
目录 一、Django简单的登录注册（带验证码） 1、创建Django项目（专业版自动选择 虚拟环境 和 创建新应用） 2、配置项目urls路径 3、 添加模板 首页模板 登录模板 注册模板 4、views视图处理代码 5、迁移数据库 6、测试成功 二、selenium爬虫 1、导包：pip install selenium 2、代码： 三、Djang...
django小练习—小型图书管理系统
BreezeChasingDrizzle
01-19 1214
django小练习—小型图书管理系统 功能分析： 使用django内建的用户系统实现支持用户的注册和登录； 登录之后能显示数据库中的图书信息 支持分页功能 能够对已有的图书信息进行修改和删除 能够添加新的图书信息 能够将当前页的图书信息导出 开发 铺垫： 创建项目：cd到指定的文件夹，django-admin startproject bookManageSystem 创建应用：cd到项目文件夹，然后python manage.py startapp user和python manage.py
人工智能Django练习手册.docx
01-01
《人工智能 Django 练习手册》是一本针对初学者的指南，涵盖了Django框架的基础知识和实践操作。Django是一款强大的Python Web开发框架，以其高效、安全和可扩展性著称。 1. Django简介与安装： Django是基于MTV...
djangoPractice:DJANGO练习
04-02
【DJANGO练习】是关于使用Python的Web框架Django进行实战训练的一个项目。Django是一个高效、强大且灵活的框架，常用于构建复杂的网站应用程序。在这个实践中，我们将深入理解Django的核心概念，包括模型（Models）...
在线web计算器.rar。Django练习
09-18
【标题】中的“在线web计算器.rar”表明这是一个包含在线Web计算器项目的压缩文件，而“Django练习”则意味着该项目是使用Python的Django框架开发的一个练习项目，可能用于学习和实践Django的基础知识。 【描述】中...
python类中的@classmethod,@staticmethod,@property三种装饰器
weixin_43667990的博客
06-04 940
参考：https://blog.csdn.net/weixin_43613053/article/details/84979916 一、@classmethod 类方法，需要一个cls参数，可以用类名或对象来调用 class Post(models.Model): @classmethod def latest_posts(cls): return cls.obj...
Python一日一练---Django模版练习源码
01-23
http://blog.csdn.net/a359680405 代码
python+django练手项目
08-14
python+Django web项目，使用Django框架，MVT的思想，使用Django后台管理站点操作数据，并在浏览器中显示信息
Django开发练习源码
01-14
Django快速开发web的基本步骤练习源码，配套说明文档：https://blog.csdn.net/hanbo622/article/details/86469335
Django 入门（学习笔记项目练习）
雷银行的博客
08-10 1702
Django 创建第一个项目 本章我们将介绍Django 管理工具及如何使用 Django 来创建项目，第一个项目我们以 HelloWorld 来命令项目。 测试版本说明： Python 3.7.4 Django 3.0.6
Django笔记教程：三、Model进阶
热门推荐
alvine008的专栏
11-24 1万+
Model 进阶学习简介Django经常被用于一些创业团队，乃是因为其非常适合敏捷开发，开发效率非常之高。Model 作为Django重要组成部分也是亮点之一，着实需要我们花时间好好梳理一遍。 ORM还是需要好好学习的，确实可以大大的提升代码的简洁性。Django的model模块，遵循了DRY（don’t repeat yourself）原则，也会使得代码更加容易维护，只需修改一次，肯定
Django小记 模型-Model模块
薛定谔的壳的博客
11-17 955
文章目录常用字段Field 常用参数：普通字段关系字段Model 类访问外键、多对多对象自定义方法管理器 Manager (.ojects)常用方法【增-删-改-查】查询方法-细讲filter() 和 exclude()多表连接查询【外键】Q 查询自定义管理器添加新方法修改返回的QuerySet执行自定义SQL语句Meta 类属性 常用字段    列1    列2 AutoField() DecimalField() BooleanField() NullBoolean() .
学习猿地 python教程 django教程2 模型配置及案例
学习猿地
03-23 143
## M ==> Model ==> 模型层 > 数据管理层 对数据的相关操作和管理 ### 给当前的项目配置一个数据库 1.确认当前是否安装了mysql数据库 2.在mysql数据库中创建一个库 mydb `create database mydb default charset=utf8mb4;` 3.修改当前项目中的数据库配置 settings.py/DATA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值