Vue+Flask实现简单的登录验证跳转

Easter79
• 阅读 609

文件位置: 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>

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

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)
点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
tail
1.1tailf失效情况的重现我们使用tailftmp.test对tmp.test文件进行动态追踪,输出如下:!输入图片说明(https://static.oschina.net/uploads/img/201804/03140352_uKOr.png"在这里输入图片标题")然后我们再开
Stella981 Stella981
2年前
Fiddle设置iphone抓包
_注意:保证手机和电脑在一个网络上_一,设置Fiddler!输入图片说明(https://static.oschina.net/uploads/img/201707/27100350_ckfa.png"在这里输入图片标题")!输入图片说明(https://static.oschina.net/uploads/img/201707
Stella981 Stella981
2年前
Intellij idea或者Android Studio实用Live_Templates好用模板整理
Live\_Templates的作用是自动补全代码:自定义补全代码:单例模式:sin!输入图片说明(https://static.oschina.net/uploads/img/201707/17114328_kR84.png"在这里输入图片标题")Templatetext:privatestatic
Stella981 Stella981
2年前
Canvas
Canvas04柱状图!输入图片说明(https://static.oschina.net/uploads/img/201707/04223024_wxwr.png"在这里输入图片标题")代码如下:<!DOCTYPEhtml<htmllang"zhCN"<head<metacharset"UTF8"<met
Wesley13 Wesley13
2年前
PHP中的依赖注入(DI)容器
!输入图片说明(https://static.oschina.net/uploads/img/201806/03164821_lowC.png"在这里输入图片标题")介绍我们已经介绍过了PHP反射API(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fphpcast
Stella981 Stella981
2年前
Alamofire4.x开源代码分析(一)使用方法
!输入图片说明(https://static.oschina.net/uploads/img/201706/28090437_aIT1.png"在这里输入图片标题")本着了解框架的实现思路和学习Swift的目的开启本系列的博客.本系列参考Alamofire(https://www.oschina.net/action/GoToLink?urlh
Easter79 Easter79
2年前
SpringMVC vs Struts2
SpringMVCvsStruts2S性能!输入图片说明(https://static.oschina.net/uploads/img/201703/27180357_LUj5.png"在这里输入图片标题")MVC框架性能比较几篇文章:Link(https://www.oschina.net/action/GoT
Wesley13 Wesley13
2年前
PHP 与 GO
PHP!输入图片说明(https://static.oschina.net/uploads/img/201608/22112754_GEtW.png"在这里输入图片标题")输出json!输入图片说明(https://static.oschina.net/uploads/img/201608/22112825_n
Stella981 Stella981
2年前
Delivery Pipeline
deliverypipeline!输入图片说明(https://static.oschina.net/uploads/img/201702/04110334_cl3u.png"在这里输入图片标题")下面这个是netflix的部署流程:!输入图片说明(https://static.oschina.net/uploads/img/2017
Wesley13 Wesley13
2年前
Java爬虫技术之绕过百度云防护抓取网站内容
如图:!输入图片说明(https://static.oschina.net/uploads/img/201710/07121525_pg5J.png"在这里输入图片标题")首先需要一个Http工具类:HttpHandlepackageorg.coody.robot.util;importjava.io.Byt
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k