from flask import Flask, render_template, request, redirect, url_for, session
from flask_mysqldb import MySQL
import MySQLdb.cursors
import re

app = Flask[__name__]

app.secret_key = ' key'

# Enter your database connection details below
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'LOGIN'

# Intialize MySQL
mysql = MySQL[app]

@app.route['/login/', methods=['GET', 'POST']]
def login[]:
    # Output message if something goes wrong...
    msg = ''
    return render_template['index.html', msg='']

!DOCTYPE html>

    
        
        Login Form
        
        
    
    
        
            
LOGIN
            
                LOGIN
                REGISTER
            

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thêm đoạn mã sau vào phong cách. css

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #435165;
    margin: 0;
}
.login, .register {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
    margin: 100px auto;
}
.login h1, .register h1 {
    text-align: center;
    color: brown;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}
.login .links, .register .links {
    display: flex;
    padding: 0 15px;
}
.login .links a, .register .links a {
    color: #adb2ba;
    text-decoration: none;
    display: inline-flex;
    padding: 0 10px 10px 10px;
    font-weight: bold;
}
.login .links a:hover, .register .links a:hover {
    color: brown;
}
.login .links a.active, .register .links a.active {
    border-bottom: 3px solid brown;
    color:brown;
}
.login form, .register form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}
.login form label, .register form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color:brown;
    color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}
.login form input[type="submit"], .register form input[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: brown;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}
.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
    background-color:brown;
    transition: background-color 0.2s;
}
.navtop {
    background-color: #2f3947;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
   margin: 0;
    color: #eaebed;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c1c4c8;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #eaebed;
}
body.loggedin {
    background-color: #f3f4f7;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu chúng tôi điều hướng đến http. //máy chủ cục bộ. 5000/đăng nhập/ trong trình duyệt web của bạn, nó sẽ giống như sau

Bây giờ chúng tôi có thể thêm mã xác thực vào tuyến đăng nhập mà chúng tôi đã tạo

# Check if "username" and "password" POST requests exist [user submitted form]
    if request.method == 'POST' and 'username' in request.form and 'password' in request.form:
        # Create variables for easy access
        username = request.form['username']
        password = request.form['password']

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên sử dụng câu lệnh if để kiểm tra xem phương thức được yêu cầu có phải là POST hay không và kiểm tra xem các biến tên người dùng và mật khẩu có tồn tại trong biểu mẫu yêu cầu không

Nếu cả hai đều tồn tại, các biến tên người dùng và mật khẩu sẽ được tạo và liên kết với các biến biểu mẫu

Sau đó thêm đoạn mã sau;

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên sẽ thực thi một truy vấn SQL sẽ truy xuất tài khoản từ bảng biểu mẫu của chúng tôi trong cơ sở dữ liệu MySQL của chúng tôi. Các biến tên người dùng và mật khẩu được liên kết với truy vấn này vì đó là những gì chúng tôi sẽ sử dụng để tìm tài khoản

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Từ đoạn mã trên, nếu tài khoản tồn tại, các biến phiên được khai báo

Các biến phiên này sẽ được người dùng ghi nhớ vì chúng sẽ được sử dụng để xác định xem người dùng có đăng nhập hay không

Nếu tài khoản không tồn tại, chúng tôi chỉ cần xuất lỗi trên biểu mẫu đăng nhập

Để đảm bảo mọi thứ đều hoạt động chính xác, hãy điều hướng đến http. //máy chủ cục bộ. 5000/đăng nhập/

Nhập "test" vào tên người dùng và "1234" vào các trường mật khẩu, sau đó nhấp vào nút Đăng nhập. Bạn sẽ nhận được thông báo xuất ra "Đăng nhập thành công. "

Để người dùng đăng xuất, tất cả những gì chúng ta phải làm là xóa các biến phiên đã được tạo khi người dùng đăng nhập

Thêm mã sau vào chính. tập tin py

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi chúng tôi điều hướng đến URL sau. http. //máy chủ cục bộ. 5000/đăng nhập/đăng xuất sử dụng đã đăng xuất và được chuyển hướng đến trang đăng nhập

Chúng tôi cần một hệ thống đăng ký mà người dùng có thể sử dụng để đăng ký trên.
Chúng ta sẽ tạo một tuyến đăng ký mới và tạo mẫu đăng ký, cùng với biểu mẫu đăng ký, các trường nhập.

Mẫu đăng ký

Thêm mã sau để đăng ký. html

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi chúng tôi đã tạo mẫu đăng ký, chúng tôi cần đăng ký người dùng

Để làm điều này, chúng tôi sẽ tạo tuyến đường "đăng ký" sẽ xử lý yêu cầu POST và chèn một tài khoản mới vào bảng biểu mẫu của chúng tôi, nhưng chỉ khi các trường đã gửi hợp lệ

Thêm mã sau vào chính. tập tin py;

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sẽ tạo tuyến đường "đăng ký" và thêm xác thực sẽ kiểm tra xem tất cả các trường biểu mẫu có tồn tại không. Nếu không, thì xuất ra một lỗi đơn giản

Đoạn mã trên cũng sẽ chọn một tài khoản với các trường tên người dùng và mật khẩu đã gửi

Nếu tài khoản chưa tồn tại, chúng ta có thể tiến hành xác thực dữ liệu đầu vào. Xác thực sẽ kiểm tra xem email đã gửi có hợp lệ hay không và kiểm tra xem tên người dùng chỉ chứa các chữ cái và số

Mã này cũng sẽ chèn một tài khoản mới vào các bảng biểu mẫu của chúng tôi

Để kiểm tra xem nó có hoạt động bình thường hay không, hãy điều hướng đến http. //máy chủ cục bộ. 5000/đăng nhập/đăng ký và điền vào biểu mẫu và nhấp vào nút Đăng ký.
Nếu mọi thứ đều ổn, bạn sẽ nhận được phản hồi sau.

Trang chủ sẽ chỉ giới hạn cho người dùng đã đăng nhập. Người dùng chưa đăng ký không thể truy cập trang này

Thêm mã sau vào chính. tập tin py

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên sẽ tạo hàm home route. Nếu người dùng đã đăng nhập, họ sẽ có quyền truy cập vào trang chủ, nếu không, họ sẽ được chuyển hướng đến trang đăng nhập

Thêm đoạn mã sau vào trang chủ. html

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi cũng cần tạo bố cục cho các trang đăng nhập của mình, chỉnh sửa bố cục. tệp html và thêm

pip install flask-mysqldb

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Người dùng bây giờ sẽ được chuyển hướng đến trang chủ khi họ đăng nhập

Nếu chúng tôi nhập các chi tiết chính xác vào biểu mẫu đăng nhập và nhấp vào nút Đăng nhập, chúng tôi sẽ thấy như sau

Bây giờ chúng tôi đã tạo hệ thống đăng nhập và đăng ký bằng Python Flask và MySQL với các tính năng sau

Làm cách nào để tạo một hệ thống đăng nhập bằng Python bằng MySQL?

Làm cách nào để tạo trang đăng nhập và đăng ký bằng Python và Flask?

Làm cách nào để tạo biểu mẫu đăng ký bằng Python bằng Tkinter và MySQL?