用python代码实现前后端分离的论坛的登录注册
时间: 2024-05-13 09:20:44 浏览: 15
由于前后端分离的方式可以有多种实现方式,具体实现方法也与后端框架和前端框架有关,因此下面提供的是一种基于Flask和Vue的前后端分离的论坛登录注册示例代码。
后端代码(使用Flask框架):
```python
from flask import Flask, request, jsonify
from flask_cors import CORS
from werkzeug.security import generate_password_hash, check_password_hash
app = Flask(__name__)
CORS(app) # 允许跨域访问
users = [] # 存储用户信息
@app.route('/register', methods=['POST'])
def register():
data = request.get_json()
username = data.get('username')
password = data.get('password')
for user in users:
if user['username'] == username:
return jsonify({'message': '用户名已存在'}), 400
hashed_password = generate_password_hash(password) # 对密码进行哈希
user = {'username': username, 'password': hashed_password}
users.append(user)
return jsonify({'message': '注册成功'})
@app.route('/login', methods=['POST'])
def login():
data = request.get_json()
username = data.get('username')
password = data.get('password')
for user in users:
if user['username'] == username and check_password_hash(user['password'], password):
return jsonify({'message': '登录成功'})
return jsonify({'message': '用户名或密码错误'}), 401
if __name__ == '__main__':
app.run()
```
前端代码(使用Vue框架):
```html
<template>
<div>
<h2>注册</h2>
<form @submit.prevent="register">
<div>
<label>用户名:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" required>
</div>
<button type="submit">注册</button>
</form>
<h2>登录</h2>
<form @submit.prevent="login">
<div>
<label>用户名:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" required>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
fetch('http://localhost:5000/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => response.json())
.then(data => {
alert(data.message)
})
.catch(error => {
console.error(error)
})
},
login() {
fetch('http://localhost:5000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => {
if (response.status === 401) {
throw new Error('用户名或密码错误')
} else {
return response.json()
}
})
.then(data => {
alert(data.message)
// 登录成功后的操作
})
.catch(error => {
alert(error.message)
})
}
}
}
</script>
```
在这个示例代码中,后端提供了/register和/login两个接口,分别用于用户注册和用户登录。前端使用Vue框架编写了一个简单的登录注册页面,通过fetch函数向后端发送请求,并根据后端返回的数据进行相应操作。
需要注意的是,本示例使用了Flask的默认配置,因此仅适用于开发环境,生产环境需要进行相应的配置(例如使用HTTPS协议)。此外,为了简化示例,本文没有进行身份验证和授权等安全措施,实际项目中需要根据情况进行相应的安全设计。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)