Vue+Flask實現簡單的登入驗證跳轉的範例程式碼，vueflask

最後更新：2018-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文介紹了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, jsonifyapp = 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)

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More