Vue和Flask实现简单的登录验证跳转-js教程-PHP中文网

首页

web前端

js教程

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

小云云

Jan 15, 2018 am 10:20 AM

flask 登录验证

本文主要介绍了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>

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

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7450

CakePHP 教程

1374

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

wallpaperengine登录别的号后下载别人的壁纸怎么办 Mar 19, 2024 pm 02:00 PM

当你在自己电脑上登过别人steam账号之后，恰巧这个别人的账号也有wallpaper软件，切换回自己账号之后steam就会自动下载别人账号订阅的壁纸，用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号，在设置里面找到云同步，关闭steam云同步。2、登陆你之前登陆的别人的steam账号，打开wallpaper创意工坊，找到订阅内容，然后取消全部订阅。（以后防止找不到壁纸，可以先收藏再取消订阅）3、切换回自己的stea

小红书怎么登录以前的账号？它换绑后原来号丢失了怎么办？ Mar 21, 2024 pm 09:41 PM

随着社交媒体的迅速发展，小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中，有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题，以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号？1.找回密码登录如果长时间未登录小红书，可能导致账号被系统回收。为了恢复访问权限，你可以尝试通过找回密码的方式重新登录账号。操作步骤如下：（1）打开小红书App或官网，点击“登录”按钮。（2）选择“找回密码”。（3）输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘，需要具体代码示例随着互联网的快速发展，网站建设变得越来越普遍，而Discuz作为一款常用的论坛建站系统，受到了许多站长的青睐。然而，正是因为其功能强大，有时候我们在使用Discuz的过程中会遇到一些问题，比如后台登录问题。今天，我们就来大揭秘Discuz后台登录问题的解决方法，并且提供具体的代码示例，希望能帮助到有需要

如何在PDF中验证签名 Feb 18, 2024 pm 05:33 PM

我们通常接收到政府或其他机构发送的PDF文件，有些文件带有数字签名。验证签名后，我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证，会显示有效性未知。验证签名很重要，下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信，文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名，然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

快手电脑版怎么登录-快手电脑版的登录方法 Mar 04, 2024 pm 03:30 PM

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法，有需要的小伙伴可以来了解了解哦。第一步：首先在电脑的浏览器上百度搜索快手官网。第二步：在搜索结果列表里面选取第一条。第三步：进入到快手官网主页面后，点击视频的选项。第四步：点击右上角的用户头像。第五步：在弹出的登录菜单里面点击二维码登录。第六步：之后打开手机上的快手，点击左上角的图标。第七步：点击二维码标志。第八步：在我的二维码界面点击右上角的扫描图标之后，扫描电脑上的二维码即可。第九步：最后电脑版的快手就登录成

微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后，点击搜索图标，输入微信团队，点击下方的服务进入。2、进入后，点击左下方的自助工具的选项。3、点击后，在上方的选项内，点击解封/申诉辅助验证的选项。

从头开始，逐步指导您安装Flask，快速建立个人博客 Feb 19, 2024 pm 04:01 PM

从零开始，手把手教你安装Flask和快速搭建个人博客作为一个喜欢写作的人来说，拥有一个个人博客是非常重要的。而Flask作为一个轻量级的PythonWeb框架，可以帮助我们快速搭建一个简洁而功能完善的个人博客。在本文中，我将从零开始，手把手教你如何安装Flask并快速搭建个人博客。第一步：安装Python和pip在开始之前，我们需要先安装Python和pi

夸克怎么登录两个设备 Feb 23, 2024 pm 10:55 PM

夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的，但是多数的小伙伴不知道夸克浏览器如何登陆两个设备，接下来就是小编为用户带来的夸克登陆两个设备方法图文教程，感兴趣的用户快来一起看看吧！夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP，主页面点击【夸克网盘】;2、接着进入到夸克网盘界面，选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题