Flask框架快速搭建疫情打卡系统

戏说

    一切还是得从一只蝙蝠说起。在家好好看番剧不香吗?吃啥蝙蝠?ToT,前几天导师问我做不做这个疫情打卡系统,哎~!我又不会那个什么Flask框架为啥找我,我就会个微信小程序还是特简单那种。没办法,还能说什么?学呗,只要学不会,就往死里学,谁叫我高中不努力呢。然后在各大网站搜呀查呀,弄呀。2小时后差不多懂点皮毛了,话不多说正片开始。

安装Flask框架方法

打开cmd后,输入pip install flask。如果你是用pycharm,左上角的File找到setting,然后在Project:XXX里面有个Project Interpreter,你会看见右边有一堆是你已经安装好的库,然后点击更靠右的+写上flask点击install package

壹.界面

    管你什么系统,没有登录岂不是开玩笑?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊情况登记系统</title>
</head>
<body>
	<form action="/login" method="post">
	    <p>用户名: <input type="text" name="username" ></p>
	    <p>密码:&nbsp; <input type="password" name="password"></p>
            <p>身份:<input type="radio" name="Identity" value="0">管理员
                    <input type="radio" name="Identity" value="1">老师
                    <input type="radio" name="Identity" value="2">学生
        </p>
	    <input type="submit" value="提交">
	</form>
</body>
</html>

     你得注意这个<form action="/information" method="post">里面action,他对应的是你写的flask里面操作部分,你可以当做是为了JavaScript提供向导作用的,然后必须跟上method发送到后台,因为你这里是要填写一些详细信息送到后台的老师那里去。然后像学号姓名这些value后面跟上了{{。。。。}}这个东西是从后台发送到前端的数据哈。因为这个学生用户我设计的她们的用户名就是她们各自的学号,然后我的数据库里面是通过核对她们的学号密码之后,提取出来一些个人的基本信息到前端。然后再和其他的填写数据一起传递到一个infomation的表中用来老师查看。

# -*- coding: utf-8 -*-
from flask import Flask, request, render_template
from flask_bootstrap import Bootstrap #Bootstrap这东西确实好用前端好看
from SqlOperations import Login_Sql,Information_Submit,Information_Get#这个是我自己写的库

app = Flask(__name__)#启动Flask
bootstrap=Bootstrap(app)#用bootstrap装修flask
@app.route('/')#flask里面装饰器,就是对应你前端里面写的那个form里面的action
def index():
    return render_template('Login.html')#render_template就是返回页面,你可以当他打开页面

@app.route('/login', methods=['GET', 'POST'])#提交表单之类的操作要加上method
def login():
    input_name     = request.form.get('username')#来自flask里面request,和爬虫re不一样哈
    input_password = request.form.get('password')#主要作用是获取前端的input值
    Radio_Identity = request.form.get("Identity")
    #下面这里是通过判断选择身份的时候进入不同的网页
    if Login_Sql(input_name,input_password,Radio_Identity).LoginSql()=='0':return render_template('Teacher.html',All_information_one=Information_Get().InformationGet_one())
    elif Login_Sql(input_name,input_password,Radio_Identity).LoginSql()=='1':return render_template('Teacher.html',All_information_one=Information_Get().InformationGet_one())

    elif Login_Sql(input_name,input_password,Radio_Identity).LoginSql()!=None:print(Login_Sql(input_name,input_password,Radio_Identity).LoginSql());return render_template('Information.html',Show_basic_information=Login_Sql(input_name,input_password,Radio_Identity).LoginSql());
    else:return 'Bad'

     注意下最后几排这里面的代码return render_temple后面不仅跟上了html,还跟上了一个All_information_one=什么之类,这种格式,他是为了打开页面的时候顺便发送一堆数据,你可以把他当做PHP里面发送json格式。为什么要这么做?前面我已经说了,我通过获取登录的时候学号,来获取数据库中该学生的最基本信息,然后把它们打包发送到填写信息的页面。这样也可以减少学生们的操作。我也是学生知道填写这种东西有多么地DT。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登记详细信息</title>
</head>
<body>

