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 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 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二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
初始Nodejs
2014/11/08 NodeJs
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
原生js实现自定义消息提示框
2020/11/19 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
新员工欢迎词
2014/01/12 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
导游个人求职信
2014/04/25 职场文书
爱国主义演讲稿
2014/05/07 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
自我工作评价范文
2015/03/06 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Python实现Hash算法
2022/03/18 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python