django学习（二）之分页、vue.js数据绑定及模态对话框的使用

最新推荐文章于 2025-02-26 16:31:05 发布

焦躁的小黑猫

最新推荐文章于 2025-02-26 16:31:05 发布

阅读量2.3k

点赞数 2

分类专栏： Python开发

本文链接：https://blog.youkuaiyun.com/yin8809/article/details/77853280

版权

Python开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Django项目中实现分页功能和结合Vue.js进行数据绑定，以及如何创建模态对话框进行学员信息管理。示例展示了如何通过点击‘添加学员’按钮触发模态框，用于学员注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，学习Python Django部分，需要分页、模态框运用、及vue.js数据绑定

实现效果如下：

一个模拟学生信息展示的界面，通过‘添加学员’的按钮弹出学员注册的模态框

代码实现如下：

1、index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/vue.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/register.css">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
</head>
<body>
    <!--头部，包含标题和搜索框-->
    <div class="top content_size">
        <p id = 'title' class="col-md-8 text-left" style="font-size: 24px;">
            学生信息展示
        </p>
        <div class="input-group col-md-3 text-right search">
            <input id="searchText" type="text" class="form-control clearPardding content_size" placeholder="请输入学生年龄">
            <span class="input-group-btn clearPardding">
                <button id="searchButton" class="btn btn-info">查询</button>
            </span>
        </div>
    </div>
    <!--中间部分，实现添加学生弹出模态框、数据展示-->
    <div id = 'content' class="content">
      <!-- 绑定模态框-->
        <button class="btn btn-primary content_size" data-toggle="modal" data-target="#myModel">
            添加学员
        </button>
      <!-- 使用Vue.js绑定数据-->
        {% verbatim %}
            <table class="table col-md-11 content_size">
                <thead>
                    <tr>
                        <th>学员</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>专业</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-for="student in studentList">
                    <tr>
                        <td>0000{{ student.id }}</td>
                        <td>{{ student.name }}</td>
                        <td>{{ student.gender }}</td>
                        <td>{{ student.age }}</td>
                        <td>{{ student.subject }}</td>
                        <td>
                            <button class="btn btn-primary">
                                修改
                            </button>
                            <button class="btn btn-warning">
                                删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        {% endverbatim %}
      
        <div class="bottom content_size text-right clearPardding">
            {% verbatim %}
            <ul class="pagination clearPardding" v-for = 'p in page'>
                <li class="clearPardding"><a class="clearPardding">{{ p }}</a></li>
            </ul>
            {% endverbatim %}
        </div>
    </div>
   
    <!-- 学员注册模态框 -->
    <div class="modal fade" id='myModel' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        学员信息注册
                    </h4>

                </div>
                <div class="modal-body">
                    <form class="form-inline content_size" method="post">
                        {% csrf_token %}
                        {{ sForm.as_p }}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary content_size">
                        注册
                    </button>
                </div>
            </div>
        </div>
    </div>
   
   <!-- Vue.js获取数据-->
<script>
    $(
        function () {
            $.ajax(
                {
                    url:'/listData/',
                    type:'get',
                    data:{'page':1,'pagesize':5},
                    success:function (data) {
                        console.log('++++++++++');
                        var page = data.total;
                        var staticData = data.data;
                        console.log(staticData);
                        console.log(page);
                        new Vue(
                            {
                                el:'#content',
                                data:{
                                    studentList:staticData,
                                    page:page,
                                }
                            }
                        )
                    },
                    error:function (error) {
                        console.log('-------------');
                        console.log(error)
                    }
                }
            )
        }
    )
</script>
</body>
</html>

2、views.py实现获取数据并分页部分代码：

def listData(request):
    '''
    当请求该函数，返回：指定条数据、数据总条数、up(上一页)、down(下一页)
    :param request:
    :param page: 页码
    :param pagesize: 每页条数
    :return:
    __gt 大于
    __gte 大等于
    __lt 小于
    __lte 小等于
    __range 范围
    '''
    if request.method == 'GET' and request.GET:
        page = int(request.GET['page'])   #将传入的参数转换为数字类型，一般url传过来的参数是str类型
        pagesize = int(request.GET['pagesize'])
        start = (page - 1) * pagesize
        end = page * pagesize
        total_length = len(Student.objects.all())
        total_range = range(1,total_length / pagesize + 1)
        student_list = Student.objects.filter(id__range = (start,end))
        result = []
        for student in student_list:
            student_dict = {}
            student_dict["id"] = student.id
            student_dict["name"] = student.name
            student_dict["age"] = student.age
            student_dict["gender"] = student.gender
            student_dict["subject"] = student.subject
            result.append(student_dict)
        if page != 1:
            p = page - 1
        else:
            p = page
        allResult = {
            "total": total_range,
            "data": result,
            "up": p,
            "down": page + 1
        }
    else:
        allResult = {
            "total": 0,
            "data": [],
            "up": 0,
            "down": 0
        }
    return JsonResponse(allResult)

3、注册部分代码：

def index(request):
    if request.method == 'POST' and request.POST: #提交数据的方式POST，并且POST有数据
        sForm = StudentForm(request.POST)     #将POST数据交给form表单
        if sForm.is_valid():                 #判断form表单提交的数据是否正确
            clean_data = sForm.cleaned_data
                   sdata = Student()
                   sdata.name = clean_data['name']
                   sdata.gender = clean_data['gender']
                   sdata.age = clean_data['age']
                   sdata.birthday = clean_data['birthday']
                   sdata.grade = clean_data['grade']
                   sdata.subject = clean_data['subject']
                   sdata.city = clean_data['city']
                   sdata.save()
            else:
                   pass

    else:
           sForm = StudentForm()
    return render_to_response('index.html',locals())