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

flaskLog inverify

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:

<!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: &#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)
        })

      }
    }
  })
</script>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>
  <h1 id="Hello-This-nbsp-is-nbsp-Index-nbsp-Page">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(&#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;: "123456"})
  # 登录失败，跳转到当前登录页面
  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)

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

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

Flask + Vue.js：快速实现单页面应用Jun 17, 2023 am 09:06 AM

随着移动互联网和Web技术的迅速发展，越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求，而单页面应用（SPA）则成为了解决方案之一。那么，如何快速实现单页面应用呢？本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架，它的优点是灵活、易扩

Flask和Intellij IDEA集成： Python web应用程序开发技巧（第二部分）Jun 17, 2023 pm 01:58 PM

在第一部分介绍了基本的Flask和IntellijIDEA集成、项目和虚拟环境的设置、依赖安装等方面的内容。接下来我们将继续探讨更多的Pythonweb应用程序开发技巧，构建更高效的工作环境：使用FlaskBlueprintsFlaskBlueprints允许您组织应用程序代码以便于管理和维护。Blueprint是一个Python模块，能够包

如何使用python+Flask实现日志在web网页实时更新显示May 17, 2023 am 11:07 AM

一、日志输出到文件使用模块：logging可以生成自定义等级日志，可以输出日志到指定路径日志等级：debug(调试日志)=5){clearTimeout(time)//如果连续10次获取的都是空日志清除定时任务}return}if(data.log_type==2){//如果获取到新日志for(i=0;i

Flask-RESTful和Swagger: Python web应用程序中构建RESTful API的最佳实践（第二部分）Jun 17, 2023 am 10:39 AM

Flask-RESTful和Swagger:Pythonweb应用程序中构建RESTfulAPI的最佳实践（第二部分）在上一篇文章中，我们探讨了如何使用Flask-RESTful和Swagger来构建RESTfulAPI的最佳实践。我们介绍了Flask-RESTful框架的基础知识，并展示了如何使用Swagger来构建RESTfulAPI的文档。本

Flask和Sublime Text集成: Python web应用程序开发技巧（第六部分）Jun 17, 2023 pm 04:08 PM

Flask和SublimeText集成:Pythonweb应用程序开发技巧（第六部分）SublimeText和Flask都是Pythonweb应用程序开发中的重要工具。然而，如何将二者集成起来，使得开发过程更加高效呢？本文将介绍一些SublimeText的插件和配置技巧，帮助你更方便地开发Flask应用程序。一、安装SublimeText插件F

Flask和Eclipse集成: Python web应用程序开发技巧（第三部分）Jun 17, 2023 pm 03:27 PM

Flask和Eclipse集成:Pythonweb应用程序开发技巧（第三部分）在前两篇文章中，我们介绍了如何将Flask与Eclipse集成，以及如何创建Flask应用程序。在本文中，我们将继续探讨如何开发和调试Flask应用程序，以及如何管理数据库。一、开发和调试Flask应用程序创建和运行Flask应用程序在Eclipse的ProjectExplo

Flask-Security: 在Python web应用程序中添加用户身份验证和密码加密Jun 17, 2023 pm 02:28 PM

Flask-Security:在Pythonweb应用程序中添加用户身份验证和密码加密随着互联网的不断发展，越来越多的应用程序需要用户身份验证和密码加密来保护用户数据的安全性。而在Python语言中，有一个非常流行的Web框架——Flask。Flask-Security是基于Flask框架的一个扩展库，它可以帮助开发人员在Pythonweb应用程序中轻

Python Flask JinJa2语法如何使用May 16, 2023 am 09:19 AM

一、概述Flask是一个轻量级的PythonWeb框架，支持Jinja2模板引擎。Jinja2是一个流行的Python模板引擎，它可以使用Flask来创建动态Web应用程序。web页面一般需要html、css和js，可能最开始学习pythonweb的时候可能这样写：fromflaskimportFlaskapp=Flask(__name__)@app.route('/')defhello():return'hellohelloworld!!!&am

See all articles