flask+vue+MySQL用户登录注册代码实现
时间: 2023-08-31 17:13:23 浏览: 52
这是一个可能的 Flask + Vue + MySQL 用户登录注册代码实现,仅供参考。
Flask 后端代码:
```python
from flask import Flask, request, jsonify
from flask_cors import CORS
import pymysql.cursors
app = Flask(__name__)
CORS(app)
# 连接 MySQL 数据库
connection = pymysql.connect(
host='localhost',
user='root',
password='root',
db='test',
charset='utf8mb4',
cursorclass=pymysql.cursors.DictCursor
)
# 注册接口
@app.route('/register', methods=['POST'])
def register():
try:
# 获取请求数据
username = request.json['username']
password = request.json['password']
with connection.cursor() as cursor:
# 查询用户名是否已经存在
sql = "SELECT `id` FROM `users` WHERE `username`=%s"
cursor.execute(sql, (username,))
result = cursor.fetchone()
if result:
return jsonify({'code': 1001, 'msg': '用户名已存在'})
# 插入用户数据到数据库
sql = "INSERT INTO `users` (`username`, `password`) VALUES (%s, %s)"
cursor.execute(sql, (username, password))
connection.commit()
return jsonify({'code': 0, 'msg': '注册成功'})
except:
return jsonify({'code': 1000, 'msg': '注册失败'})
# 登录接口
@app.route('/login', methods=['POST'])
def login():
try:
# 获取请求数据
username = request.json['username']
password = request.json['password']
with connection.cursor() as cursor:
# 查询用户数据
sql = "SELECT `id`, `username` FROM `users` WHERE `username`=%s AND `password`=%s"
cursor.execute(sql, (username, password))
result = cursor.fetchone()
if not result:
return jsonify({'code': 1002, 'msg': '用户名或密码错误'})
return jsonify({'code': 0, 'msg': '登录成功', 'data': result})
except:
return jsonify({'code': 1000, 'msg': '登录失败'})
if __name__ == '__main__':
app.run()
```
Vue 前端代码:
```vue
<template>
<div>
<h2>用户注册</h2>
<form @submit.prevent="register">
<div>
<label>用户名:</label>
<input type="text" v-model="username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" />
</div>
<button type="submit">注册</button>
<div v-if="msg">{{ msg }}</div>
</form>
<h2>用户登录</h2>
<form @submit.prevent="login">
<div>
<label>用户名:</label>
<input type="text" v-model="username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" />
</div>
<button type="submit">登录</button>
<div v-if="msg">{{ msg }}</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
msg: ''
}
},
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 => (this.msg = data.msg))
},
login() {
fetch('http://localhost:5000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => response.json())
.then(data => {
if (data.code === 0) {
this.msg = data.msg
localStorage.setItem('user_id', data.data.id)
localStorage.setItem('username', data.data.username)
} else {
this.msg = data.msg
}
})
}
}
}
</script>
```
这段代码实现了用户注册和登录功能,前端使用了 Vue 框架,通过 fetch 函数发送请求到 Flask 后端,后端连接 MySQL 数据库进行数据操作,最终返回数据给前端。注意修改 MySQL 的连接信息和数据库操作语句。