Vue+Flask实现简单的登录验证跳转的示例代码
2018-01-13 16:24
1206 查看
本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下:
文件位置:
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../static/vue.js"></script> <script type="text/javascript" src="../static/axios.js"></script> </head> <body> <div id="login"> <form action="#" novalidate> <label for="username">Username</label> <input type="text" name="username" id="username" placeholder="Enter your Name" v-model="username"><br> <label for="password">Password</label> <input type="text" name="password" id="password" placeholder="Enter your Password" v-model="password"><br> <br> <button type="button" v-on:click="login">Apply</button> </form> </div> <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) }) } } }) </script> </body> </html>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> </head> <body> <h1>Hello,This is Index Page!</h1> </body> </html>
Login.py
# -*- coding: utf-8 -*- 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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue+Flask实现简单的登录验证跳转
- Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能
- SpringMVC拦截器――实现登录验证拦截器的示例代码
- 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
- vue登录注册及token验证实现代码
- 用 vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)
- AJAX学习明灯,简单示例:AJAX+存储过程实现无刷新简单登录验证功能!
- 用vue的双向绑定简单实现一个todo-list的示例代码
- 简单示例:AJAX结合PHP代码实现登录
- 简单示例AJAX结合PHP代码实现登录效果代码
- 简单示例AJAX结合PHP代码实现登录效果代码
- 简单示例AJAX结合PHP代码实现登录效果代码-2
- vue 登录滑动验证实现代码
- ASP.NET Core中实现用户登录验证的最低配置示例代码
- Vue实战之vue登录验证的实现代码
- C#实现数据库事务处理的简单示例代码
- 分别用(Windows/Form/Soap/WebService)实现用户身份验证(含示例代码下载)
- 分别用(Windows/Form/Soap/WebService)实现用户身份验证(含示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 用SHA1或MD5 算法加密数据(示例:对用户身份验证的简单实现)