Vue und Flask implementieren einen einfachen Sprung zur Anmeldebestätigung-js-Tutorial-php.cn

Vue und Flask implementieren einen einfachen Sprung zur Anmeldebestätigung

小云云

Freigeben： 2018-01-15 10:20:23

Original

2936 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von Vue+Flask zur Implementierung eines einfachen Anmeldeüberprüfungssprungs vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Dateispeicherort:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwandte Empfehlungen:

So verwenden Sie Vue zur Implementierung der Anmeldung Verifizierung

Beispiel für die Freigabe von JavaScript-Anmeldeüberprüfungen, grundlegendes Tutorial

Vollständige Anmeldeüberprüfung mit node.js+captchapng+jsonwebtoken

Das obige ist der detaillierte Inhalt vonVue und Flask implementieren einen einfachen Sprung zur Anmeldebestätigung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!