<form action="/information" method="post">
    <div>
        学号:<br>
            <input type="text" name="StudentId" value="{{ Show_basic_information[0] }}"><br>
        姓名:<br>
            <input type="text" name="StudentName" value="{{ Show_basic_information[1] }}"><br>
        性别:<br>
            <input type="text" name="Sex" value="{{ Show_basic_information[2] }}"><br>

        出生年月:<br>
            <input type="date" name="Birthday" id="Birthday" value="{{ Show_basic_information[3] }}"><br>
        手机号:<br>
            <input type="text" name="Telephone" id="Telephone" value="{{ Show_basic_information[4] }}"><br>
        所属班级:<br>
            <input type="text" name="Classroom" id="Classroom" value="{{ Show_basic_information[5] }}"><br>
        紧急联系人:<br>
            <input type="text" name="EmergencyContact" id="EmergencyContact"><br>
        紧急联系人手机:<br>
            <input type="text" name="EmergencyContactTelephone" id="EmergencyContactTelephone"><br>
    </div>
    <div>
        目前身体情况:<br>
            <input type="radio" name="PhysicalCondition" value="0">上报人健康信息正常
            <input type="radio" name="PhysicalCondition" value="1">未发热且隔离
            <input type="radio" name="PhysicalCondition" value="2">发热且隔离
            <input type="radio" name="PhysicalCondition" value="3">疑似
            <input type="radio" name="PhysicalCondition" value="4">确诊
            <input type="radio" name="PhysicalCondition" value="5">疑似转排除
            <input type="radio" name="PhysicalCondition" value="6">已治愈<br>
        隔离方式<br>
            <input type="radio" name="IsolationMethod" value="0">自我隔离
            <input type="radio" name="IsolationMethod" value="1">强制隔离<br>
        隔离时间<br>
            <input type="date" name="SegregationTime" id="SegregationTime"><br>
        隔离地点<br>
            <input type="radio" name="SegregationLocation" value="0">在校
            <input type="radio" name="SegregationLocation" value="1">非在校<br>
        当前体温<br>
            <input type="radio" name="Temperature" value="0">37.5以下
            <input type="radio" name="Temperature" value="1">37.5以上<br>
        持续时间<br>
            <input type="text" name="ContinuousTime" id="continuousTime">天<br>
        是否咳嗽<br>
            <input type="radio" name="Cough" value="0">是
            <input type="radio" name="Cough" value="1">否<br>
        密切接触人员信息<br>
            <input type="text" name="CloslyPersonnel" id="CloslyPersonnel">

    </div>
    <div>
        位置是否有变化<br>
            <input type="radio" name="Location" value="0">是
            <input type="radio" name="Location" value="1">否<br>
        所在区域<br>
            <input type="radio" name="Area" value="0">学校内
            <input type="radio" name="Area" value="1">在途
            <input type="radio" name="Area" value="2">其他区域<br>
        详细地址<br>
            <input type="text" name="DetailedInformation" id="DetailedInformation"><br>
    </div>
    <div>
        其他说明事项<br>
            <input type="text" name="OtherInstructions" id="OtherInstructions">
    </div>
    <input type="submit" value="提交">

</form>

</body>
</html>

     然后其他input里面value值里面跟着0,1这些数字是一种代号用来存储数据库的时候减少里面的空间。通过数据库返回到前端的时候用一些函数再把它们以文字的形式展示。实例如下。这里是通过判断0或1来决定前端展示的时候显示性别是什么。由于pymysql的返回里面的fetchall只能返回元组类型,而元组类型不可改,所以我选择先for循环存入列表,然后if判断修改列表特定元素。最后return给前端。

        if self.Radio_Identity=='2':
            if self.cur.execute('''SELECT Account,StudentName,Sex,Birthday,Telephone,Classroom,Departments FROM student_table WHERE Account='%s' AND Password='%s';''' % (self.input_name,self.input_password)):
                for i in self.cur.fetchall():
                    for k in i:
                        basic_information.append(k)
                if basic_information[2]=='0':basic_information[2]='男';
                else:basic_information[2]='女';
                self.conn.commit();self.conn.close();return basic_information
            else:
                self.conn.commit();self.conn.close();return 'BAD'

 然后在提交所有大表单的时候为了方便,我们把它们一家10几口人打包列表送到后台料理。


@app.route('/information', methods=['GET', 'POST'])
def Information():

    All_Informations = []
    All_Informations.append(request.form.get('StudentId'))
    All_Informations.append(request.form.get('StudentName'))
    All_Informations.append(request.form.get('Sex'))
    All_Informations.append(request.form.get('Birthday'))
    All_Informations.append(request.form.get('Telephone'))
    All_Informations.append(request.form.get('Classroom'))
    All_Informations.append(request.form.get('EmergencyContact'))
    All_Informations.append(request.form.get('EmergencyContactTelephone'))

    All_Informations.append(request.form.get('IsolationMethod'))
    All_Informations.append(request.form.get('SegregationTime'))
    All_Informations.append(request.form.get('SegregationLocation'))
    All_Informations.append(request.form.get('Temperature'))
    All_Informations.append(request.form.get('ContinuousTime'))
    All_Informations.append(request.form.get('Cough'))
    All_Informations.append(request.form.get('CloslyPersonnel'))

    All_Informations.append(request.form.get('Location'))
    All_Informations.append(request.form.get('Area'))
    All_Informations.append(request.form.get('DetailedInformation'))
    All_Informations.append(request.form.get('OtherInstructions'))


    if Information_Submit(All_Informations).InformationSubmit()==None:return 'good'
    else:return 'bad'

