Vue and Flask implement simple login verification jump-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Vue and Flask implement simple login verification jump

Jan 15, 2018 am 10:20 AM

flask Log in verify

This article mainly introduces the sample code of Vue+Flask to implement simple login verification jump. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

File location:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Login&lt;/title&gt;

  &lt;script type=&quot;text/javascript&quot; src=&quot;../static/vue.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;../static/axios.js&quot;&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;p id=&quot;login&quot;&gt;
  &lt;form action=&quot;#&quot; novalidate&gt;
    &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; placeholder=&quot;Enter your Name&quot; v-model=&quot;username&quot;&gt;&lt;br&gt;
    &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Enter your Password&quot; v-model=&quot;password&quot;&gt;&lt;br&gt;
    &lt;br&gt;

    &lt;button type=&quot;button&quot; v-on:click=&quot;login&quot;&gt;Apply&lt;/button&gt;
  &lt;/form&gt;
&lt;/p&gt;


&lt;script type=&quot;text/javascript&quot;&gt;
  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)
        })

      }
    }
  })
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy after login

index.html

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Index&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Hello,This is Index Page!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

# -*- 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;: &quot;123456&quot;})
  # 登录失败，跳转到当前登录页面
  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)

Copy after login

Related recommendations:

How to use vue to implement login verification

Example sharing JavaScript login verification basic tutorial

Complete login verification by using node.js+captchapng+jsonwebtoken

The above is the detailed content of Vue and Flask implement simple login verification jump. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn