Day 27 專案實作簡易的登入頁面

14th鐵人賽

jddj42840

團隊imac_Big3

2022-10-12 13:39:11

1293 瀏覽

分享至

Day 27 專案實作簡易的登入頁面

我們今天要將之前學到的技，做出一個簡易的登入頁面，將我們前端輸入的資料先經過後端在寫進去我們的資料庫

好我們先寫簡易的前端頁面

index.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>index</title>
</head>

<body>
    <h1> Hi 請註冊你的帳號 </h1>
    <form action="/user" method="post">
        username : <input name="username" />
        <br>
        password : <input name="password" />
        <br>
        <input type="submit">
    </form>
</body>

</html>

user.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>user</title>
</head>

<body>
    <h1>歡迎 {{username}}</h1>
    <h2>帳號註冊成功</h2>

</body>

</html>

接下來是後端我們的 app.py,我們會有一個註冊頁面與註冊成功後顯示頁面

import pymongo
from flask import *
client = pymongo.MongoClient(
    "mongodb+srv://root:0000@cluster0.goald.mongodb.net/?retryWrites=true&w=majority")
print("success")
app = Flask(
    __name__,
    static_folder="public",
    static_url_path="/"
)
app.secret_key = "key22"

db = client.test


@app.route("/index")
def index():
    return render_template("index.html")


@app.route("/user", methods=["POST"])
def user():
    name = request.form.get("username")
    session["username"] = name
    passwd = request.form.get("password")
    collection = db.website
    
    collection.insert_one({
        "username": name,
        "password": passwd
    })

    return render_template("user.html", username=name)


app.run(port=5000, debug=True)

我們看一下成果