文章目录
1、项目介绍
本项目主要实现了学校选课信息管理系统，分为学生端和教师端。学生端可以由学生自行注册。学生端。
本文基于flask框架，使用flask_bootstrap以及flask_wtf库去进行前端模板的渲染。数据库使用sqlite。
2、 功能介绍-学生端
系统角色分为学生和教师。学生端功能主要包括个人中心(用户密码修改)，课程选择，课程删除以及课程成绩查询。
以下是该界面对应的表单相关内容，完整项目地址见文末。
{
% extends 'base.html' %}
{
% from 'bootstrap/nav.html' import render_nav_item %}
{
% block head %}
{
{
render_nav_item('student', "%s(student)"%sno, sno=sno) }}
{
{
render_nav_item('student_account', 'Personal Info', sno=sno) }}
{
{
render_nav_item('student_course_select', 'Course Select', sno=sno) }}
{
{
render_nav_item('student_course_delete', 'Course Drop', sno=sno) }}
{
{
render_nav_item('student_score', 'Score', sno=sno) }}
{
{
render_nav_item('index', 'Logout') }}
{
% endblock %}
选课界面默认展示全部已开设课程列表，显示课程id,课程名称，教授以及已选人数。
3、功能介绍-教师端
教师端功能主要包括个人中心(用户密码修改以及课程发布)，查看开设课程的学生，查看以及录入已开设课程的学生成绩。
{
% extends 'base.html' %}
{
% from 'bootstrap/nav.html' import render_nav_item %}
{
% block head %}
{
{
render_nav_item('teacher', tno, tno=tno) }}
{
{
render_nav_item('teacher_account', 'Personal Info', tno=tno) }}
{
{
render_nav_item('teacher_course', 'Course', tno=tno) }}
{
{
render_nav_item('teacher_score', 'Score Entry', tno=tno) }}
{
{
render_nav_item('index', 'Logout') }}
{
% endblock %}
学生成绩录入根据学生id，课程id作为查询条件查询数据并录入。
4、关键flask插件flask_wtf
flask_wtf 是一个集成了 WTForms 库的 Flask 扩展，可以更轻松地为 Web 应用程序中的用户输入创建表单。 它提供与 WTForms 的简单集成，可以处理表单数据验证、呈现和提交。
使用flask-wtf能够方便我们更快速地在后端代码中处理表单数据。以第一部分贴上的登录界面为例。登录的表单包括用户名/密码，以及用户角色的单选框。
4.1 flask_wtf的初始化
这里当我们使用flask_wtf插件时，首先需要在我们的业务代码中继承FlaskForm类。这里我们直接定义在了flask的app.py中
# -*- coding: utf-8 -*-
from flask import Flask, render_template, request, flash, url_for, redirect
from flask_bootstrap import Bootstrap
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from wtforms.fields import *
from wtforms.validators import DataRequired, Length
from dbSqlite3 import SQLAlchemy
app = Flask(__name__)
app.secret_key = 'djfeowhfoiewjfeow'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'
# set default button sytle and size, will be overwritten by macro parameters
app.config['BOOTSTRAP_BTN_STYLE'] = 'primary'
app.config['BOOTSTRAP_BTN_SIZE'] = 'sm'
bootstrap = Bootstrap(app)
db = SQLAlchemy(app)
class LoginForm(FlaskForm):
username = StringField(u'Username', validators=[DataRequired(), Length(1, 20)])
password = PasswordField(u'Password', validators=[Length(0, 10)])
# add a role field to select student or teacher
select = RadioField(u'Role', choices=[('student', 'Student'), ('teacher', 'Teacher')], default='student')
submit = SubmitField(u'Login', render_kw={
'class': 'btn btn-primary btn-sm'})
通过上述代码，我们定义了LoginForm，并设置了表单对应的类型以及数据检验，这样就能非常快速地定义一个表单以及校验用户输入的正确性了。
4.2 使用flask_wtf中自定义的表单
接下来我们要看看如何将这个表单应用到我们接口的处理逻辑中。
FlaskForm在初始化后我们可以使用validate_on_submit方法进行设计校验，检验通过后直接获取form中的对应key值就行，这个key就是我们自定义类中的属性名，可以通过下列函数看下调用实例(接上一段代码)，使得我们的flask启动后默认展示登录界面。
@app.route('/', methods=['GET', 'POST'])
def index():
form = LoginForm()
if request.method == "GET":
return render_template('index.html', form=form)
if form.validate_on_submit():
role = form.select.data
if role == 'student':
result, _ = SqlQuery("select * from student where sno='%s'" % form.username.data)
if not result:
flash(u'Username does not exist', 'warning')
return render_template('index.html', form=form)
if result[0][5] == form.password.data:
return render_template('student.html', sno=form.username.data)
else:
flash(u'Password Error', 'warning')
return render_template('index.html', form=form)
if role == 'teacher':
result, _ = SqlQuery("select * from teacher where tno='%s'" % form.username.data)
if not result:
flash(u'Username does not exist', 'warning')
return render_template('index.html', form=form)
if result[0][2] == form.password.data:
return render_template('teacher.html', tno=form.username.data)
else:
flash(u'Password Error', 'warning')
return render_template('index.html', form=form)
5、关键flask插件flask_bootstrap
Flask-Bootstrap 是一个 Flask 扩展，可以让我们轻松地在 Flask Web 应用程序中使用 Bootstrap。
Bootstrap 是一种流行的 CSS 框架，用于构建响应迅速且用户友好的网站和应用程序。 Flask-Bootstrap
提供了预构建的模板和小部件，以便将 Bootstrap 与 Flask 结合使用，从而更容易开始构建美观实用的网页。 使用
Flask-Bootstrap，我们可以快速将导航栏、表单、按钮、表格和其他 UI 元素添加到您的 Flask 应用程序中，而无需自己编写 HTML 和 CSS。
继续以我们上一节讲到的登录表单为例，我们需要将flask_wtf中的表单以bootstrap中的样式呈现出来，这样我们在编码过程中就能够做到更多地关注代码本身的逻辑，而只需要花少部分精力去组织前端的css样式。
{
% extends 'base.html' %}
{
% from 'bootstrap/form.html' import render_form %}
{
% from 'bootstrap/nav.html' import render_nav_item %}
{
% from 'bootstrap/utils.html' import render_flashed_messages %}
{
% block head %}
{
{
render_nav_item('index', 'Course Management System') }}
{
% endblock %}
{
% block content %}
<h1>Login</h1>
{
{
render_form(form) }}
{
# Student Register button#}
<br>
<a href="{
{ url_for("register") }}">
<button type="button" class="btn btn-dark btn-sm">Register</button>
</a>
{
% endblock %}
这样一个完整的登录界面以及登录逻辑就完成了，基于上述的讲解，看懂整个项目的代码就很容易了。完整代码获取地址见下方。
5、源码获取
wechat公众号搜索 “一颗程序树”回复关键字0110获取源码git下载地址。