Vue+Flask实现简单的登录验证跳转的示例代码

前端之家收集整理的这篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了Vue+Flask实现简单的登录验证跳转分享给大家,具体如下:

文件位置:

login.html

<Meta charset="UTF-8"> Login

<script type="text/javascript" src="../static/vue.js">
<script type="text/javascript" src="../static/axios.js">

<div id="login">

<script type="text/javascript">
var login = new Vue({
el: '#login',data:{
username: '',password: ''
},methods: {
login: function () {
axios.post('http://127.0.0.1:5000/login',{
username: this.username,password: this.password
}).then(function (response) {
console.log(response.status)
// 其实是应该走后台路由
if(parseInt(response.status) === 200){
window.location.href = 'index'
}
}).catch(function (error) {
console.log(error.response)
})

  }
}

})

index.html

<Meta charset="UTF-8"> Index

Hello,This is Index Page!

Login.py

from flask import Flask,request,session,redirect,url_for,render_template,make_response,jsonify
app = Flask(name)

@app.route('/login',methods=('GET','POST'))
def login():
if request.method == 'POST':
session['username'] = request.json.get('username')
session['password'] = request.json.get('password')

登录成功,则跳转到index页面

return jsonify({'code': 200,'token': "123456"})

登录失败,跳转到当前登录页面

return render_template('login.html')

@app.route('/index')
def index():

如果用户名和密码都存在,则跳转到index页面登录成功

if 'username' in session and 'password' in session:
return render_template('index.html')

否则,跳转到login页面

return redirect(url_for('login'))

@app.route('/logout')
def logout():
session.pop('username',None)
session.pop('password',None)
return redirect(url_for('login'))

set the secret key. keep this really secret:

app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'

if name == 'main':
app.run(debug=True)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/34180.html

猜你在找的Vue相关文章