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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/294009.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Apache Flink 进阶教程（七）：网络流控及反压剖析

Apache Flink 进阶教程（七）：网络流控及反压剖析

目录 前言 网络流控的概念与背景 为什么需要网络流控 网络流控的实现&#xff1a;静态限速 网络流控的实现&#xff1a;动态反馈/自动反压 案例一&#xff1a;Storm 反压实现 案例二&#xff1a;Spark Streaming 反压实现 疑问&#xff1a;为什么 Flink&#xff08;bef…
阅读更多...
SVM —— 代码实现

SVM —— 代码实现

SMO 算法的实现步骤&#xff1a; 代码如下&#xff1a; import numpy as np import matplotlib.pyplot as plt import seaborn as sns import random# 设置中文字体为宋体&#xff0c;英文字体为 times new roman sns.set(font"SimSun", style"ticks", fo…
阅读更多...
【虹科分享】金融服务急需数据层改造

【虹科分享】金融服务急需数据层改造

文章速览&#xff1a; 数字化转型正在颠覆银行与金融业金融服务的未来Redis Enterprise赋能实时金融应用 金融服务越来越注重实时互动体验&#xff0c;重构关键业务流程&#xff0c;从数据层入手该怎么做&#xff1f; 一、数字化转型正在颠覆银行与金融业 金融科技行业的初创…
阅读更多...
7. 结构型模式 - 代理模式

7. 结构型模式 - 代理模式

亦称&#xff1a; Proxy 意图 代理模式是一种结构型设计模式&#xff0c; 让你能够提供对象的替代品或其占位符。 代理控制着对于原对象的访问&#xff0c; 并允许在将请求提交给对象前后进行一些处理。 问题 为什么要控制对于某个对象的访问呢&#xff1f; 举个例子&#xff…
阅读更多...
Android Studio各种Gradle常见报错问题及解决方案

Android Studio各种Gradle常见报错问题及解决方案

大家好&#xff0c;我是咕噜铁蛋&#xff01;在开发Android应用程序时&#xff0c;我们可能会遇到各种Gradle错误。这些错误可能来自不同的原因&#xff0c;例如依赖项问题、配置错误、版本冲突等。今天我通过搜索整理了一下&#xff0c;在这篇文章中&#xff0c;我将分享一些常…
阅读更多...
Python深度学习029：pytorch中常用的模块或方法

Python深度学习029：pytorch中常用的模块或方法

PyTorch是一个广泛使用的深度学习库，提供了许多用于构建和训练神经网络的模块和方法。下面是一些PyTorch中常用的模块和方法的简要介绍： PyTorch常用模块和方法 torch 用途：PyTorch的基础模块，提供了多种数学运算功能。常用方法： torch.tensor()：创建张量torch.randn()：…
阅读更多...
微软官方镜像下载大全(windows iso 官方镜像)

微软官方镜像下载大全(windows iso 官方镜像)

原本只是想下一个Windows Server 2022中文版的镜像&#xff0c;后面发现要么就是慢得一批的某盘&#xff0c;要么就是磁力&#xff0c;我想直接下载简简单单&#xff0c;找了一圈没有找到。官网下载需要注册、登录乱七八糟&#xff0c;最终终于找到下载方法了&#xff0c;适用于…
阅读更多...
人工智能_机器学习070_SVM支持向量机_软间隔及优化_硬间隔_衡量间隔软度_引入松弛变量_理解隔离参数---人工智能工作笔记0110

人工智能_机器学习070_SVM支持向量机_软间隔及优化_硬间隔_衡量间隔软度_引入松弛变量_理解隔离参数---人工智能工作笔记0110

我们继续说,之前说的C是什么意思? 我们在这个软间隔优化中就可以引出C 可以看到之前我们讨论的问题,都是基于样本点的,完全的线性可分的问题,我们称为硬间隔 可以看到这种,一分就可以,分开,简单分割就可以分开的数据,我们称之为硬间隔 但是可以看到上面这种情况,无论怎么分,都…
阅读更多...
分布式搜索elasticsearch概念

分布式搜索elasticsearch概念

什么是elasticsearch&#xff1f; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 目录 elasticsearch的场景 elasticsearch的发展 Lucene篇 Elasticsearch篇 elasticsearch的安装 elasticsearch的场景 elasticsear…
阅读更多...
层次分析法

层次分析法

层次分析法主要用于解决评价类问题(例如选择哪种方案最好&#xff0c;哪位运动员或者员工表现的更优秀) 先用一道引出层次分析法的例题&#xff1a;小明同学高考填完志愿后&#xff0c;小明想出去旅游。在查阅了网上的攻略后&#xff0c;他初步选择了苏杭、北戴河和桂林三地之一…
阅读更多...
Docker——微服务的部署

Docker——微服务的部署

Docker——微服务的部署 文章目录 Docker——微服务的部署初识DockerDocker与虚拟机Docker架构安装DockerCentOS安装Docker卸载&#xff08;可选&#xff09;安装docker启动docker配置镜像加速 Docker的基本操作Docker的基本操作——镜像Docker基本操作——容器Docker基本操作—…
阅读更多...
[node]Node.js 模块系统

[node]Node.js 模块系统

[node]模块系统 Node.js中的模块系统模块的使用模块的导入模块的导出导出多个值导出默认值导出可传参的函数 文件查找策略从文件模块缓存中加载从原生模块加载从文件加载 Node.js中的模块系统 为了让Node.js的文件可以相互调用&#xff0c;Node.js提供了一个简单的模块系统。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023