网站搭建-django-学习成绩管理-05-成绩查询之检索条件
系统：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：目标
- 本次实现成绩查询界面的条件查询部分，效果如下图，实现了每个选项的下拉列表显示
- 网址如下：http://127.0.0.1:8000/sg/gradesinput/
- 项目在Pycharm中启动：
python manage.py runserver - 注意在局域网中启动项目，并希望局域网中其它用户可以访问时，启动方式更改如下
python manage.py runserver 0.0.0.0:8000，端口号可以根据需要人工设定，建议可以以8000开始，避免与其它应用冲突
成绩查询界面
成绩查询动图
Part 2：代码结构
- 网页代码的实现可以分为3个部分：前端、后端、数据库（app中的models.py）
Part 3：代码实现-后端
1. 后端整体分为url，view两个部分
2. 一级url，核心为re_path(r'sg/', include(('school_grades.urls', 'sg'), namespace='sg'))
from django.contrib import admin
from django.urls import path, re_path, include
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'sg/', include(('school_grades.urls', 'sg'), namespace='sg')),
]一级url设置
3. 二级url，代码写在对应app的urls.py文件中
from django.urls import re_path, path
from .views import *
app_name = "school_grades"
urlpatterns = [
re_path('^gradesinput/$', SGInputAndCheckView.as_view(), name='gradesinput'),
]二级url设置
4. 综合一二级url，就可以得出访问的网址：IP:端口号/一级url/二级url/
5. 二级url对应的类SGInputAndCheckView，就是实际这个url地址触发的内容，View代码如下
class SGInputAndCheckView(View):
def get(self, request):
# 获取班级清单
class_name = Constants.objects.values_list('class_name')
list_class_name = [x[0] for x in list(class_name)]
while None in list_class_name:
list_class_name.remove(None)
list_all_class_name = list(set(list_class_name))
list_all_class_name.sort()
# 获取学生姓名清单
student_name = Constants.objects.values_list('student_name')
list_student_name = [x[0] for x in list(student_name)]
while None in list_student_name:
list_student_name.remove(None)
list_all_student_name = list(set(list_student_name))
list_all_student_name.sort()
# 获取考试清单
exam_info = Constants.objects.values_list('exam_info')
list_exam_info = [x[0] for x in list(exam_info)]
while None in list_exam_info:
list_exam_info.remove(None)
list_all_exam_info = list(set(list_exam_info))
list_all_exam_info.sort()
# 获取课程清单
course_name = Constants.objects.values_list('course_name')
list_course_name = [x[0] for x in list(course_name)]
while None in list_course_name:
list_course_name.remove(None)
list_all_course_name = list(set(list_course_name))
list_all_course_name.sort()
return render(request, 'sg_first_page.html', {
'all_class_name': list_all_class_name,
'all_student_name': list_all_student_name,
'all_exam_info': list_all_exam_info,
'all_course_name': list_all_course_name,
})Part 4：代码实现-后端-部分代码解读
- 以上代码就是返回一个网址，并传递了一些初始化参数，这些参数是从数据库中获取的
- 以上代码涉及到Django中几点知识
- get/post请求
- 数据库ORM操作
- Django的模板语法
Part 5：代码实现-前端
<!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">
<!-- 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>
<!-- Bootstrap -->
<script src="{% static 'bootstrap/js/bootstrap.js'%}" type="text/javascript"></script>
<script src="{% static 'bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
<title>成绩查询</title>
</head>
<body>
<div class="container-fluid rounded bg-dark" style="margin-top: 30px">
<h2 class="font-weight-bold text-center text-white">学生成绩查询</h2>
</div>
<div class="container-fluid">
<div class="col-md-12">
<div class="row container-fluid border" style="margin-top: 10px;margin-bottom: 10px">
<div style="color:#F00;font-weight: bold" class="border-bottom">查询信息</div>
<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>
</body>
</html>
Part 6：代码实现-前端-部分代码解读
- 前端中使用了两个JS模块，JQuery和Bootstrap
- JQuery用来对页面html元素进行操作，实现与后端进行信息交互
- Bootstrap用来页面可视化显示、如页面布局，样式等
Part 7：代码实现-数据库部分
1. 目前只需要建立一个常数项数据库，用来存放网页中下拉菜单信息
from django.db import models
class Constants(models.Model):
class_name = models.CharField(blank=True, null=True, max_length=10, verbose_name='班级')
student_name = models.CharField(blank=True, null=True, max_length=10, verbose_name='学生姓名')
exam_info = models.CharField(blank=True, null=True, max_length=20, verbose_name='模拟考信息')
course_name = models.CharField(blank=True, null=True, max_length=20, verbose_name='科目')
class Meta:
db_table = 'grades_constants'
verbose_name = "常数项"
verbose_name_plural = verbose_name2. 数据库中信息如下，这些信息以上网页中的下拉菜单
举报
腾讯云开发者
