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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
Nuxt的路由动画效果案例
Nov 06 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服务器实现多session并发运行
2006/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Bootstrap列表组学习使用
2017/02/09 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
浅谈React高阶组件
2018/03/28 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
python Tkinter的图片刷新实例
2019/06/14 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
个人求职信范文分享
2013/12/13 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
在校实习生求职信
2014/06/18 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
教师岗位说明书
2015/09/30 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS