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

更新时间：2018年01月13日 16:24:58 作者：YJ_

本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

文件位置：

<!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>

# -*- 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中ref和$refs的介绍以及使用方法示例
这篇文章主要给大家介绍了关于Vue中ref和$refs使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Vue的模板语法以及实战案例
Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据,下面这篇文章主要给大家介绍了关于Vue的模板语法以及案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
彻底搞懂并解决vue-cli4中图片显示的问题实现
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
浅谈VUE项目打包后运行页面一片白问题
本文主要介绍了浅谈VUE项目打包后运行页面一片白问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2023-01-01
Vue 仿QQ左滑删除组件功能
前几天朋友在做vue项目开发时，有人反映 IOS 上面的滑动点击有点问题，让我们来帮忙解决，于是我就重写了代码，下面把vue仿qq左滑删除组件功能分享到脚本之家平台，需要的朋友参考下吧
2018-03-03
Vue组件间的样式冲突污染问题详解
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因，我们接下来探究一下
2022-11-11
Vue.js第二天学习笔记（vue-router）
这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记，关于vue-router的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue中使用Lodop插件实现打印功能的简单方法
这篇文章主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12
Vue单文件组件开发实现过程详解
这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
Vue如何获取两个时间点之间的所有间隔时间
这篇文章主要介绍了Vue如何获取两个时间点之间的所有间隔时间，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07