web实战基础（FLASK篇）:一步步实现登录界面和消息快闪功能（上篇）

最新推荐文章于 2022-02-11 18:29:16 发布

dhjabc_1

最新推荐文章于 2022-02-11 18:29:16 发布

阅读量610

点赞数 3

分类专栏： web网站项目实战（python版）文章标签： web2.0 python

本文链接：https://blog.csdn.net/dhjabc_1/article/details/107034856

版权

web网站项目实战（python版）专栏收录该内容

12 篇文章 9 订阅

订阅专栏

各位好！目前计划从基础写起，然后作为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

希望大家的持续关注，谢谢！

dhjabc_1

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web实战基础（FLASK篇）:一步步实现登录界面和消息快闪功能（上篇）

各位好！目前计划从基础写起，然后作为WEB入门，最合适的就是实现登录页面，因此选择了这个主题：web实战基础（FLASK篇）:一步步实现登录界面和消息快闪功能（上篇）这里就不累赘了，直接简单粗暴的记录一步步从零开始布局web页面的过程，希望大家喜欢和点赞，感谢！一、搭建最简单的FLASK程序from flask import Flaskapp = Flask(__name__)@app.route('/')def index(): return 'hello flask'i
复制链接

扫一扫

专栏目录