flask之文件管理网页（上传，下载，搜索，登录，注册） -- 翔山 第一版

2023-12-23 10:12
文章标签 网页 登录 搜索 管理 注册 下载 上传 flask 第一版 翔山

本文主要是介绍flask之文件管理网页（上传，下载，搜索，登录，注册） -- 翔山 第一版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前面说要做一个可以注册，登录，搜索，上传下载的网页，初版来了
第一版主代码

from flask import request, Flask, render_template, redirect, url_for, send_from_directory
import bcrypt
import ossavePath = os.path.join(os.getcwd(), "userInfo")# 实例化
app = Flask(__name__)
# 这里是主页面，即第一步显示的网页，有一个对话框和搜索按钮
@app.route('/')
def mainweb():return render_template("first.html", result="欢迎使用NAS页面")# 设定第二步的跳转网页，methods 设定请求类型，这里可以指定一种类型，就不用判断了。主要是类型不同，获取结果的方式不同
@app.route('/login', methods=['POST'])
def login():# post 类型抓取对话框内的内容username = request.form.get("username", "")passwd = request.form.get("password", "")if username == passwd == "":return render_template('login.html', result="欢迎")if verifyLogin(username, passwd):# return redirect(url_for('index'))return render_template('select.html')else:return render_template('login.html', result="用户名或密码错误")@app.route('/signIn', methods=['POST'])
def signIn():# post 类型抓取对话框内的内容username = request.form.get("username", "")passwd = request.form.get("password", "")if username == passwd == "":return render_template('signIn.html', result="请输入正确的用户名和密码")if saveLogin(username, passwd):return render_template('login.html', result="注册成功，请登录")else:return render_template('signIn.html', result="用户名重复,请更换用户名重新注册")def verifyLogin(user, passwd):# 读取存储的用户信息saveFile = os.path.join(savePath, user)if os.path.isfile(saveFile):with open(saveFile, 'r', encoding="UTF-8") as f:savepasswd = f.read()# 从合并的字符串中提取存储的saltsalt = savepasswd.split('||')[0].encode('utf-8')# 使用存储的salt哈希输入密码hash_passwd = bcrypt.hashpw(passwd.encode('utf-8'), salt)password = f"{salt.decode('utf-8')}||{hash_passwd.decode('utf-8')}"return password == savepasswdelse:return Falsedef saveLogin(user, passwd):# 生成一个新的saltsalt = bcrypt.gensalt()# 使用生成的salt哈希密码hashed_password = bcrypt.hashpw(passwd.encode('utf-8'), salt)# 将salt和哈希密码合并以便存储stored_password = f"{salt.decode('utf-8')}||{hashed_password.decode('utf-8')}"# 保存用户信息saveFile = os.path.join(savePath, user)if os.path.isfile(saveFile):return Falseelse:if os.path.isdir(savePath):passelse:os.makedirs(savePath)with open(saveFile, 'w', encoding="UTF-8") as f:f.write(stored_password)return True# 上传文件存储路径
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# 确保上传文件夹存在
if not os.path.exists(app.config['UPLOAD_FOLDER']):os.makedirs(app.config['UPLOAD_FOLDER'])@app.route('/select', methods=['POST'])
def select():return render_template('select.html')@app.route('/index', methods=['GET', 'POST'])
def index():# 获取上传文件夹中的文件列表files = os.listdir(app.config['UPLOAD_FOLDER'])return render_template('download.html', files=files)@app.route('/upload', methods=['GET', 'POST'])
def upload_file():if 'file' not in request.files:return render_template('upload.html', result="进入上传页面")# 判断下是否有输入文件file = request.files['file']if file.filename == '':return render_template('upload.html', result="没有选择文件")# 保存文件到指定路径file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))# 更新网页，显示 index 页面return redirect(url_for('index'))@app.route('/download/<filename>')
def download_file(filename):# 从上传文件夹中发送文件（下载）return send_from_directory(os.path.join(os.getcwd(), app.config['UPLOAD_FOLDER']), filename, as_attachment=True)@app.route('/find', methods=['post'])
def find():# post 类型抓取对话框内的内容find_key = request.form.get("q", "")print(find_key)if find_key == "":return render_template('find.html', result="请输入关键字进行搜索")else:# 调用find_result函数，开始遍历文件夹搜索文件find_result = find_file(find_key)if find_result == "没有搜索到文件":return render_template('find.html', result=find_result)else:# 跳转网页，输出结果return render_template('download.html', files=find_result)def find_file(find_key):findfiles = []# 遍历文件夹及子文件夹和文件等for root, dirs, files in os.walk(os.path.join(os.getcwd(), app.config['UPLOAD_FOLDER']), topdown=False):for filename in files:# 将文件路径和文件名结合，生成路径# allfiles.append(os.path.join(root, filename))# 判断这个路径是否含关键字if find_key in filename:findfiles.append(os.path.basename(filename))# 假设没搜到，返回 no found,搜到了，则将搜索到的结果组合成字符串返回if len(findfiles) == 0:myresult = "没有搜索到文件"else:myresult = findfilesreturn myresultif __name__ == '__main__':# 以debug模式运行，只有当前电脑能访问此网页，其他电脑不行app.run(debug=True)

