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


Posted in Javascript onJanuary 13, 2018

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

文件位置: 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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 #Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
You might like
php 表单验证实现代码
2009/03/10 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
浅谈Python NLP入门教程
2017/12/25 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
如何表示python中的相对路径
2020/07/08 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
公务员培的训心得体会
2014/09/01 职场文书
工程承包协议书范本
2014/09/29 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
文案策划岗位职责
2015/02/11 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android