signed

QiShunwang

“诚信为本、客户至上”

网站搭建-django-学习成绩管理-12-卡片

2021/4/26 19:49:35   来源:

系统:Windows 10
语言版本:Anaconda3-4.3.0.1-Windows-x86_64
编辑器:JetBrains PyCharm Community Edition 2018.2.2 x64
Django:2.1.4
Python:3.6.0

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

Part 1:目标

  1. 对之前的页面稍作优化,使用Bootstrap4中支持的卡片功能
  2. 将整个背景色修改成一个颜色
  3. title位置增加一个小图标

修改前
在这里插入图片描述

使用卡片
在这里插入图片描述
title小图标
在这里插入图片描述

Part 2:代码

HTML

<!DOCTYPE html>
{% load staticfiles %}
<html lang="zh-cn">
<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>

    
    <!-- favicon.ico 请求 -->
    <link rel="shortcut icon" href="/static/pic/favicon.ico">
    
    <!--引入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>

</head>
<body style="background-color:lightblue;">
  <br/>

  <!-- 卡片n -->
  <div class='card m-auto bg-light' style="width: 96%;">
    <div class='card-body'>
      <div class='card-title bg-secondary text-white text-center'>学生成绩查询</div>
      <div class='card-text'>
        <div class="row container-fluid" style="margin-top: 10px;margin-bottom: 10px">
          <div class="col-md-4">
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">班级</span>
                  </div>
                  <select id="class-name" class="form-control">
                      <option value=""></option>
                      {% for class_name in all_class_name %}
                          <option value="{{ class_name }}">{{ class_name }}</option>
                      {% endfor %}
                  </select>
              </div>
          </div>

          <div class="col-md-4">
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">学生姓名</span>
                  </div>
                  <select id="student-name" class="form-control">
                      <option value=""></option>
                      {% for student_name in all_student_name %}
                          <option value="{{ student_name }}">{{ student_name }}</option>
                      {% endfor %}
                  </select>
              </div>
          </div>

          <div class="col-md-4">
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">课程名称</span>
                  </div>
                  <select id="course-name" class="form-control">
                      <option value=""></option>
                      {% for course_name in all_course_name %}
                          <option value="{{ course_name }}">{{ course_name }}</option>
                      {% endfor %}
                  </select>
              </div>
          </div>



        </div>

        <div class="row container-fluid" style="margin-bottom: 10px">
            <div class="col-md-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">第几次模拟考</span>
                    </div>
                    <select id="exam-info" class="form-control">
                        <option value=""></option>
                        {% for exam_info in all_exam_info %}
                            <option value="{{ exam_info }}">{{ exam_info }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="col-md-4">
                <div class="input-group">
                    <button id="btn-search" type="button" class="btn btn-info">查询</button>

                </div>
            </div>

        </div>
      </div>
    </div>
  </div>
  <br/>

  <!-- 卡片n -->
  <div class='card m-auto bg-light' style="width: 96%;">
    <div class='card-body'>
      <div class='card-title bg-secondary text-white text-center'>查询结果</div>
      <div class='card-text'>
        
        <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>

      </div>
    </div>
  </div>
  <br/>


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

</body>
</html>

Part 3:部分代码解读

  1. 卡片构成
          <!-- 卡片n -->
          <div class='card m-auto bg-light' style="width: 96%;">
            <div class='card-body'>
              <div class='card-title bg-secondary text-white text-center'>查询条件</div>
              <div class='card-text'>
                
              </div>
            </div>
          </div>
          <br/>

代码截图
在这里插入图片描述

  1. 背景色设置,通过style进行设置
<body style="background-color:lightblue;">
  1. title小图片,将需要使用的图片放在对应的静态文件位置
    <!-- favicon.ico 请求 -->
    <link rel="shortcut icon" href="/static/pic/favicon.ico">

在这里插入图片描述


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

长按图片识别二维码,关注本公众号
Python 优雅 帅气
12x0.8.jpg