17370845950

本系列教程将指导您如何利用django框架搭建一个网站，专注于后端开发。本文将介绍一个独立的项目应用，主要功能包括学习成绩查询和数据统计分析。前端模块将使用datatables、echarts和jquery来增强用户体验。

Part 1：目标

为了优化之前的页面，我们将利用Bootstrap4提供的卡片功能进行改进。具体改进包括将整个背景色设为统一的颜色，并在标题位置添加一个小图标。

修改前：

使用卡片后：

标题处的小图标：

Part 2：代码

HTML代码如下：

{% load staticfiles %}















    
        学生成绩查询
        
    
    
        班级
        {% for class_name in all_class_name %}
            {{ class_name }}
        {% endfor %}
        


        学生姓名
        {% for student_name in all_student_name %}
            {{ student_name }}
        {% endfor %}
        


        课程名称
        {% for course_name in all_course_name %}
            {{ course_name }}
        {% endfor %}
        


        第几次模拟考
        {% for exam_info in all_exam_info %}
            {{ exam_info }}
        {% endfor %}
        


        查询
    





    
        查询结果
    
    
        

            

                

                    
班级
                    
学生姓名
                    
第几次模拟考
                    
课程名称
                    
成绩
                
            
            

        
    

Part 3：部分代码解读

1. 卡片构成

卡片的结构由以下部分组成：

    
        查询条件
        
    
    
        
    

2. 背景色设置

通过

style

3. 标题小图片

将需要使用的图片放置在对应的静态文件位置，并通过以下代码添加到标题中：