vue+flask+mysql实现登录注册
时间: 2023-08-26 20:07:00 浏览: 318
实现登录注册的步骤如下:
1. 前端使用 Vue 框架实现登录注册页面,并通过 Ajax 请求向后端发送登录注册请求。
2. 后端使用 Flask 框架搭建 Web 服务器,接收前端发送的请求,并通过 SQLAlchemy 实现与 MySQL 数据库的交互。
3. 在 MySQL 数据库中创建用户表,用于存储用户信息,包括用户名、密码等。
4. 实现注册功能:前端发送注册请求,后端接收请求后将用户信息插入到用户表中。
5. 实现登录功能:前端发送登录请求,后端接收请求后从用户表中查询用户名和密码,如果匹配成功则返回登录成功的信息,否则返回登录失败的信息。
下面是一个简单的示例代码:
前端代码:
```html
<template>
<div>
<h2>登录</h2>
<input v-model="username" placeholder="请输入用户名">
<input v-model="password" placeholder="请输入密码">
<button @click="login">登录</button>
<h2>注册</h2>
<input v-model="regUsername" placeholder="请输入用户名">
<input v-model="regPassword" placeholder="请输入密码">
<button @click="register">注册</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
regUsername: '',
regPassword: '',
}
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password,
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
},
register() {
axios.post('/api/register', {
username: this.regUsername,
password: this.regPassword,
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
},
}
}
</script>
```
后端代码:
```python
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/dbname'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(20), unique=True, nullable=False)
password = db.Column(db.String(20), nullable=False)
@app.route('/api/register', methods=['POST'])
def register():
username = request.json['username']
password = request.json['password']
user = User(username=username, password=password)
db.session.add(user)
db.session.commit()
return jsonify({'message': '注册成功'})
@app.route('/api/login', methods=['POST'])
def login():
username = request.json['username']
password = request.json['password']
user = User.query.filter_by(username=username, password=password).first()
if user:
return jsonify({'message': '登录成功'})
else:
return jsonify({'message': '用户名或密码错误'})
if __name__ == '__main__':
app.run()
```
其中,`/api/register` 和 `/api/login` 是前端发送请求的地址,通过 `request.json` 获取前端发送的数据,使用 SQLAlchemy 实现数据库操作,最后返回相应的信息。