flask，mysql，html，js如何实现VIP会员可以观看视频但普通会员不可以观看

woxiwoxi123 / 2024-07-17 / 原文

要实现VIP会员可以观看视频但普通会员不可以观看的功能，可以使用Flask作为后端框架，MySQL作为数据库，HTML和JavaScript作为前端。以下是一个简单的实现步骤：

数据库设计：
- 创建一个用户表，包含用户ID、用户名、密码、会员类型（VIP或普通）等字段。
- 创建一个视频表，包含视频ID、视频名称、视频路径等字段。
Flask后端：
- 创建Flask应用，设置路由和视图函数。
- 实现用户登录和注册功能。
- 实现视频播放功能，根据用户类型判断是否允许播放。
HTML和JavaScript前端：
- 创建登录和注册页面。
- 创建视频播放页面，根据后端返回的结果显示或隐藏视频。

以下是一个简单的示例代码：

数据库设计

-- 用户表
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(100) NOT NULL,
    role ENUM('VIP', '普通') NOT NULL
);

-- 视频表
CREATE TABLE videos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    path VARCHAR(255) NOT NULL
);

Flask后端

from flask import Flask, request, render_template, redirect, url_for, session
import mysql.connector

app = Flask(__name__)
app.secret_key = 'your_secret_key'

# 数据库连接配置
db = mysql.connector.connect(
    host="localhost",
    user="your_username",
    password="your_password",
    database="your_database"
)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        cursor = db.cursor()
        cursor.execute("SELECT * FROM users WHERE username = %s AND password = %s", (username, password))
        user = cursor.fetchone()
        if user:
            session['user_id'] = user[0]
            session['role'] = user[3]
            return redirect(url_for('videos'))
        else:
            return "登录失败，请检查用户名和密码"
    return render_template('login.html')

@app.route('/videos')
def videos():
    if 'user_id' not in session:
        return redirect(url_for('login'))
    cursor = db.cursor()
    cursor.execute("SELECT * FROM videos")
    videos = cursor.fetchall()
    return render_template('videos.html', videos=videos)

@app.route('/play/<int:video_id>')
def play(video_id):
    if 'user_id' not in session:
        return redirect(url_for('login'))
    if session['role'] == '普通':
        return "您不是VIP会员，无法观看此视频"
    cursor = db.cursor()
    cursor.execute("SELECT * FROM videos WHERE id = %s", (video_id,))
    video = cursor.fetchone()
    if video:
        return render_template('play.html', video=video)
    else:
        return "视频不存在"

if __name__ == '__main__':
    app.run(debug=True)

HTML和JavaScript前端

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>欢迎来到视频网站</h1>
    <a href="/login">登录</a>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <h1>登录</h1>
    <form action="/login" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

videos.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频列表</title>
</head>
<body>
    <h1>视频列表</h1>
    <ul>
        {% for video in videos %}
            <li><a href="/play/{{ video[0] }}">{{ video[1] }}</a></li>
        {% endfor %}
    </ul>
</body>
</html>

play.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放视频</title>
</head>
<body>
    <h1>{{ video[1] }}</h1>
    <video width="640" height="480" controls>
        <source src="{{ video[2] }}" type="video/mp4">
        您的浏览器不支持 video 标签。
    </video>
</body>
</html>