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)相关推荐：
通过使用node.js+captchapng+jsonwebtoken完成登录验证
Atas ialah kandungan terperinci Vue和Flask实现简单的登录验证跳转. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding?
Mar 19, 2024 pm 02:00 PM
Apabila anda log masuk ke akaun stim orang lain pada komputer anda, dan akaun orang lain itu kebetulan mempunyai perisian kertas dinding, stim akan memuat turun kertas dinding yang dilanggan ke akaun orang lain secara automatik selepas bertukar kembali ke akaun anda sendiri Pengguna boleh menyelesaikan masalah ini dengan mematikan penyegerakan awan wap. Apa yang perlu dilakukan jika enjin kertas dinding memuat turun kertas dinding orang lain selepas log masuk ke akaun lain 1. Log masuk ke akaun stim anda sendiri, cari penyegerakan awan dalam tetapan, dan matikan penyegerakan awan stim. 2. Log masuk ke akaun Steam orang lain yang anda log masuk sebelum ini, buka Bengkel Kreatif Kertas Dinding, cari kandungan langganan, dan kemudian batalkan semua langganan. (Sekiranya anda tidak dapat mencari kertas dinding pada masa hadapan, anda boleh mengumpulnya dahulu dan kemudian membatalkan langganan) 3. Tukar semula ke wap anda sendiri
Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar?
Mar 21, 2024 pm 09:41 PM
Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi platform popular untuk ramai anak muda untuk berkongsi kehidupan mereka dan meneroka produk baharu. Semasa penggunaan, kadangkala pengguna mungkin menghadapi kesukaran untuk log masuk ke akaun sebelumnya. Artikel ini akan membincangkan secara terperinci cara menyelesaikan masalah log masuk ke akaun lama di Xiaohongshu, dan cara menangani kemungkinan kehilangan akaun asal selepas menukar pengikatan. 1. Bagaimana untuk log masuk ke akaun sebelumnya Xiaohongshu? 1. Dapatkan kata laluan dan log masuk. Jika anda tidak log masuk ke Xiaohongshu untuk masa yang lama, akaun anda mungkin dikitar semula oleh sistem. Untuk memulihkan hak akses, anda boleh cuba log masuk ke akaun anda sekali lagi dengan mendapatkan semula kata laluan anda. Langkah-langkah operasi adalah seperti berikut: (1) Buka Aplikasi Xiaohongshu atau laman web rasmi dan klik butang "Log Masuk". (2) Pilih "Retrieve Password". (3) Masukkan nombor telefon bimbit yang anda gunakan semasa mendaftar akaun anda
Discuz penyelesaian masalah log masuk latar belakang didedahkan
Mar 03, 2024 am 08:57 AM
Penyelesaian masalah log masuk latar belakang Discuz didedahkan. ramai webmaster. Walau bagaimanapun, dengan tepat kerana fungsinya yang berkuasa, kadangkala kami menghadapi beberapa masalah semasa menggunakan Discuz, seperti masalah log masuk latar belakang. Hari ini, kami akan mendedahkan penyelesaian kepada masalah log masuk latar belakang Discuz dan memberikan contoh kod khusus, dengan harapan dapat membantu mereka yang memerlukan
Bagaimana untuk mengesahkan tandatangan dalam PDF
Feb 18, 2024 pm 05:33 PM
Kami biasanya menerima fail PDF daripada kerajaan atau agensi lain, sesetengahnya dengan tandatangan digital. Selepas mengesahkan tandatangan, kami melihat mesej SignatureValid dan tanda semak hijau. Sekiranya tandatangan tidak disahkan, kesahihannya tidak diketahui. Mengesahkan tandatangan adalah penting, mari lihat cara melakukannya dalam PDF. Cara Mengesahkan Tandatangan dalam PDF Mengesahkan tandatangan dalam format PDF menjadikannya lebih boleh dipercayai dan dokumen lebih cenderung untuk diterima. Anda boleh mengesahkan tandatangan dalam dokumen PDF dengan cara berikut. Buka PDF dalam Adobe Reader Klik kanan tandatangan dan pilih Show Signature Properties Klik butang Tunjukkan Sijil Penandatangan Tambah tandatangan pada senarai Sijil Dipercayai daripada tab Amanah Klik Sahkan Tandatangan untuk melengkapkan pengesahan Biarkan
Cara log masuk ke versi PC Kuaishou - Cara log masuk ke versi PC Kuaishou
Mar 04, 2024 pm 03:30 PM
Baru-baru ini, beberapa rakan telah bertanya kepada saya bagaimana untuk log masuk ke versi komputer Kuaishou Berikut adalah kaedah log masuk untuk versi komputer Kuaishou Rakan yang memerlukannya boleh datang dan mengetahui lebih lanjut. Langkah 1: Mula-mula, cari tapak web rasmi Kuaishou di Baidu dalam penyemak imbas komputer anda. Langkah 2: Pilih item pertama dalam senarai hasil carian. Langkah 3: Selepas memasuki halaman utama laman web rasmi Kuaishou, klik pada pilihan video. Langkah 4: Klik pada avatar pengguna di sudut kanan atas. Langkah 5: Klik kod QR untuk log masuk dalam menu log masuk pop timbul. Langkah 6: Kemudian buka Kuaishou pada telefon anda dan klik pada ikon di sudut kiri atas. Langkah 7: Klik pada logo kod QR. Langkah 8: Selepas mengklik ikon imbasan di penjuru kanan sebelah atas antara muka kod QR Saya, imbas kod QR pada komputer anda. Langkah 9: Akhirnya log masuk ke versi komputer Kuaishou
Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat
Mar 25, 2024 pm 01:26 PM
1. Selepas membuka WeChat, klik ikon carian, masukkan pasukan WeChat, dan klik perkhidmatan di bawah untuk masuk. 2. Selepas memasukkan, klik pilihan alat layan diri di sudut kiri bawah. 3. Selepas mengklik, dalam pilihan di atas, klik pilihan untuk menyahsekat/merayu untuk pengesahan tambahan.
Mulakan dari awal dan bimbing anda langkah demi langkah untuk memasang Flask dan segera buat blog peribadi
Feb 19, 2024 pm 04:01 PM
Bermula dari awal, saya akan mengajar anda langkah demi langkah cara memasang Flask dan cepat membina blog peribadi Sebagai seorang yang suka menulis, mempunyai blog peribadi adalah sangat penting. Sebagai rangka kerja Web Python yang ringan, Flask boleh membantu kami membina blog peribadi yang ringkas dan berfungsi sepenuhnya dengan cepat. Dalam artikel ini, saya akan bermula dari awal dan mengajar anda langkah demi langkah cara memasang Flask dan membina blog peribadi dengan cepat. Langkah 1: Pasang Python dan pip Sebelum bermula, kita perlu memasang Python dan pi terlebih dahulu
Bagaimana untuk log masuk ke dua peranti pada Quark
Feb 23, 2024 pm 10:55 PM
Bagaimana untuk log masuk ke dua peranti dengan Quark Browser menyokong log masuk ke dua peranti pada masa yang sama, tetapi kebanyakan rakan tidak tahu cara untuk log masuk ke dua peranti dengan Quark Browser Seterusnya, editor membawa pengguna Quark untuk log masuk kepada dua peranti tutorial grafik kaedah, pengguna yang berminat datang dan lihat! Tutorial penggunaan Pelayar Quark Cara log masuk ke dua peranti 1. Mula-mula buka APP Pelayar Quark dan klik [Cakera Rangkaian Quark] pada halaman utama 2. Kemudian masukkan antara muka Cakera Rangkaian Quark dan pilih fungsi perkhidmatan [My Backup]. ; 3. Akhir sekali, pilih [Tukar Peranti] untuk log masuk ke dua peranti baharu.
