写一个flask-vue-elementui登录注册页面
时间: 2024-01-20 07:02:10 浏览: 49
好的,以下是一个简单的 Flask-Vue-ElementUI 登录注册页面的实现。
1. 创建 Flask 应用
首先,创建一个 Flask 应用,并添加必要的依赖:
```python
from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'secret-key'
db = SQLAlchemy(app)
CORS(app)
# 定义 User 数据模型
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(50), unique=True)
password = db.Column(db.String(50))
def __repr__(self):
return '<User %r>' % self.username
# 创建数据库
with app.app_context():
db.create_all()
```
2. 创建前端页面
在 `templates` 目录下创建 `index.html` 文件,用 ElementUI 创建一个登录和注册页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tabs v-model="activeTab">
<el-tab-pane label="Login" name="login">
<el-form label-width="80px" ref="form" :model="loginForm" :rules="loginRules" class="demo-ruleForm">
<el-form-item label="Username" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('form')">Login</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="Register" name="register">
<el-form label-width="80px" ref="form" :model="registerForm" :rules="registerRules" class="demo-ruleForm">
<el-form-item label="Username" prop="username">
<el-input v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="registerForm.password"></el-input>
</el-form-item>
<el-form-item label="Confirm Password" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register('form')">Register</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
activeTab: 'login',
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
]
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
registerRules: {
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: 'Please confirm your password', trigger: 'blur' },
{ validator: validateConfirmPassword, trigger: 'blur' }
]
}
},
methods: {
login(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('/login', this.loginForm)
.then(response => {
if (response.data.success) {
alert('Login Success!');
} else {
alert('Login Failed!');
}
})
.catch(error => {
console.log(error);
});
} else {
console.log('Login Form Invalid!');
return false;
}
});
},
register(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('/register', this.registerForm)
.then(response => {
if (response.data.success) {
alert('Register Success!');
this.activeTab = 'login';
} else {
alert('Register Failed!');
}
})
.catch(error => {
console.log(error);
});
} else {
console.log('Register Form Invalid!');
return false;
}
});
},
validateConfirmPassword(rule, value, callback) {
if (value !== this.registerForm.password) {
callback(new Error('The two passwords do not match'));
} else {
callback();
}
}
}
});
</script>
</body>
</html>
```
3. 创建后端 API
在 `app.py` 文件中创建登录和注册的 API:
```python
# 登录API
@app.route('/login', methods=['POST'])
def login():
username = request.json['username']
password = request.json['password']
user = User.query.filter_by(username=username).first()
if user is not None and user.password == password:
return jsonify({'success': True})
return jsonify({'success': False})
# 注册API
@app.route('/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({'success': True})
```
4. 运行应用
最后,在命令行中运行应用:
```bash
$ export FLASK_APP=app.py
$ export FLASK_ENV=development
$ flask run
```
然后在浏览器中打开 `http://localhost:5000` 就可以看到登录和注册页面了。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)