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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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安装攻略:常见问题解答(三)
2006/10/09 PHP
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
微信小程序实现全国机场索引列表
2018/01/31 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
OpenCV 模板匹配
2019/07/10 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python单例设计模式实现解析
2020/01/07 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python输入中文的实例方法
2020/09/14 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
python urllib和urllib3知识点总结
2021/02/08 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
简单的辞职信范文
2014/01/18 职场文书
学校安全检查制度
2014/01/27 职场文书
职业女性的职业规划
2014/03/04 职场文书
出生证明格式
2015/06/15 职场文书
驻村工作简报
2015/07/20 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python