ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-04-26 20:01:08  阅读：174  来源： 互联网

标签：info exam 12 name -- 查询 course django 学习成绩


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

标签：info,exam,12,name,--,查询,course,django,学习成绩
来源： https://blog.csdn.net/zishendianxia/article/details/116168231

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有