Login

## 提示词采用大模型：通义千问（代码模式） ``` 实现一个用户登录的Flask项目，要求： ## UI框架 - 采用bootstrap 5.3.x版本 ## 登录框 - 手机号输入框 - 密码输入框 - 登录按钮 ## 服务端 - 添加一条测试账号，包括ID，账号名和密码 - 登录时验证账号名和密码，验证失败返回错误信息，验证成功跳转到登录成功页面，显示用户信息 ## 其它 - 页面屏幕居中 - 采用响应式页面设计 ``` ## 输出为了实现这个用户登录的Flask项目，我们需要创建一个包含前端和后端逻辑的完整应用。以下是完整的代码示例： 1. 创建Flask应用。 2. 使用Bootstrap 5.3.x构建响应式登录界面。 3. 实现基本的用户认证逻辑。首先，确保你已经安装了Flask。如果没有安装，可以通过pip进行安装： ```bash pip install Flask ``` 接下来是完整的artifact代码： ``` from flask import Flask, render_template, request, redirect, url_for, session, flash app = Flask(__name__) app.secret_key = 'your_secret_key' # 测试账号 test_user = { 'id': 1, 'username': 'testuser', 'password': 'testpass' } @app.route('/') def home(): return redirect(url_for('login')) @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] if username == test_user['username'] and password == test_user['password']: session['user_id'] = test_user['id'] session['username'] = test_user['username'] return redirect(url_for('success')) else: flash('Invalid credentials. Please try again.') return render_template('login.html') @app.route('/success') def success(): if 'user_id' in session: user_info = { 'id': session['user_id'], 'username': session['username'] } return render_template('success.html', user=user_info) else: return redirect(url_for('login')) if __name__ == '__main__': app.run(debug=True) ``` 同时，我们还需要两个HTML模板文件：`login.html` 和 `success.html`。这些文件应该放在名为 `templates` 的文件夹中。 ### templates/login.html ```html Login

Login

{% with messages = get_flashed_messages() %} {% if messages %}

{{ message }}

{% endif %} {% endwith %}

``` ### templates/success.html ```html Success

Welcome {{ user.username }}!

Your User ID is: {{ user.id }}

Logout

``` 最后，确保你的项目结构如下： ``` /flask_login_app /templates login.html success.html app.py ``` 运行 `app.py` 后，你可以通过浏览器访问 `http://127.0.0.1:5000/login` 来查看登录页面。使用测试账号 `testuser` 和密码 `testpass` 进行登录即可看到成功页面。 ## 效果图 ![image](https://gitee.com/HelloLearning/resources/raw/master/blog-images/flask-ui-login.png)

用Flask框架实现简单的用户登录