Python flask 结合 BootStrap写的登录页面

wangwei830

已于 2023-03-03 16:24:02 修改

阅读量300

点赞数

分类专栏： Python 文章标签： flask python bootstrap

于 2023-03-03 16:15:55 首次发布

本文链接：https://blog.csdn.net/m0_46426259/article/details/129322511

版权

Python 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Python flask

from flask import Flask,render_template,request
app=Flask(__name__)

@app.route("/")
def f01():
    return render_template("01.初识BootStrap.html")

@app.route("/login",methods=["POST"])
def login():
    username=request.form.get("username")
    password=request.form.get("password")
    print(username,password)
    if username=="admin":
        if password=='admin':
            return "登录成功"
    else:
        return render_template("a01.登录失败.html")
if __name__ == "__main__":
    app.run()

登录页面html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 开发版本 -->
  <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
  <!-- 生成版本 -->
  <!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
  <style>
    .login {
      height: 360px;
      width: 500px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      margin: 0 auto;
      margin-top: 200px;
      padding: 30px;
      box-shadow: 5px 5px 20px #aaa;
    }

    .beiJing {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  
  <!-- <div class="beiJing"> -->
    <div class="login">
      <h2 style="text-align: center">用户登录</h2>
      <br>
      <form action="/login" method="POST">
        <div class="form-group">
          <label for="exampleInputEmail1">用户名</label>
          <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名" name="username">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码" name="password">
        </div>
        <button type="submit" class="btn btn-primary" style="float: right;">登录</button>
      </form>
    </div>
  <!-- </div> -->

</body>

</html>

登录失败页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/">登录失败，点击重新登录！</a>
</body>
</html>