用python+vue写登录
时间: 2024-05-09 07:16:33 浏览: 6
首先,我们需要创建一个简单的 Flask 应用程序来处理登录逻辑,并使用 Vue.js 构建前端界面。下面是一个简单的示例:
Flask 后端代码:(app.py)
```
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/login', methods=['POST'])
def login():
username = request.json.get('username')
password = request.json.get('password')
if username == 'admin' and password == 'admin':
return jsonify({'success': True})
else:
return jsonify({'success': False})
if __name__ == '__main__':
app.run()
```
Vue.js 前端代码:(index.html)
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Login Form</h1>
<form @submit.prevent="submitForm">
<div>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit">Login</button>
</form>
<p v-if="message">{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
username: '',
password: '',
message: ''
},
methods: {
submitForm: function() {
axios.post('/login', {
username: this.username,
password: this.password
}).then(response => {
if (response.data.success) {
this.message = 'Login successful!';
} else {
this.message = 'Incorrect username or password.';
}
}).catch(error => {
console.log(error);
this.message = 'An error occurred. Please try again.';
});
}
}
});
</script>
</body>
</html>
```
在上面的代码中,我们使用了 Vue.js 的双向数据绑定来处理表单输入,并使用 axios 库发送 POST 请求到 Flask 应用程序的 `/login` 路径。如果用户名和密码正确,Flask 应用程序将返回一个 JSON 格式的成功响应,否则返回一个失败响应。在 Vue.js 中,我们根据响应的内容更新页面上的消息。
注意:上面的代码仅作为示例,实际应用中需要增加更多的安全性和错误处理。