起因
家里有个退休的主机，打算拿它做ftp服务器，实现文件的同步。由于在局域网中，且该主机使用水晶头线连接，传输速率很快
准备
可以到Pycharm直接选择新建flask项目,没有的话输入下面的命令也是可以的。下载flask嫌慢的话可以配置一下镜像，详细查看这篇文章:pip镜像管理和npm镜像管理
pip install flask
flask
项目源码下载
点击这里: ftp_flask.zip, 然后下载好flask, 在根目录下的命令行输入下列命令即可:
python app.py
项目概述
图片.png
app.py是整个项目的"管家",负责监听还有逻辑处理
app.py文件:
from flask import Flask, render_template, request, send_from_directory, abort
import os
app = Flask(__name__)
def getfile():
print(os.getcwd().replace('\\', '/'))
path1 = os.getcwd().replace('\\', '/') + '/upload_files'
path2 = os.getcwd().replace('\\', '/')
# 跳转目录 跳转到下载文件的目录，获得下载文件目录里面的list之后，然后再跳转出来
# 这个跳转的步骤是为了获取到upload_files目录下的文件的名字，然后把它放进f_list中
os.chdir(path1)
f_list = os.listdir()
os.chdir(path2)
print(os.getcwd().replace('\\', '/'))
return f_list
def is_Have_file(filename):
print(os.getcwd().replace('\\', '/'))
path1 = os.getcwd().replace('\\', '/') + '/upload_files'
path2 = os.getcwd().replace('\\', '/')
os.chdir(path1)
flag = os.path.isfile(filename)
os.chdir(path2)
print(os.getcwd().replace('\\', '/'))
return flag
@app.route('/')
def home():
return render_template('home.html')
@app.route('/upload')
def upload_file():
return render_template('upload.html')
@app.route('/uploader', methods=['GET', 'POST'])
def upload_success():
if request.method == 'POST':
f = request.files['file']
f.save('upload_files/' + f.filename)
return render_template('upload_success.html', filename=f.filename)
# 显示下载文件的界面
@app.route('/down', methods=['GET'])
def download_page():
print("!!!: ", os.getcwd())
f_list = getfile()
return render_template('download_page.html', fl=f_list)
# 下载要下载的文件，要下载的文件是通过get方法来传递的
@app.route('/download_file', methods=['GET'])
def download_file():
if request.method == 'GET':
download_filename = request.args.get('filename')
f_list = getfile()
print()
if is_Have_file(download_filename):
return send_from_directory('upload_files', download_filename, as_attachment=True)
else:
abort(404)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
首先看一下主页文件
home.html
home.html
<html>
<head>
<title>首页</title>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}"/>
</head>
<div>
<p id="title">ftp功能小网站</p>
</div>
<div id="op">
<p class="upload">
<a href="{{ url_for('upload_file') }}">upload_file</a>
</p>
<p class="download">
<a href="{{ url_for('download_page') }}">download_page</a>
</p>
</div>
</html>
home.css
body {
background-color: antiquewhite;
font-size: 30px;
text-align: center;
color: #ea66a6;
}
#op {
margin-top: 200px;
}
#title {
font-size: 50px;
margin-top: 50px;
}
a {
text-decoration: none;
}
.upload {
}
.download {
color: #ea66a6;
margin-top: 50px;
}
@media (max-width: 1000px) {
#title {
font-size: 120px;
margin-top: 80px;
color: #45b97c;
}
.upload {
margin-top: 380px;
font-size: 100px;
color: #ea66a6;
}
.download {
color: blueviolet;
margin-top: 200px;
font-size: 100px;
}
}
看一下upload.html
upload.html
<html>
<head>
<title>上传文件</title>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/upload.css') }}"/>
</head>
<body>
<p id="title">上传文件</p>
<div id="div">
<form action="{{ url_for('upload_success') }}" method="POST"
enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" id="submit" value="提交上传"/>
</form>
</div>
<div class="back-div">
<p id="back" style="font-size: larger">
<a href="{{ url_for('home') }}">back home</a>
</p>
</div>
</body>
</html>
upload.css
body {
background: #A0EEE1;
color: blueviolet;
font-size: 30px;
}
#title {
font-size: 50px;
color: blue;
text-align: center;
margin-top: 50px;
}
#div {
margin-top: 200px;
margin-left: 350px;
}
a {
text-decoration: none;
}
#back {
margin-top: 150px;
margin-left: 20vw;
}
input {
background: #D0EEFF;
font-size: 30px;
}
@media (max-width: 1000px) {
#title{
font-size: 100px;
margin-top: 80px;
}
#div{
margin-top: 380px;
margin-left: 50px;
}
input{
font-size: 60px;
}
#submit{
font-size: 70px;
margin-top: 180px;
margin-left: 30vw;
background-color: #ea66a6;
color: white;
}
#back{
font-size: 60px;
margin-top: 300px;
}
}
看一下upload_success.html
upload_success.html
<html>
<head>
<title>添加成功</title>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/upload_success.css') }}"/>
<style>
</style>
</head>
<div id="op">
<p id="tip">文件 {{ filename }} 添加成功</p>
<p class="back">
<a href="{{ url_for('home') }}">back home</a>
</p>
</div>
</html>
upload_success.css
body {
color: blueviolet;
background-color: #A0EEE1;
text-align: center;
font-size: 40px;
}
#op {
margin-top: 280px;
}
a {
color: #ea66a6;
text-decoration: none;
}
.back {
font-size: 90px;
margin-top: 170px;
}
@media (max-width: 1000px) {
#back-div{
font-size: 80px;
margin-top: 200px;
}
}
最后看一下下载页面download_page.html
download_page.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>下载文件页面</title>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/download.css') }}"/>
</head>
<body>
<div id="main">
<h2 class="title">可供下载的文件</h2>
<ul>
{% for file in fl %}
{# <li><a href="/download_file?filename={{ file }}"> {{ file }} </a></li>#}
<li><a href="{{url_for('download_file', filename=file)}}"> {{ file }} </a></li>
{% endfor %}
</ul>
<p class="back">
<a href="{{ url_for('home') }}">back home</a>
</p>
</div>
</body>
</html>
download.css
body {
text-align: center;
font-size: 30px;
background: #A0EEE1;
}
a {
text-decoration: none;
}
.title {
color: #ea66a6;
}
.back {
font-size: 26px;
margin-left: 16vw;
position: fixed;
bottom: 30px;
color: #ea66a6;
}
@media (max-width: 1000px) {
.title {
color: #ea66a6;
font-size: 120px;
}
ul {
text-align: left;
font-size: 6vw;
}
li {
margin-top: 40px;
}
.back {
position: fixed;
bottom: 30px;
margin-left: 10vw;
font-size: 70px;
}
}
结语
这里的前端页面并不绚丽， 功能也非常简单，这个小网站只是为了我自己多台设备共享文件带来便利。感谢您观看。
网友评论