Home > Web Front-end > JS Tutorial > body text

How to implement login verification jump using Vue+Flask (detailed tutorial)

亚连
Release: 2018-06-12 10:18:26
Original
5317 people have browsed it

This article mainly introduces the sample code of Vue Flask to implement simple login verification jump. Now I share it with you and give it as a reference.

This article introduces Vue Flask to implement a simple login verification jump and shares it with everyone. The details are as follows:

File location:

login.html




  
  Login

  
  





Copy after login

index.html




  
  Index

Hello,This is Index Page!

Copy after login

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)
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to build helloWorld using vue-cli in vue

Issues related to value passing in layui

How to implement a lottery system using JavaScript

Detailed answer: What impact do changes in vue have on components?

The above is the detailed content of How to implement login verification jump using Vue+Flask (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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 [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!