flask学习四——bootstrap介绍
文章目录
前言
本章简单介绍一个前端开发框架：Bootstrap，并实现一个成绩管理网站。
一、bootstrap简单介绍
Bootstrap是一个流行的前端开发框架，它提供了一组CSS样式和JavaScript组件，用于构建响应式、现代化的网页和Web应用程序。
二、成绩管理网站实现
2.1. 构建所需的页面要素
实现一个可以登录、退出、成绩展示、成绩提交的web页面
import flask
from flask import Flask, render_template, request, session, redirect, url_for
import pandas as pd
import openpyxl
app = Flask("成绩管理系统")
app.config["SECRET_KEY"] = "uuuunnnnnnhh"
"""
在Flask应用中，app.config["SECRET_KEY"]主要用于加密会话数据和cookie等敏感信息。
所谓的“SECRET KEY”（密钥）是一个随机的字符串，通常由一些随机字符和数字组成。
将SECRET KEY存储在配置中是为了方便在应用的不同部分中引用。
"""
@app.route("/")
def index():
return render_template("index.html")
@app.route("/login", methods=["POST", "GET"])
def login():
if request.method == "POST":
user_name = request.form.get("user_name")
password = request.form.get("password")
if user_name == "wht" and password == "5213140":
flask.session["user_name"] = "wht"
return flask.redirect(flask.url_for("index"))
return render_template(("login.html"))
@app.route("/logout")
def logout():
session.pop("user_name")
return redirect(url_for("index"))
@app.route("/show_grade")
def show_grade():
if "user_name" not in session:
return redirect(url_for("index"))
df = pd.read_excel("学生成绩表.xlsx")
return render_template("show_grade.html", table_html=df.to_html(classes="table table-sm table-hover"))
@app.route("/submit_grade",methods= ["POST","GET"])
def submit_grade():
if "user_name" not in session:
return redirect(url_for("index"))
if request.method == "POST":
name = request.form.get("name")
yuwen = request.form.get("yuwen")
shuxue = request.form.get("shuxue")
yingyu = request.form.get("yingyu")
df = pd.read_excel("学生成绩表.xlsx")
new_row = pd.DataFrame({
"姓名":[name],
"语文成绩":[yuwen],
"数学成绩":[shuxue],
"英语成绩":[yingyu],
})
df = pd.concat([new_row,df])
df.to_excel("学生成绩表.xlsx",index= False)
return redirect(url_for("show_grade"))
return render_template("submit_grade.html")
app.run(debug=True)
2.2. 写下对应的html文件
2.2.1. 引入bootstrap文件
回到bootstrap官网，将入门模板复制到新建的index.html文件
根据对应的url地址下载bootstrap文件，放到static目录下
2.2.2. 拆分为header.html和footer.html两个首尾文件
将网页的头部和尾部拆分成独立的文件是一种常见的做法，可以提高代码的可维护性和重用性。
header.html
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
<script src="/static/bootstrap/jquery.slim.min.js"></script>
<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #ed969e;">
<a class="navbar-brand" href="/">成绩管理</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/submit_grade">成绩录入</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/show_grade">成绩展示</a>
</li>
</ul>
{% if "user_name" not in session %}
<a class="nav-link" href="/login">登录</a>
{% else %}
<a class="nav-link" href="/logout">退出</a>
{% endif %}
</div>
</nav>
这个< nav > < /nav >导航栏组件也是来自bootstrap，然后再根据具体需要对代码稍加修改就行。
footer.html
</body>
</html>
2.2.3. index.html
{% include 'header.html' %}
<div class="jumbotron">
{% if "user_name" not in session %}
<h1>欢迎来到成绩管理系统，请登录后使用</h1>
{% else %}
<h1>欢迎来到成绩管理系统,
登录成功,用户名是{{ session["user_name"]}}</h1>
{% endif %}
</div>
{% include 'footer.html' %}
2.2.4. login.html
实现登录要求
{% include 'header.html' %}
<div class="container">
<div class="jumbotron">
<h1>---请登陆系统---</h1>
<form action="/login" method="post">
<div class="form-group">
<label for="exampleInputUsername">用户名</label>
<input type="text" name="user_name" class="form-control" id="exampleInputUsername"
aria-describedby="usernameHelp">
<small id="usernameHelp" class="form-text text-muted">请输入用户名</small>
</div>
<div class="form-group">
<label for="exampleInputPassword">密码</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword">
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
{% include 'footer.html' %}
2.2.5. show_grade.html
{% include 'header.html' %}
<div class="container">
<div class="jumbotron">
<h1>如下为学生成绩表格：</h1>
</div>
{{table_html | safe}}
</div>
{% include 'footer.html' %}
2.2.6. submit_grade.html
{% include 'header.html' %}
<div class="container">
<div class="jumbotron">
<h1>请输入成绩</h1>
<form action="/submit_grade" method="post">
<div class="form-group">
<label for="exampleInputName">请输入姓名</label>
<input type="text" name="name" class="form-control" id="exampleInputName"
aria-describedby="nameHelp">
<small id="nameHelp" class="form-text text-muted">请输入学生的姓名</small>
</div>
<div class="form-group">
<label for="exampleInputyuwen">语文成绩</label>
<input type="text" name="yuwen" class="form-control" id="exampleInputyuwen">
</div>
<div class="form-group">
<label for="exampleInputshuxue">数学成绩</label>
<input type="text" name="shuxue" class="form-control" id="exampleInputshuxue">
</div>
<div class="form-group">
<label for="exampleInputyingyu">英语成绩</label>
<input type="text" name="yingyu" class="form-control" id="exampleInputyingyu">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
{% include 'footer.html' %}
三、网站展示
回到grade_app.py文件，运行
登录（只有登陆后才能看到成绩表并实行成绩提交操作）：
登录成功：
查看成绩表：
提交成绩：
总结
本章简单记录了一下bootstrap这个十分实用的前端开发框架，同时也实现了一个简单的成绩管理页面的开发。
道者同于道，德者同于德，失者同于失。
–2023-10-3 进阶篇
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
