各位好!目前计划从基础写起,然后作为WEB入门,最合适的就是实现登录页面,因此选择了这个主题:
web实战基础(FLASK篇):一步步实现登录界面和消息快闪功能(上篇)
这里就不累赘了,直接简单粗暴的记录一步步从零开始布局web页面的过程,希望大家喜欢和点赞,感谢!
一、搭建最简单的FLASK程序
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return 'hello flask'
if __name__ == '__main__':
app.run()
最后运行的界面如下:
二、搭建render渲染的html页面
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
最后运行的效果如下:
三、传递参数的html页面
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
username = '王五'
return render_template('index.html',username=username)
if __name__ == '__main__':
app.run()
index.html页面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello HTML!</h1>
<h1>{{ username }}</h1>
</body>
</html>
最后运行的效果如下:
四、传递动态参数的html页面
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/<username>')
def index(username):
print(username)
return render_template('index.html',username=username)
if __name__ == '__main__':
app.run()
最后运行的效果如下:
五、登录界面实现
main.py
from flask import Flask,render_template,request,flash
app = Flask(__name__)
app.config["SECRET_KEY"] = 'dsdlfsdflsdfsdfdsf'
@app.route('/',methods=['GET','POST'])
def index():
username = ''
if(request.method=='POST'):
username = request.form['username']
if request.form['username'] != 'admin' or \
request.form['password'] != 'secret':
flash('用户名或密码错误')
else:
flash(username+'登录成功')
return render_template('index.html',username=username)
if __name__ == '__main__':
app.run(debug=True)
index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello HTML!</h1>
<h1>登录页面</h1>
<form method="post">
<label>用户名:</label>
<input type="text" name="username" value="{{username}}"><br>
<label>密 码:</label>
<input type="password" name="password"><br>
<input type="submit" value="登录"><br>
</form>
<ul class=flashes>
{% for message in get_flashed_messages() %}
<li>{{ message }}</li>
{% endfor %}
</ul>
</body>
</html>
最后运行的效果如下:
登录成功的页面:
登录失败的页面:
这是上篇,后面讲分别介绍:
中篇:与数据库对接,实现数据的后台存储和管理
下篇:美化UI界面,使用CSS样式构建简洁的UI
希望大家的持续关注,谢谢!