开发环境 : Linux系统，语言： Python，Html， Css
利用Flask实现一个WatchList的Web程序，部分代码和图片都是来自：Flask 入门教程，我在此基础上修改了一下，最后的效果如下：
1. 安装 Flask和一些基本插件
pip install flaskpip install Flask-SQLAlchemypip install pymysql如果安装比较慢的话，可以加上 -i https://pypi.tsinghua.edu.cn/simple
2. 创建项目结构
创建一个文件夹来存放你的项目文件。项目的基本结构如下：
WatchList/{static/images style.css} {template/index.html login.html} app.py 3.在WatchList目录下创建虚拟环境并进入虚拟环境
python3 -m venv envscoure ./env/Scripts/activate4. 编写主应用文件 (app.py)
在 WatchList目录下创建一个名为 app.py 的文件，并编写以下代码：
from flask import Flask, render_template, url_for, redirect, request, flashfrom flask_sqlalchemy import SQLAlchemyimport clickapp = Flask(__name__)app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:123456@localhost/watchlist'app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Falseapp.secret_key = 'your_secret_key' # 用于闪现消息db = SQLAlchemy(app)# 创建数据库命令@app.cli.command()def forge(): """Generate fake data.""" db.create_all() name = 'BrokenOfViolet' movies = [ {'title': 'My Neighbor Totoro', 'year': '1988'}, {'title': 'Dead Poets Society', 'year': '1989'}, {'title': 'A Perfect World', 'year': '1993'}, {'title': 'Leon', 'year': '1994'}, {'title': 'Mahjong', 'year': '1996'}, {'title': 'Swallowtail Butterfly', 'year': '1996'}, {'title': 'King of Comedy', 'year': '1999'}, {'title': 'Devils on the Doorstep', 'year': '1999'}, {'title': 'WALL-E', 'year': '2008'}, {'title': 'The Pork of Music', 'year': '2012'}, ] user = User(username=name, password='password123') # 设定一个默认密码 db.session.add(user) for m in movies: movie = Movie(title=m['title'], year=m['year']) db.session.add(movie) db.session.commit() click.echo('Done.')# 数据库模型class User(db.Model): username = db.Column(db.String(20), primary_key=True) password = db.Column(db.String(20))class Movie(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(60)) year = db.Column(db.String(4))# 主页路由@app.route('/')def index(): user = User.query.first() # 修复此处变量名 movies = Movie.query.all() return render_template("index.html", user=user, movies=movies)# 404 错误处理路由@app.errorhandler(404)def page_not_found(e): user = User.query.first() return render_template('404.html', user=user), 404# 登录路由@app.route('/login', methods=['GET', 'POST'])def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] user = User.query.filter_by(username=username).first() # 比对用户输入的密码和数据库中存储的密码 if user and user.password == password: flash('Login successful!', 'success') return redirect(url_for('index')) # 假设登录成功后重定向到index else: flash('Invalid username or password.', 'danger') return render_template('login.html')if __name__ == '__main__': app.run(debug=True)5. 创建 HTML 模板文件
主页templates/index.html
在 templates 目录中创建一个名为 index.html 的文件，编写一个简单的 HTML 页面：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}" type="text/css"> <title>{{ name }}'s Watchlist</title></head><body> <h2>{{ name }}'s Watchlist <img alt="Avatar" class="avator" src="{{url_for('static',filename='images/avatar.png')}}"> </h2> {# 使用 length 过滤器获取 movies 变量的长度 #} <p>{{ movies|length }} Titles</p> <ul class="movie-list"> {% for movie in movies %} {# 迭代 movies 变量 #} <li>{{ movie.title }} - {{ movie.year }}</li> {# 等同于 movie['title'] #} {% endfor %} {# 使用 endfor 标签结束 for 语句 #} </ul> <img alt="Totoro" class="totoro" src="{{url_for('static',filename='images/totoro.gif')}}"</body></html>登陆界面templates/login.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"></head><body> <div class="login-container"> <h2>Login</h2> {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} <ul class="flashes"> {% for category, message in messages %} <li class="{{ category }}">{{ message }}</li> {% endfor %} </ul> {% endif %} {% endwith %} <form method="post" action="{{ url_for('login') }}"> <div class="input-group"> <label for="username">Username</label> <input type="text" id="username" name="username" required> </div> <div class="input-group"> <label for="password">Password</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Login</button> </form> </div></body></html>6. 创建静态文件 (static/style.css)
在 static 目录中创建一个名为 style.css 的文件，添加一些简单的 CSS 样式：
/* 页面整体 */body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}/* 页脚 */footer { color: #888; margin-top: 15px; text-align: center; padding: 10px;}/* 头像 */.avatar { width: 40px;}/* 电影列表 */.movie-list { list-style-type: none; padding: 0; margin-bottom: 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}.movie-list li { padding: 12px 24px; border-bottom: 1px solid #ddd;}.movie-list li:last-child { border-bottom:none;}.movie-list li:hover { background-color: #f8f9fa;}/* 龙猫图片 */.totoro { display: block; margin: 0 auto; height: 100px;}.login-container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 300px; text-align: center;}h2 { margin-bottom: 20px;}.input-group { margin-bottom: 15px; text-align: left;}.input-group label { display: block; margin-bottom: 5px;}.input-group input { width: 100%; padding: 8px; box-sizing: border-box;}button { width: 100%; padding: 10px; background-color: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;}button:hover { background-color: #0056b3;}.flashes { list-style-type: none; padding: 0;}.flashes li { padding: 10px; margin-bottom: 10px; border-radius: 5px;}.flashes li.success { background-color: #d4edda; color: #155724;}.flashes li.danger { background-color: #f8d7da; color: #721c24;}
6. 运行应用
在终端中，导航到 WatchList 目录并运行应用。因为在app.py中定义了forge函数用于提交数据，所以进行如下操作：
flask forge最后直接运行 app.py 或者执行 flask run
