欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用Vue+Flask如何实现登录验证跳转(详细教程)

程序员文章站 2022-04-16 07:57:24
...
本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码,现在分享给大家,也给大家做个参考。

本文介绍了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>

<p 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>
</p>


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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中使用vue-cli如何搭建helloWorld

layui中有关取值传值方面的问题

使用JavaScript如何实现抽奖系统

详细解答vue的变化对组件有什么影响?

以上就是使用Vue+Flask如何实现登录验证跳转(详细教程)的详细内容,更多请关注其它相关文章!