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

zishendianxia

发布于 2021-05-13 11:32:14

1K0

发布于 2021-05-13 11:32:14

系统：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：目标

对之前的页面稍作优化，使用Bootstrap4中支持的卡片功能
将整个背景色修改成一个颜色
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/>

代码截图

2. 背景色设置，通过style进行设置

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

3. title小图片，将需要使用的图片放在对应的静态文件位置

<link rel="shortcut icon" href="/static/pic/favicon.ico">

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除

windows

django

编程算法

本文分享自 Python工程师微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

windows

django

编程算法

登录后参与评论

0 条评论

热度

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