项目结构
app.py
templates/
├─ login.html
└─ index.html
static/
├─ demo.jpg # 你自己放一张图片
└─ demo.mp4 # 你自己放一个视频
1. app.py（Flask 主程序）
运行
from flask import Flask, render_template, request, redirect, url_for, session
app = Flask(__name__)
app.secret_key = 'your_secret_key_here'
# 简单账号密码
USERNAME = 'admin'
PASSWORD = '123456'
@app.route('/')
def index():
if 'logged_in' not in session:
return redirect(url_for('login'))
return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
if username == USERNAME and password == PASSWORD:
session['logged_in'] = True
return redirect(url_for('index'))
else:
return "账号或密码错误，<a href='/login'>返回登录</a>"
return render_template('login.html')
@app.route('/logout')
def logout():
session.clear()
return redirect(url_for('login'))
if __name__ == '__main__':
app.run(debug=True)
2. templates/login.html
预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体验课登录</title>
</head>
<body>
<h1>体验课登录</h1>
<form method="post">
<p>账号：<input type="text" name="username" required></p>
<p>密码：<input type="password" name="password" required></p>
<p><button type="submit">登录</button></p>
</form>
</body>
</html>
3. templates/index.html（首页：文字 + 图片 + 视频）
预览
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体验课首页</title>
</head>
<body>
<h1>编程体验课</h1>
<p><a href="/logout">退出登录</a></p>
<hr>
<h2>课程介绍</h2>
<p>本课程适合零基础入门，通过有趣案例学习编程逻辑。</p>
<p>课程内容包括：基础语法、逻辑训练、小项目实战。</p>
<hr>
<h2>课程图片</h2>
<img src="/static/demo.jpg" width="400" alt="课程图片">
<hr>
<h2>课程视频</h2>
<video width="500" controls>
<source src="/static/demo.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</body>
</html>
—— 本文来自火龙信奥（义乌睿码科技）：义乌青少年信息学奥赛与编程教育平台，专注 CSP-J/S、NOIP、GESP 竞赛培训，线上线下融合教学，助力编程升学。网址：hlcoding.com
