这是一个
简单的 Python
Flask + Vue.
js + SQLite 实现用户注册、
登录和下载文件的示例，其中前端使用了 Vue.
js，后端使用了
Flask，数据库使用了 SQLite。
后端代码：
```python
from
flask import
Flask,
jsonify, request, send_file
from werkzeug.security import check_password_hash, generate_password_hash
import sqlite3
app =
Flask(__name__)
app.config["DEBUG"] = True
# SQLite database
conn = sqlite3.connect('users.db')
conn.execute('''CREATE TABLE IF NOT EXISTS users
(id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT NOT NULL,
password TEXT NOT NULL);''')
conn.close()
# User registration
@app.route('/api/register', methods=['POST'])
def register():
username = request.
json.get('username')
password = request.
json.get('password')
if not username or not password:
return
jsonify({'error': 'Missing username or password'})
conn = sqlite3.connect('users.db')
cursor = conn.cursor()
cursor.execute('SELECT * FROM users WHERE username=?', (username,))
if cursor.fetchone():
return
jsonify({'error': 'Username already exists'})
cursor.execute('INSERT INTO users (username, password) VALUES (?, ?)', (username, generate_password_hash(password)))
conn.commit()
conn.close()
return
jsonify({'success': 'User created successfully'})
# User login
@app.route('/api/login', methods=['POST'])
def login():
username = request.
json.get('username')
password = request.
json.get('password')
if not username or not password:
return
jsonify({'error': 'Missing username or password'})
conn = sqlite3.connect('users.db')
cursor = conn.cursor()
cursor.execute('SELECT * FROM users WHERE username=?', (username,))
user = cursor.fetchone()
if not user or not check_password_hash(user[2], password):
return
jsonify({'error': 'Invalid username or password'})
conn.close()
return
jsonify({'success': 'User logged in successfully'})
# File download
@app.route('/api/download', methods=['GET'])
def download():
filename = request.args.get('filename')
if not filename:
return
jsonify({'error': 'Missing filename'})
try:
return send_file(filename, as_attachment=True)
except FileNotFoundError:
return
jsonify({'error': 'File not found'})
```
前端代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>File Downloader</title>
<script src="https://cdn.
jsdelivr.net/npm/vue/dist/vue.
js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.
js"></script>
</head>
<body>
<div id="app">
<h2>File Downloader</h2>
<div v-if="!loggedIn">
<h3>Register</h3>
<div>
<label>Username:</label>
<input type="text" v-model="registerUsername">
</div>
<div>
<label>Password:</label>
<input type="password" v-model="registerPassword">
</div>
<button @click="register">Register</button>
<div v-if="registerError" style="color: red">{{ registerError }}</div>
<hr>
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" v-model="loginUsername">
</div>
<div>
<label>Password:</label>
<input type="password" v-model="loginPassword">
</div>
<button @click="login">Login</button>
<div v-if="loginError" style="color: red">{{ loginError }}</div>
</div>
<div v-else>
<h3>Download File</h3>
<div>
<label>Filename:</label>
<input type="text" v-model="filename">
</div>
<button @click="download">Download</button>
<div v-if="downloadError" style="color: red">{{ downloadError }}</div>
<div v-if="downloadSuccess" style="color: green">{{ downloadSuccess }}</div>
<hr>
<button @click="logout">Logout</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
registerUsername: '',
registerPassword: '',
loginUsername: '',
loginPassword: '',
filename: '',
registerError: '',
loginError: '',
downloadError: '',
downloadSuccess: '',
loggedIn: false
},
methods: {
register: function () {
axios.post('/api/register', {
username: this.registerUsername,
password: this.registerPassword
}).then(response => {
if (response.data.error) {
this.registerError = response.data.error;
} else {
this.registerUsername = '';
this.registerPassword = '';
this.registerError = '';
this.loginUsername = response.data.username;
this.loginPassword = '';
this.loginSuccess = response.data.success;
this.loggedIn = true;
}
});
},
login: function () {
axios.post('/api/login', {
username: this.loginUsername,
password: this.loginPassword
}).then(response => {
if (response.data.error) {
this.loginError = response.data.error;
} else {
this.loginUsername = '';
this.loginPassword = '';
this.loginError = '';
this.loginSuccess = response.data.success;
this.loggedIn = true;
}
});
},
download: function () {
axios.get('/api/download', {
params: {
filename: this.filename
}
}).then(response => {
if (response.data.error) {
this.downloadError = response.data.error;
this.downloadSuccess = '';
} else {
this.downloadError = '';
this.downloadSuccess = 'File downloaded successfully';
}
});
},
logout: function () {
this.loggedIn = false;
this.filename = '';
this.downloadError = '';
this.downloadSuccess = '';
}
}
})
</script>
</body>
</
html>
```
在此示例中，用户可以在前端页面中输入用户名和密码进行注册和
登录，后端将这些信息存储在 SQLite 数据库中，然后用户可以输入文件名进行下载，后端将下载文件发送回前端。
最低0.47元/天 解锁文章
3348
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
