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

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

系统简介

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

系统架构

系统主要分为三个部分:

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

技术栈

  • Python 3.7
  • Flask 1.1.2
  • Bootstrap 4.5.0

准备工作

  1. 安装Python和Flask

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

pip install Flask
  1. 创建项目结构

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

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

创建的目录结构如下:

.
├── app.py
├── static
├── templates
└── upload
  1. 初始化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'}

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

  1. 编写用户管理模块

在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来存储用户信息。

  1. 编写文件上传模块

在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)

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

  1. 编写投票模块

在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()

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

示例

下面是两个示例:

示例一

  1. 打开浏览器,进入系统主页(http://localhost:5000)。
  2. 点击“注册”按钮,填写用户名、密码和确认密码,点击“注册”按钮。
  3. 点击“上传”按钮,选择一张图片并上传。
  4. 在主页上,点击“投票”按钮,选择一项进行投票。
  5. 在主页上,点击“查看”按钮,查看投票结果和评论。

示例二

  1. 打开浏览器,进入系统主页(http://localhost:5000)。
  2. 点击“注册”按钮,填写用户名、密码和确认密码,点击“注册”按钮。
  3. 在主页上,点击“上传”按钮,选择一个视频并上传。
  4. 在主页上,点击“投票”按钮,选择一项进行投票。
  5. 在主页上,点击“查看”按钮,查看投票结果和评论。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:不用数据库的多用户文件自由上传投票系统(1) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 使用CSS设置滚动条样式

    以下是“使用CSS设置滚动条样式”的完整攻略: 使用CSS设置滚动条样式 CSS可以通过伪元素和伪类来设置滚动条的样式,以下是实现滚动条样式的步骤: 使用伪元素和伪类选择器来选择滚动条。 设置滚动条的宽度、高度、颜色等样式属性。 以下是两个示例说明: 示例1:使用伪元素和伪类选择器设置滚动条样式 假设一个用户需要设置滚动条的样式,可以按照以下步骤操作: 在C…

    css 2023年5月18日
    00
  • CSS3制作炫酷的自定义发光文字

    下面是制作炫酷的自定义发光文字的完整攻略: 1. CSS3 文字阴影 CSS3 的文字阴影可以用来制作发光文字效果。具体实现方法如下: /* 添加文字阴影 */ text-shadow: 0 0 20px #fff; 这里的 text-shadow 属性接受四个参数,分别是: 横向偏移量 纵向偏移量 模糊度 颜色 可以通过调整这四个参数来控制文字阴影的效果。…

    css 2023年6月9日
    00
  • Vue项目中设置背景图片方法

    Vue项目中设置背景图片的方法有多种途径,下面给出两种示例说明。 方法一:使用样式绑定 步骤一:自定义样式 首先,在Vue项目中的某个组件中定义一个样式类,如下所示: .bg-img { background-image: url(./assets/bg.jpg); background-size: cover; background-position: c…

    css 2023年6月10日
    00
  • CSS 屏幕大小自适应的实现示例

    关于“CSS 屏幕大小自适应的实现示例”的完整攻略,具体实现方式如下: HTML 结构与 CSS 样式 首先,在 HTML 文档中定义以下结构: <div class="wrapper"> <div class="content"></div> </div> 然后给结构添…

    css 2023年6月9日
    00
  • 基于纯JS实现多张图片的懒加载Lazy过程解析

    下面我来详细讲解“基于纯JS实现多张图片的懒加载Lazy过程解析”的完整攻略。 背景 在传统的网页中,所有的图片都会在页面加载的时候一次性加载出来,这样会导致网页的加载速度变慢。为了提升网页的加载速度和用户的交互体验,我们可以使用懒加载技术。 懒加载是指在页面滚动到特定区域时,才开始加载相应的资源。通过懒加载,可以减少网页的加载时间,提升网页的性能,并且能够…

    css 2023年6月10日
    00
  • ExtJs使用总结(非常详细)

    下面我将详细讲解“ExtJs使用总结(非常详细)”的完整攻略。 一、初识ExtJs 介绍了ExtJs是什么,包括MVVM架构、组件化、丰富的UI组件等 强调了ExtJs的学习曲线很陡峭,需要花费大量的时间学习 二、ExtJs组件基础 介绍了ExtJs的组件基础知识,包括容器组件、表单组件、布局等 通过示例代码演示了如何创建容器组件和表单组件 示例一:创建容器…

    css 2023年6月10日
    00
  • 详解vue-loader在项目中是如何配置的

    Vue-loader 是一个 webpack 的 loader,用于将 Vue 单文件组件转换为 JavaScript 模块。在 Vue 项目中,需要对 vue-loader 进行配置,以便正确地解析和编译 Vue 单文件组件。本文将提供一些关于如何配置 vue-loader 的完整攻略,包括使用 vue.config.js 和 webpack.config…

    css 2023年5月18日
    00
  • CSS3实现滚动条动画效果代码分享

    下面是“CSS3实现滚动条动画效果代码分享”的完整攻略: 1.基础知识 在开始实现滚动条动画效果之前,需要了解一些基础知识。首先,滚动条是指在浏览器中出现的竖向或横向的滚动条,在页面中用于控制页面的滚动。其次,CSS3提供了一些新的伪元素和属性,可以用来实现滚动条的样式和动画效果。 常用的伪元素和属性包括: ::-webkit-scrollbar:用于设置滚…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部