还有一个是那个老师们那里要很方便的查看是不是,老师用户登录后发送所有学生的登录信息到teacher的界面。

@app.route('/InformationTable', methods=['GET', 'POST'])
def InformationTable():
    return render_template('Teacher.html',All_information=Information_Get().InformationGet())

if __name__ == '__main__':
    app.run(debug=True)#众所周知debug调试,不加这一句也不是不行

  {% for item in All_information_one %}这里{%   %}可以说是为了变量而存在,和JavaScript里面{{item.XXX}}差不多原理,通过后台发送的元组转化为列表后传递到前端,因为数据不止一行,所以不断循环。切记最后要跟上 {% endfor %}不然谁知道你哪里结束?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <form action="/InformationTable" method="GET">
    <table>
     <tr>
        <td>Id</td> <td>学号</td> <td>姓名</td> <td>性别</td> <td>出生年月</td> <td>手机号</td> <td>所属班级</td> <td>紧急联系人</td> <td>紧急联系人手机</td>

        <td>目前身体情况</td> <td>隔离方式</td> <td>隔离时间</td> <td>隔离地点</td> <td>当前体温</td> <td>持续时间</td> <td>是否咳嗽</td> <td>密切接触人员信息</td>

        <td>位置是否有变化</td> <td>所在区域</td> <td>详细地址</td> <td>其他说明事项</td>
    </tr>
    {% for item in All_information_one %}
        <tr>
                <td>{{ item[0] }}</td>
                <td>{{ item[1] }}</td>
                <td>{{ item[2] }}</td>
                <td>{{ item[3] }}</td>
                <td>{{ item[4] }}</td>
                <td>{{ item[5] }}</td>
                <td>{{ item[6] }}</td>
                <td>{{ item[7] }}</td>
                <td>{{ item[8] }}</td>

                <td>{{ item[11]}}</td>
                <td>{{ item[12]}}</td>
                <td>{{ item[13]}}</td>
                <td>{{ item[14]}}</td>
                <td>{{ item[15]}}</td>
                <td>{{ item[16]}}</td>
                <td>{{ item[19]}}</td>
                <td>{{ item[20]}}</td>

                <td>{{ item[21] }}</td>
                <td>{{ item[22] }}</td>
                <td>{{ item[23] }}</td>
                <td>{{ item[24] }}</td>
        </tr>
      {% endfor %}
    </table>
	</form>


</body>
</html>

数据库

     关于数据库的设计还是很传统的多表设计,一堆信息放在一个表中,我怕日积月累不卡死才怪,分开装你好我好大家好。

连接数据库操作,有人问为啥不用flask_sql,哈哈......不会,pymysql用习惯了。

import pymysql


class Login_Sql:
    def __init__(self,input_name,input_password,Radio_Identity):
        self.conn           = (pymysql.connect("localhost", "root", "root", "scr"))  # 连接数据库,提供自身账户密码数据库名
        self.cur            = self.conn.cursor()
        self.input_name     = input_name
        self.input_password = input_password
        self.Radio_Identity = Radio_Identity
    def LoginSql(self):  # 保存签到地点到数据库的函数
        basic_information=[]
        if self.Radio_Identity=='1':
            if self.cur.execute('''SELECT * FROM techer_table WHERE Account='%s' AND Password='%s';''' % (self.input_name,self.input_password)):

                self.conn.commit();self.conn.close();return self.cur.fetchall()
            else:
                self.conn.commit();self.conn.close();return None
        if self.Radio_Identity=='2':
            if self.cur.execute('''SELECT Account,StudentName,Sex,Birthday,Telephone,Classroom,Departments FROM student_table WHERE Account='%s' AND Password='%s';''' % (self.input_name,self.input_password)):
                for i in self.cur.fetchall():
                    for k in i:
                        basic_information.append(k)
                if basic_information[2]=='0':basic_information[2]='男';
                else:basic_information[2]='女';
                self.conn.commit();self.conn.close();return basic_information
            else:
                self.conn.commit();self.conn.close();return 'BAD'

 最后用那个HTML最最常用之一的bootstrap,在flask里面有个flask_bootstrap来一点点修饰就ok了

后序

    鄙人仅为一名普普通通大二学生,才学浅出,来此各地高人聚集处书写浅见,还望各位前辈高人多多指点海涵。我们诚邀各地有志之士加入我们的代码学习群交流:871352155(无论你会C/C++还是Java,Python还是PHP......有兴趣我们都欢迎你的加入,不过还请各位认真填写加群信息。群内目前多为大学生,打广告的先生女士就请不要步足了。我们希望有远见卓识的前辈能为即将步入社会的初犊提出建议指引方向。)
 

发布了13 篇原创文章 · 获赞 39 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43341045/article/details/104594558