Flask全栈开发案例(一) Flask+bootstrap+sqlite 学校选课管理系统(demo版)

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 %}
1
2
3
4
5
6
7
8
9
10
11

选课界面默认展示全部已开设课程列表，显示课程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 %}
1
2
3
4
5
6
7
8
9
10

学生成绩录入根据学生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'})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

通过上述代码，我们定义了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)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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 %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

这样一个完整的登录界面以及登录逻辑就完成了，基于上述的讲解，看懂整个项目的代码就很容易了。完整代码获取地址见下方。

5、源码获取

wechat公众号搜索 “一颗程序树”回复关键字0110获取源码git下载地址。