首頁 > 文章 > web前端 > 使用Vue+Flask如何實現登入驗證跳轉（詳細教學）

使用Vue+Flask如何實現登入驗證跳轉（詳細教學）

亚连原創: 2018-06-12 10:18:265481瀏覽

本篇文章主要介紹了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>

<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: &#39;#login&#39;,
    data:{
      username: &#39;&#39;,
      password: &#39;&#39;
    },
    methods: {
      login: function () {
        axios.post(&#39;http://127.0.0.1:5000/login&#39;,{
          username: this.username,
          password: this.password
        }).then(function (response) {
          console.log(response.status)
          // 其实是应该走后台路由
          if(parseInt(response.status) === 200){
            window.location.href = &#39;index&#39;
          }
        }).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(&#39;/login&#39;, methods=(&#39;GET&#39;, &#39;POST&#39;))
def login():
  if request.method == &#39;POST&#39;:
    session[&#39;username&#39;] = request.json.get(&#39;username&#39;)
    session[&#39;password&#39;] = request.json.get(&#39;password&#39;)
    # 登录成功，则跳转到index页面
    return jsonify({&#39;code&#39;: 200, &#39;token&#39;: "123456"})
  # 登录失败，跳转到当前登录页面
  return render_template(&#39;login.html&#39;)


@app.route(&#39;/index&#39;)
def index():
  # 如果用户名和密码都存在，则跳转到index页面，登录成功
  if &#39;username&#39; in session and &#39;password&#39; in session:
    return render_template(&#39;index.html&#39;)
  # 否则，跳转到login页面
  return redirect(url_for(&#39;login&#39;))


@app.route(&#39;/logout&#39;)
def logout():
  session.pop(&#39;username&#39;, None)
  session.pop(&#39;password&#39;, None)
  return redirect(url_for(&#39;login&#39;))


# set the secret key. keep this really secret:
app.secret_key = &#39;A0Zr98j/3yX R~XHH!jmN]LWX/,?RT&#39;


if __name__ == &#39;__main__&#39;:
  app.run(debug=True)

上面是我整理給大家的，希望今後會對大家有幫助。

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

layui中有關取值傳值方面的問題

使用JavaScript如何實作抽獎系統

#詳細解答vue的變化對元件有什麼影響？

以上是使用Vue+Flask如何實現登入驗證跳轉（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript flask

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用JS動態載入綁定下一篇：如何使用JS動態載入綁定

看更多