需要用到的html文件如下：
signIn.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sign In Page</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;height: 100vh;}.signin-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 8px;font-weight: bold;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;}.form-group button {padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;}/* 设置动图的样式和位置 */  .animated-image {  /* 宽度和高度可以根据需要调整 */  width: 200px;  height: 200px;  /* 位置属性可以控制动图的位置 */  position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */  top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */  left: 100px;  }  </style>
</head>
<body><!-- 使用 img 标签嵌入动图 --><img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image"><div class="signin-container"><h1>{{ result }}<h1><h2>注册</h2><form action="/signIn" method="post"><div class="form-group"><label for="username">用户:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="password" required></div><div class="form-group"><button type="submit">注册</button></div></form></div></body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;height: 100vh;}.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 8px;font-weight: bold;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;}.form-group button {padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;}/* 设置动图的样式和位置 */  .animated-image {  /* 宽度和高度可以根据需要调整 */  width: 200px;  height: 200px;  /* 位置属性可以控制动图的位置 */  position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */  top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */  left: 100px;  }  </style>
</head>
<body><!-- 使用 img 标签嵌入动图 --><img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image"><div class="login-container"><h1>{{ result }}<h1><h2>登录</h2><form action="/login" method="post"><div class="form-group"><label for="username">用户:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="password" required></div><div class="form-group"><button type="submit">登录</button></div><form></div></body>
</html>

select.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Select</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;height: 100vh;}.signin-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 8px;font-weight: bold;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;}.form-group button {padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;}/* 设置动图的样式和位置 */  .animated-image {  /* 宽度和高度可以根据需要调整 */  width: 200px;  height: 200px;  /* 位置属性可以控制动图的位置 */  position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */  top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */  left: 100px;  }  </style>
</head>
<body><!-- 使用 img 标签嵌入动图 --><img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image"><div class="signin-container"><h2>--进入上传页面--</h2><form action="/upload" method="post"><div class="form-group"><button type="submit">进入上传页面</button></div></form><h2>--进入搜索页面--</h2><form action="/find" method="post"><div class="form-group"><button type="submit">进入搜索页面</button></div></form><h2>--进入所有文件下载页面--</h2><form action="/index" method="post"><div class="form-group"><button type="submit">进入下载页面</button></div></form></div></body>
</html>

find.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>search</title>
</head>
<body><h2>{{ result }}</h2><form action="/find" method="post"><input type="text" name="q" /><input type="submit" value="搜索" /></form>
</body>
</html>

upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Upload and Download</title>
</head>
<body><h2>{{ result }}</h2><!-- 上传表单 --><form action="/upload" method="post" enctype="multipart/form-data"><input type="file" name="file" id="fileInput" accept=".txt, .pdf, .csv, .log"><button type="submit">上传</button></form><!-- 返回主页面--><form action="/select" method="post"><button type="submit">返回主页面</button></form>
</body>
</html>

download.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Upload and Download Example</title>
</head>
<body><h2>-- 进入上传页面--</h2><form action="/upload" method="post"><button type="submit">上传</button></form><!-- 下载文件列表 --><h2>可下载文件列表<h2><ul>{% for file in files %}<li><a href="{{ url_for('download_file', filename=file) }}" download="{{ file }}">{{ file }}</a></li>{% endfor %}</ul></body>
</html>

