------------------------------------(分割線)-----------------------------------------------------------------------------------------------------------
項目環境: pycharm 2018 專業版 win10 專業版 python 3.7
項目部署截圖
前端代碼:
regist.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>登錄頁面練習</title> <style> body{ background-color: rgb(217, 235, 250); } .loginn{ background-color: white; height: 320px; width: 240px; padding: 25px; margin-top: 150px; margin-left:60%; border-radius: 25px; box-shadow: 4px 4px 8px rgba(0, 0, 0,0.5); } .loginn>p{ margin-left: 40%; margin-top: 10px; color:black; font-size: 20px; } .LOGB{ border-collapse: separate; border-radius: 15px; border: 1px solid rgb(167, 160, 160); text-align: right; width: 95%; height: 30px; } #log1{ text-align: center; width: 180px; background-color: rgb(137, 202, 180); margin-left: 10%; border-radius: 25px; outline: none; } .LOGE{ font-size: 10px; margin-left: 30%; margin-bottom: 10%; } .input2{ outline: none; border: 0px; margin-right: 20%; } </style> </head> <body> <div class="loginn"> <p>注冊</p> <form action="http://127.0.0.1:5000/rsuccess/", method="post"> <table class="LOGB" cellspacing="0"> <tr> <td>用戶名: </td> <td><input type="text" placeholder="姓名" class="input2" name="rename"></td> </tr> </table> <br> <table class="LOGB" cellspacing="0" > <tr> <td>密碼: </td> <td><input type="password" placeholder="你的密碼" class="input2" name="repwd"></td> </tr> </table> <br> <table class="LOGB" cellspacing="1"> <tr> <td>+86:</td> <td><input type="text" maxlength="11" placeholder="手機號碼" class="input2" ></td> </tr> </table> <br> <table class="LOGB" cellspacing="0"> <tr> <td>驗證碼:</td> <td><input type="text" style="border:0"class="input2" ></td> </tr> </table> <br> <a href=""><button id="log1">注冊</button></a> <div class="LOGE"> <p><a href="{{ url_for('login_html') }}">已有賬號？請登錄</a></p> </div> </form> </div> </body> </html>
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>登錄頁面練習</title> <style> body{ background-color: rgb(217, 235, 250); } .loginn{ background-color: white; height: 320px; width: 240px; padding: 25px; margin-top: 150px; margin-left:60%; border-radius: 25px; box-shadow: 4px 4px 8px rgba(0, 0, 0,0.5); } .loginn>p{ margin-left: 40%; margin-top: 10px; color:black; font-size: 20px; } .LOGB{ border-collapse: separate; border-radius: 15px; border: 1px solid rgb(167, 160, 160); text-align: right; width: 98%; height: 40Px;; } .LOGD{ width: 80%; height: 35px; margin-left: 8%; border-radius: 25px; background-color: rgb(160, 207, 192); border: 1px solid wheat; outline: none; } .LOGE{ font-size: 10px; margin-left: 30%; margin-bottom: 10%; } .input2{ outline: none; border: 0px; margin-right: 20%; } </style> </head> <body> <div class="loginn"> <p>登錄</p> <br> <form action="http://127.0.0.1:5000/lsuccess/" method="post"> <table class="LOGB" cellspacing="0"> <tr> <td>用戶名: </td> <td><input type="text" placeholder="姓名" class="input2" name="username"></td> </tr> </table> <br> <table class="LOGB" cellspacing="0" > <tr> <td>密碼: </td> <td><input type="password" placeholder="你的密碼" class="input2" name="password"></td> </tr> </table> <br> <br> <div class="LOGD"> <a href=""><button class="LOGD" >登錄</button></a> </div> <br> <div class="LOGE"> <p>沒有賬號？<a href="{{ url_for('regist_html') }}">立即注冊</a></p> </div> </form> </div> </body> </html>
前端不是我寫的，是一位小姐姐寫的~~
-------------------------------------------------------------------------------------------------------------------------------
from flask import Flask ,request ,render_template
from flask_sqlalchemy import SQLAlchemy
import config
app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)
#對flask進行一個初始化
#創建一個simple表
class Simple(db.Model):
__tablename__ = 'simple'
id = db.Column(db.Integer ,primary_key=True , autoincrement=True)
user = db.Column(db.String(100), nullable=False,unique=True)
pwd = db.Column(db.CHAR(50) , nullable=False ,unique=True)
db.create_all()
@app.route('/')
# -----------------------------------------------------------
def index():
return "這是一個首頁"
@app.route('/lsuccess/', methods=['post' ,'GET'])
def login():
if request.method == "POST":
user = request.form.get('username')
pwd = request.form.get('password')
if user == Simple.user and pwd == Simple.pwd:
return "參數請求不正常"
else:
result = Simple.query.filter(Simple.user == user and Simple.pwd == pwd).first()
return (" username = %s pwd = %s" %(result.user ,result.pwd))
if request.method != 'get':
return "前端的鍋"
@app.route('/rsuccess/',methods=['POST' ,'GET'])
def regist_function():
if request.method =="POST":
user = request.form.get('rename')
password = request.form.get('repwd')
simple1 = Simple(user=user, pwd=password)
db.session.add(simple1)
db.session.commit()
return ("注冊成功 賬號 = %s 密碼= %s" % (user, password))
# pass
@app.route('/regist/')
def regist_html():
return render_template('regist.html')
@app.route('/login/')
def login_html():
return render_template('login.html')
if __name__ == '__main__':
app.run(debug = True)
config.py
DIALECT = 'mysql'
DRIVER = 'pymysql'
USERNAME = 'root'
PASSWORD = 'root'
HOST = 'localhost'
PORT = '3306'
DATABASE = 'test'
SQLALCHEMY_DATABASE_URI = "{}+{}://{}:{}@{}:{}/{}?charset=utf8".format(DIALECT, DRIVER, USERNAME, PASSWORD, HOST, PORT, DATABASE)
SQLALCHEMY_TRACK_MODIFICATIONS = False
建議寫后端的人，以后和前端進行拼接任務的，一定要和前端的人商量好，這個頁面該怎么怎么跳轉，到底是誰來實現。實現之后又是什么樣，一定要討論好，不能討論不好，上去就開始干。。。。。。前端和后端真是一個相互仇恨的組合，今天讓小姐姐加上在注冊密碼的時候兩次密碼不一致這個用js可以實現校驗的功能，小姐姐看我的眼神就不好了。。。。 逃。。。今天就先記錄那么多吧