不用数据库的多用户文件自由上传投票系统(1)-前端开发

下面是详细讲解“不用数据库的多用户文件自由上传投票系统(1)”的完整攻略。

下面是详细讲解“不用数据库的多用户文件自由上传投票系统(1)”的完整攻略。

系统简介

本系统是一个基于Flask框架开发的多用户投票系统，完全不依赖于数据库，所有数据都以文件的形式存储在本地。用户可以自由上传图片或视频、创建投票项目，其它用户可以对项目进行投票和评论。

系统架构

系统主要分为三个部分：

用户管理模块
文件上传模块
投票模块

技术栈

Python 3.7
Flask 1.1.2
Bootstrap 4.5.0

准备工作

安装Python和Flask

本系统的开发需要使用Python和Flask框架，请确保你已经安装了Python3.X.x版本，然后使用pip命令安装Flask框架。

pip install Flask

创建项目结构

使用下面的命令创建项目目录：

mkdir flask-vote && cd flask-vote
mkdir static templates upload
touch app.py

创建的目录结构如下：

.
├── app.py
├── static
├── templates
└── upload

初始化Flask应用

在app.py文件中编写Flask应用初始化代码：

from flask import Flask

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'upload'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif', 'mp4'}

我们需要配置文件上传目录和允许上传的文件类型。

编写用户管理模块

在Flask应用中编写用户管理模块代码，实现用户注册、登录和注销功能：

from flask import render_template, request, redirect, session

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        # 处理用户提交的注册请求
        username = request.form['username']
        password = request.form['password']
        confirm = request.form['confirm']
        if password != confirm:
            return '两次输入的密码不一致'
        session[username] = password
        return '注册成功'
    # 显示注册页面
    return render_template('register.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # 处理用户提交的登录请求
        username = request.form['username']
        password = request.form['password']
        if session.get(username) == password:
            session['username'] = username
            return '登录成功'
        else:
            return '用户名或密码错误'
    # 显示登录页面
    return render_template('login.html')

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect('/')

上面的代码实现了用户注册、登录和注销功能，使用Flask的Session来存储用户信息。

编写文件上传模块

在Flask应用中编写文件上传模块代码，实现文件上传和预览功能：

import os
from flask import send_from_directory, redirect, url_for

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if 'username' not in session:
        return redirect(url_for('login'))
    if request.method == 'POST':
        # 处理用户提交的文件上传请求
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return redirect('/')
    # 显示文件上传页面
    return render_template('upload.html')

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
                               filename)

上面的代码实现了文件上传和预览功能。

编写投票模块

在Flask应用中编写投票模块代码，实现投票和评论功能：

votes = []

@app.route('/', methods=['GET', 'POST'])
def vote():
    if request.method == 'POST':
        # 处理用户提交的投票请求
        vote_id = request.form['vote_id']
        option_id = request.form['option_id']
        for vote in votes:
            if vote['id'] == vote_id:
                for option in vote['options']:
                    if option['id'] == option_id:
                        option['count'] += 1
                        break
                break
        return redirect('/')
    # 显示投票页面
    return render_template('vote.html', votes=votes)

@app.route('/vote/<vote_id>', methods=['GET', 'POST'])
def show_vote(vote_id):
    if request.method == 'POST':
        # 处理用户提交的评论请求
        comment = request.form['comment']
        for vote in votes:
            if vote['id'] == vote_id:
                vote['comments'].append(comment)
                break
        return redirect('/vote/' + vote_id)
    # 显示投票详细页面
    for vote in votes:
        if vote['id'] == vote_id:
            return render_template('vote_detail.html', vote=vote)
    return '投票项目不存在'

def init_votes():
    vote = {
        'id': '1',
        'title': '投票项目 1',
        'description': '这是一个演示用的投票项目',
        'options': [
            {'id': '1', 'title': '选项 1', 'count': 0},
            {'id': '2', 'title': '选项 2', 'count': 0},
            {'id': '3', 'title': '选项 3', 'count': 0},
        ],
        'comments': []
    }
    votes.append(vote)

init_votes()

上面的代码实现了投票和评论功能，投票数据保存在内存中。