first.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;display: flex;align-items: center;justify-content: center;height: 100vh;}.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 8px;font-weight: bold;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;}.form-group button {padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;}/* 设置动图的样式和位置 */  .animated-image {  /* 宽度和高度可以根据需要调整 */  width: 200px;  height: 200px;  /* 位置属性可以控制动图的位置 */  position: absolute; /* 或者使用其他位置属性，如 relative、fixed 等 */  top: 50px; /* 调整 top、right、bottom 和 left 属性来定位动图 */  left: 100px;  }  </style>
</head>
<body><!-- 使用 img 标签嵌入动图 --><img src="{{ url_for('static', filename='huaji.gif') }}" alt="欢迎" class="animated-image"><div class="login-container"><h1>{{ result }}<h1><form action="/login" method="post"><div class="form-group"><button type="submit">进入登录页面</button></div></form><form action="/signIn" method="post"><div class="form-group"><button type="submit">进入注册页面</button></div></form></div></body>
</html>

一共七个html模版，太不容易了
全都放到 templates文件夹中
文件结构：
在这里插入图片描述
运行起来后，浏览器输入网站进入页面：
1.首页：
在这里插入图片描述
2.注册界面：
这个界面暂时没有设定密码格式等等检测
现在只检测，用户名重复是无法注册的，会有信息提示
用户名重复，请更换用户名重新注册
注册成功会直接跳转到登录界面
暂时也没放返回按钮，只能网页回退或者改IP地址退
在这里插入图片描述
3.登录界面：
会检查用户名和密码是否匹配，找不到用户名或者密码错误都直接提示用户名或密码错误
在这里插入图片描述
4.登录成功后的首页：
选择将要做的动作，上传，搜索，下载界面（下载界面默认显示指定文件夹下的所有文件）
在这里插入图片描述
5.上传界面：
空文件提示没有选择文件
选择文件上传后会显示当前目录下所有文件
返回主页面就是返回页面 4
在这里插入图片描述
6.进入下载页面：

上传成功后也会跳转到这个页面，点击上传可以返回上传页面
这里默认显示指定文件夹下所有的文件
在这里插入图片描述
7.搜索页面：
为了方便看，我多放了些文件到存储的文件夹内，看看效果：
文件夹内的文件：
在这里插入图片描述
搜索页面：
在这里插入图片描述
如果没有输入关键字或者输入关键字后没查到，那么这个页面会提示，且可以重新输入
暂时没放返回按钮
假如搜到了，会跳转到下载页面：
在这里插入图片描述
下载的话，直接点击即可：
在这里插入图片描述

以上就是全部内容，基本功能用翔山堆出来了，后续会慢慢慢慢精简优化，不过…就说他能不能用吧…嘿嘿
搜索列表打印功能后续添加…

这篇关于flask之文件管理网页（上传，下载，搜索，登录，注册） -- 翔山 第一版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/527664。

相关文章

springboot下载接口限速功能实现

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解（简化） 四、关键代码详解1️⃣ 设置
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python pip下载包及所有依赖到指定文件夹的步骤说明

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,：本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹，请按照以
阅读更多...
使用jenv工具管理多个JDK版本的方法步骤

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,：本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的？二、jenv的核心功能（一）管理多个Java版本（二）支持插件扩展（三）环境隔
阅读更多...
Nacos注册中心和配置中心的底层原理全面解读

Nacos注册中心和配置中心的底层原理全面解读

《Nacos注册中心和配置中心的底层原理全面解读》：本文主要介绍Nacos注册中心和配置中心的底层原理的全面解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录临时实例和永久实例为什么 Nacos 要将服务实例分为临时实例和永久实例?1.x 版本和2.x版本的区别
阅读更多...
Java中的登录技术保姆级详细教程

Java中的登录技术保姆级详细教程

《Java中的登录技术保姆级详细教程》：本文主要介绍Java中登录技术保姆级详细教程的相关资料,在Java中我们可以使用各种技术和框架来实现这些功能,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录1.登录思路2.登录标记1.会话技术2.会话跟踪1.Cookie技术2.Session技术3.令牌技
阅读更多...
Python中bisect_left 函数实现高效插入与有序列表管理

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与
阅读更多...
Spring中管理bean对象的方式(专业级说明)

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC（控制反转）容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解（主流方式）1.3 基于Java
阅读更多...
基于Python+PyQt5打造一个跨平台Emoji表情管理神器

基于Python+PyQt5打造一个跨平台Emoji表情管理神器

《基于Python+PyQt5打造一个跨平台Emoji表情管理神器》在当今数字化社交时代,Emoji已成为全球通用的视觉语言,本文主要为大家详细介绍了如何使用Python和PyQt5开发一个功能全面的... 目录概述功能特性1. 全量Emoji集合2. 智能搜索系统3. 高效交互设计4. 现代化UI展示效果
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2