专栏首页Python工程师网站搭建-django-学习成绩管理-09-查询成绩之前端实现

网站搭建-django-学习成绩管理-09-查询成绩之前端实现

系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3.2 Django:2.1.4 Python:3.6.0

  • 本系列介绍如何搭建一个网站,后端使用django框架
  • 今天开始介绍一个单独的项目app,关于学生成绩管理的网站的搭建
  • 主要功能包括: 学习成绩查询,数据统计分析
  • 涉及前端模块: Datatables、ECharts、JQuery

Part 1:目标

  1. 提前在数据库中录入一部分成绩信息,本文目标,选择特定条件查询

数据库

查询动图

查询静图

Part 2:代码逻辑

  1. 前端
    • 获取页面中输入的条件信息(JQuery
    • 将前端信息传入后端(Ajax
    • 后端查询的结果传入前端,显示出表格(Datatables
  2. 后端
    • 获取前端传递的信息(json.loads(request.body)
    • 建立查询条件(Q
    • 查询获取结果(ORM
    • 将结果返回前端(JsonResponse(data)

Part 3:前端代码

  1. html部分:新增表格部分,另外在末尾处引入自编制js,请注意位置,如果放在head部分可能无法工作
    <div id="table-show" class="container-fluid rounded" style="width: 95%;margin-top: 30px">
        <table width="100%" class="table table-condensed table-hover" id="table-query" style="table-layout:auto">
            <thead class="thead-light">
                <tr style="text-align: center;font-size:12px" id="tr-th">
                    <th>班级</th>
                    <th>学生姓名</th>
                    <th>第几次模拟考</th>
                    <th>课程名称</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>
    </div>
    
<!-- 引入自定义js -->
<script src="{% static 'self-js/sg_first_page.js' %}" type="text/javascript"></script>

代码截图

  1. 文中涉及到一些前端模块,需要在head部分引入。注意引入顺序,如果顺序出错,可能会无法工作,具体先后顺序,也是摸索出来,内在的原理暂且不了解,尴尬
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>成绩查询</title>

    <style>
        .table-center{
            text-align: center;
            vertical-align: middle;
            white-space: wrap;
        }
</style>
    
    <!--引入jquery-->
    <script src="{% static 'js/jquery-3.3.1.min.js' %}" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>

    <!--引入font_awesome-->
    <link rel="stylesheet" type="text/css" href="{% static 'font_awesome/css/font-awesome.min.css' %}">

    <!--引入bootstrap-->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.js'%}" type="text/javascript"></script>
    <script src="{% static 'bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript"></script>

    <!--引入datatables-->
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/css/jquery.dataTables.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/css/buttons.dataTables.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/css/select.dataTables.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/css/dataTables.checkboxes.css' %}">

    <!-- <script src="{% static 'datatables/js/jquery.js'%}" type="text/javascript"></script> -->
    <script src="{% static 'datatables/js/jquery.dataTables.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/dataTables.bootstrap4.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/dataTables.responsive.min.js'%}" type="text/javascript"></script>
    <!-- <script src="{% static 'datatables/js/pdfmake.min.js'%}" type="text/javascript"></script> -->
    <script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/dataTables.select.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/dataTables.checkboxes.min.js'%}" type="text/javascript"></script>
    <!-- <script src="{% static 'datatables/js/buttons.bootstrap4.min.js'%}" type="text/javascript"></script> -->
    <script src="{% static 'datatables/js/dataTables.buttons.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/buttons.html5.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'datatables/js/jszip.min.js'%}" type="text/javascript"></script>
    <!-- <script src="{% static 'datatables/js/pdfmake.min.js'%}" type="text/javascript"></script> -->
    <script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript"></script>

    <!--引入echarts-->
    <script src="{% static 'js/echarts.js'%}" type="text/javascript"></script>

    <!--引入editable-select-->
    <link rel="stylesheet" type="text/css" href="{% static 'editable-select/jquery-editable-select.css' %}">
    <script src="{% static 'editable-select/jquery-editable-select.js'%}" type="text/javascript"></script>
 
</head>

代码截图

  1. js部分:通过Datatables模块实现表格的显示效果,只需要定义columns,即每列显示的字段,其余部分可以保持不变
    • Datatables功能非常强大,本文实现了排序、着色效果
$('#btn-search').click(function(){
    showTable();
})

function showTable(){
    var class_name = $("#class-name option:selected").text();
    var student_name = $("#student-name option:selected").text();
    var course_name = $("#course-name option:selected").text();
    var exam_info = $("#exam-info option:selected").text();

    var json_data = {
        "class_name": class_name,
        "student_name": student_name,
        "course_name": course_name,
        "exam_info": exam_info,
    };

    console.log(json_data);

    $.ajax({
        type:'POST',
        url:'/sg/showNotes/',
        headers:{"X-CSRFToken":$.cookie('csrftoken')},
        data: JSON.stringify(json_data),
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json',
        traditional: true,
        async:true,
        success: function(data) {
            var str_lookup_result = JSON.stringify(data.lookup);
            var array_lookup_result = JSON.parse(str_lookup_result);

            //显示数据到表格
            $("#table-query").DataTable({
            "data": array_lookup_result,
            "columns": [
                { data: "class_name",
                    className:'table-center',},
                { data: "student_name",
                    className:'table-center',},
                { data: "exam_info",
                    className:'table-center',},
                { data: "course_name",
                    className:'table-center-hide',
                    createdCell: function(nTd, sData, oData, iRow, iCol){
                        $(nTd).attr('title',sData);
                    },
                },
                { data: "grades",
                className:'table-center-hide',
                createdCell: function(nTd, sData, oData, iRow, iCol){
                    if(sData < 60) {
                      $(nTd).css("background-color", "#FFB6C1");
                      };
      
                },},
            ],
            "scrollX": true,
            "autoWidth": false,//自动宽度
            "columnDefs": [
                {
                    targets:0,
                    className:'select-checkbox',
                },
            ],
            "select":{
                style:'os',
                selector:'td:first-child',  //点击该行第一个元素,选中这一行
            },
            "dom": "lBfrtip",//自定义显示项,并控制布局
            "lengthMenu": [
            [50, 6, 8, -1],
            [4, 6, 8, "All"]
            ],//每页显示条数设置
            "lengthChange": false,//是否允许用户自定义显示数量
            "bPaginate": true, //翻页功能
            "bFilter": true, //列筛序功能
            "searching": true,//本地搜索
            "ordering": true, //排序功能
            "Info": true,//页脚信息
            "destroy": true, //销毁已经存在的Datatables实例并替换新的选项
            buttons: [
                { extend: 'excel', text: '另存为Excel' },
            ],
        });
        },
    });

}

代码截图


以上为本次的学习内容,下回见

本文分享自微信公众号 - Python工程师(DatenSpiel),作者:壹章VBA

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化-bokeh-02-Django中部署

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • Python-入门-09-字符串常见函数(上篇)

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 【项目实战】自监控-04-字符串常见操作

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • Simditor富文本编辑器的调用

    简单、
  • HTML的 script 标签引用js文件及其属性整理

    在 HTML 页面中,可以通过 <script> 标签插入 JavaScript 代码,也可以引用外部 js 文件。

    德顺
  • 【XSS漏洞】一步步教你通关DVWA

    今天小编初步学习了一下XSS漏洞,顺带打通了DVWA平台上的几道XSS漏洞题,本着学习的精神,在此跟大家分享一下这几题的解法,感兴趣的同学就跟着我一起往下看吧。

    一名白帽的成长史
  • 经济学人文章爬虫

    假如是经常阅读该网站文章自然是订阅支持一下更好,但假如只是偶尔想看几篇文章订阅的性价比就不高了。

    林清猫耳
  • jquery 列表可拖动排序 sortable

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

    用户5760343
  • jQuery日期和时间插件(jquery-ui-timepicker-addon.js)中文破解版使用

    简介 jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepick...

    Java中文社群_老王
  • 苹果首篇AI论文SimGANs代码及详解

    用户1737318

扫码关注云+社区

领取腾讯云代金券