Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 20:05:58

Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

文件位置。login.html。<；，{ username： this.username.password： this.password }).then(function (response) { console.log(response.status) // 其實(shí)是應(yīng)該走后臺(tái)路由 if(parseInt(response.status) === 200){ window.location.href = '；index'；} }).catch(function (error) { console.log(error.response) }) } } })<；/script>；<；/body>；<；/html>；。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀文件位置。login.html。<；，{ username： this.username.password： this.password }).then(function (response) { console.log(response.status) // 其實(shí)是應(yīng)該走后臺(tái)路由 if(parseInt(response.status) === 200){ window.location.href = '；index'；} }).catch(function (error) { console.log(error.response) }) } } })<；/script>；<；/body>；<；/html>；。

本文主要介紹了Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望能幫助到大家。

文件位置：

<!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)
 // 其實(shí)是應(yīng)該走后臺(tái)路由
 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, 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')
 # 登錄成功，則跳轉(zhuǎn)到index頁(yè)面
 return jsonify({'code': 200, 'token': "123456"})
 # 登錄失敗，跳轉(zhuǎn)到當(dāng)前登錄頁(yè)面
 return render_template('login.html')


@app.route('/index')
def index():
 # 如果用戶名和密碼都存在，則跳轉(zhuǎn)到index頁(yè)面，登錄成功
 if 'username' in session and 'password' in session:
 return render_template('index.html')
 # 否則，跳轉(zhuǎn)到login頁(yè)面
 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)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE fl flask

熱門焦點(diǎn)

做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

Vue和Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)

最新推薦

猜你喜歡

熱門推薦