使用Python-Flask框架开发Web网站系列课程(三)登录功能

简介: 版权声明:如需转载,请注明转载地址。 https://blog.csdn.net/oJohnny123/article/details/81975386 前言使用IDE:PyCharm操作系统:MacPython的版本:3.6我的邮箱:51263921@qq.com交流群:372430835说明:本次课程的GitHub代码在最下面。
版权声明:如需转载,请注明转载地址。 https://blog.csdn.net/oJohnny123/article/details/81975386

前言


使用IDE:PyCharm

操作系统:Mac

Python的版本:3.6

我的邮箱:51263921@qq.com

交流群:372430835

说明:

本次课程的GitHub代码在最下面。

本次课程基于上个课程的代码,如果没看过的请先传送:

使用Python的瓶框架开发的Web网站系列课程(一)构建项目

使用Python的瓶框架开发的Web网站系列课程(二)注册功能

 

一、登录


本次课程主要实现登录,我们按照实际开发的流程,先看到登录页面,再尝试页面传值(也就是输入账号密码)到服务端,服务端校验和鉴权,并跳转页面。

1.1增加backend.account.views关于登录的代码

全路径:/myproject/backend/account/views.py

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/22 上午9:40.
"""
from flask import Blueprint,request,render_template,jsonify,flash  #第二课增加内容
from backend.models.UserModel import User
from backend.models import db

#账户的蓝图  访问http://host:port/account 这个链接的子链接,都会跳到这里
account = Blueprint('/account', __name__)  #第二课增加内容

# 访问http://host:port/account/register 这个链接,就会跳到这里
@account.route('/register',methods=(["GET","POST"]))  #第二课增加内容
#上面的链接,绑定的就是这个方法,我们给浏览器或者接口请求 一个json格式的返回
def register():  #第二课增加内容
    if request.method == 'POST':
        form = request.form
        user = User(username=form['username'],email=form['email'],password=form['password'])
        db.session.add(user)
        db.session.commit()
        return jsonify(form)
    return render_template('/account/register.html')

@account.route('/login',methods=(["GET","POST"]))
def login(): #第三课内容
    if request.method == "POST":
        return  jsonify(request.form)
    return render_template('/account/login.html')

1.2增加html页面文件

全路径:/myproject/frontend/account/login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Login</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="middle-box text-center loginscreen animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name">IN+</h1>
            </div>
            <h3>Welcome to IN+</h3>
            <p>Perfectly designed and precisely prepared admin theme with over 50 pages with extra new web app views.
                <!--Continually expanded and constantly improved Inspinia Admin Them (IN+)-->
            </p>
            <p>Login in. To see it in action.</p>
            <form class="m-t" role="form" action="/account/login" method="post">
                <div class="form-group">
                    <input type="text" class="form-control" name="username" placeholder="Username" required="">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" placeholder="Password" required="">
                </div>

                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    <div class="alert alert-success">
                        {% for message in messages %}
                          {{ message }}
                        {% endfor %}
                    </div>
                  {% endif %}
                {% endwith %}

                <button type="submit" class="btn btn-primary block full-width m-b">Login</button>

                <a href="#"><small>Forgot password?</small></a>
                <p class="text-muted text-center"><small>Do not have an account?</small></p>
                <a class="btn btn-sm btn-white btn-block" href="register.html">Create an account</a>
            </form>
            <p class="m-t"> <small>Inspinia we app framework base on Bootstrap 3 &copy; 2014</small> </p>
        </div>
    </div>

    <!-- Mainly scripts -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>

</body>
</html>

1.3 测试一把

点击login后显示如下的话,表示成功。

{
  "password": "abc123", 
  "username": "admin"
}

1.4 修改backend.account.view 增加鉴权代码

1.4.1 装个包    pip install Flask-Login==0.4.1

1.4.2 修改 /myproject/backend/view.py  注意修改文件的路径

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/21 下午3:51.
"""
from flask_login import LoginManager  #第三课新增


# Set up Flask-Login
login_manager = LoginManager()  #第三课新增
login_manager.session_protection = 'strong'  #第三课新增
login_manager.login_view = 'account.login'  #第三课新增

1.4.3 修改/myproject/backend/__init__.py

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/21 下午2:41.
"""
import os
from flask import Flask
from config.config import config
from backend.urls import register
from backend.models import db  #第二课增加内容
from backend.views import login_manager #第三课增加内容

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
BASE_TEMPLATE_FOLDER = os.path.join(BASE_DIR,'frontend')

def create_app():
    #初始化项目实例
    app = Flask(__name__,template_folder=BASE_TEMPLATE_FOLDER,static_folder=os.path.join(BASE_DIR,'frontend','static'))
    app.secret_key = app.config['SECRET_KEY']

    #导入配置项
    app.config.from_object(config)
    # 注册路由
    register(app)
    # 注册数据库
    db.init_app(app) #第二课增加内容
    #注册登录组件
    login_manager.init_app(app)  #第三课增加内容

    # 钩子 在请求执行之前
    @app.before_request
    def before_request():
       print('hi')

    return app

1.4.4 修改/myproject/backend/account/views.py

这里和之前的区别是增加了鉴权的内容,判断用户名和密码是否为空,判断密码对不对。增加了登出的功能。

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/22 上午9:40.
"""
from flask import Blueprint,request,render_template,jsonify,flash  #第二课增加内容
from flask import redirect,url_for,current_app
from backend.models.UserModel import User
from backend.models import db
from flask_login import login_user,login_required,logout_user #第三课增加内容


#账户的蓝图  访问http://host:port/account 这个链接的子链接,都会跳到这里
account = Blueprint('account', __name__)  #第二课增加内容

# 访问http://host:port/account/register 这个链接,就会跳到这里
@account.route('/register',methods=(["GET","POST"]))  #第二课增加内容
#上面的链接,绑定的就是这个方法,我们给浏览器或者接口请求 一个json格式的返回
def register():  #第二课增加内容
    if request.method == 'POST':
        form = request.form 
        user = User(username=form['username'],email=form['email'],password=form['password'])  
        db.session.add(user)
        db.session.commit()
        return jsonify(form)
    return render_template('/account/register.html')

@account.route('/login',methods=(["GET","POST"]))
def login(): #第三课内容
    if request.method == "POST":
        form = request.form #获取登录表单
        user = User.query.filter_by(username=form['username']).first()  #查出用户信息
        if user is not None and user.password_hash is not None and user.verify_password(form['password']):  #检查密码是否正确
            login_user(user,True)  #登录操作
            flash('You are now logged in. Welcome back!', 'success')
            return redirect( url_for(request.args.get('next') or 'admin.index'))
        else:
            flash('Invalid email or password.', 'error')
    return render_template('/account/login.html')

@account.route('/logout')
@login_required
def logout():
    logout_user()
    flash('You have been logged out.', 'info')
    return redirect(url_for('admin.index'))

1.4.5 调整一下我们的/myproject/backend/models/UserModel.py

 增加了鉴权模块需要的东西,知识点可以百度flask_login的user_loader和anonymous_user

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/22 下午1:50.
"""
from flask_login import UserMixin,AnonymousUserMixin  #第二课增加内容
from werkzeug.security import check_password_hash, generate_password_hash  #第二课增加内容
from backend.models import db  #第二课增加内容
from backend.views import login_manager #第三课新增

class User(UserMixin, db.Model):  #第二课增加内容
    __tablename__ = 'users'  #这是我们将来建出来的表的表名,在这里定义,下面的都是字段名和字段类型长度这些
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(64), index=True)
    email = db.Column(db.String(64), unique=True, index=True)
    password_hash = db.Column(db.String(128))

    #脱敏
    @property
    def password(self):  #第二课增加内容
        raise AttributeError('`password` is not a readable attribute')
    #加密
    @password.setter
    def password(self, password):  #第二课增加内容
        self.password_hash = generate_password_hash(password)
    #校验密码
    def verify_password(self, password):  #第二课增加内容
        return check_password_hash(self.password_hash, password)
    #查询返回的格式
    def __repr__(self):  #第二课增加内容
        return '<User \'%s\'>' % self.username

class AnonymousUser(AnonymousUserMixin): #第三课新增
    def can(self, _):
        return False

    def is_admin(self):
        return False


login_manager.anonymous_user = AnonymousUser   #第三课新增


@login_manager.user_loader  
def load_user(user_id): #第三课新增
    return User.query.get(int(user_id))

1.4.6 增加前端目录和页面

先建文件夹

      全路径:/myproject/frontend/base

新增页面html文件layout.html

       /myproject/frontend/base/layout.html

内容为:

<!doctype html>
<title>My Application</title>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
{% block body %}{% endblock %}

新增页面html文件index.html

    /myproject/frontend/base/index.html

{% extends "base/layout.html" %}
{% block body %}
  <h1>Overview</h1>
  {% if current_user.is_authenticated %}
    <p>welcome ~ <a href="/account/logout">logout</a>
  {% else %}
  <p>Do you want to <a href="/account/login">log in?</a>
  {% endif %}
{% endblock %}

1.4.7 新增后端文件夹和文件

在/myproject/backend/下新增文件夹  admin

       全路径: /myproject/backend/admin

在admin下新增__init__.py和views.py

      /myproject/backend/admin/__init__.py内容为空

     全路径:/myproject/backend/admin/views.py

     内容如下:

#!/usr/bin/python
# -*- coding: UTF-8 -*-
"""
Created by liaoyangyang1 on 2018/8/23 上午11:09.
"""
from flask import Blueprint,render_template
from backend.account.views import login_required

admin = Blueprint('admin', __name__)


@admin.route('/')
def index():
    return render_template('/base/index.html')

 

 二,测试登录


访问http://127.0.0.1:10101/admin/

显示内容为,意思就是你没登录,让你点登录:

概观

你想  登录吗?

点击后跳转页面,到我们一开始做的登录页面,网址为http://127.0.0.1:10101/account/login

输入账号密码登录,成功的话跳转回一开始的页面,但是显示内容变了:

 

  • 您现在已登录。欢迎回来!

概观

欢迎〜  注销

 

是不是很简单〜

三,本课代码


github:https:  //github.com/lyy8510a/myproject/releases/tag/v3

 

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
3天前
|
开发框架 JSON API
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
【7月更文挑战第22天】在Python Web开发中,设计高效的RESTful API涉及选择框架(如Flask或Django)、明确资源及使用HTTP方法(GET, POST, PUT, DELETE)来操作数据。响应格式通常是JSON,错误处理也很重要。示例展示了使用Flask创建图书管理API,包括版本控制、文档化、安全性和性能优化是最佳实践。这样的API使数据交互更顺畅。
18 2
|
1天前
|
JSON API 网络架构
揭秘!Python Web框架下的RESTful API设计,为何成为互联网新宠?
【7月更文挑战第24天】在互联网快速发展背景下,RESTful API以其简洁性和可扩展性成为应用间通信的首选。REST强调资源为核心,利用HTTP方法处理CRUD操作,促进前后端分离,提高开发效率。Python的Flask框架支持轻松构建RESTful API,通过路由、请求和响应机制实现。示例代码展示了如何使用Flask创建、读取和更新用户信息。Python Web框架因其丰富的工具和库,简化RESTful API开发,适应微服务架构需求,在互联网发展中扮演重要角色。
|
4天前
|
移动开发 小程序 JavaScript
转Web运行时的“框架”模块主要负责什么功能
转Web运行时的“框架”模块主要负责什么功能
|
4天前
|
API 网络架构 开发者
探索Python Web框架的核心:路由机制详解
【7月更文挑战第21天】Python Web开发中,Flask和Django的路由机制解析:Flask用@app.route装饰器绑定URL到视图,如`@app.route(&#39;/user/&lt;username&gt;&#39;)`;Django通过urls.py配置URL模式,如`path(&#39;user/&lt;str:username&gt;/&#39;, views.user_profile, name=&#39;user_profile&#39;)`。两者都支持静态、动态路由和HTTP方法绑定,展现路由灵活性,助力构建高效Web应用。
10 0
|
4天前
|
缓存 监控 安全
中间件在Python Web框架中的角色与应用场景
【7月更文挑战第21天】中间件在Python Web开发中作为服务器与应用间的软件层,拦截、处理请求和响应,无需改动应用代码。它扩展框架功能,复用跨应用逻辑,加强安全,优化性能。如Django中间件处理请求/响应,Flask通过WSGI中间件实现类似功能,两者均在不触及核心代码前提下,灵活增强应用行为,是现代Web开发关键组件。
|
5天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
【7月更文挑战第20天】模板引擎如Jinja2在Python Web开发中连接后端与前端,提高代码可读性和协作效率。Flask默认集成Jinja2,提供条件语句、循环、宏和模板继承等功能。例如,创建一个简单Flask应用,渲染&quot;Hello, World!&quot;,并展示如何使用条件语句和循环处理数据。通过宏定义重用代码,模板继承实现页面结构共享。学习模板引擎能提升开发效率和项目质量。
15 0
|
5天前
|
中间件 数据库 开发者
解析Python Web框架的四大支柱:模板、ORM、中间件与路由
【7月更文挑战第20天】Python Web框架如Django、Flask、FastAPI的核心包括模板(如Django的DTL和Flask的Jinja2)、ORM(Django的内置ORM与Flask的SQLAlchemy)、中间件(Django的全局中间件与Flask的装饰器实现)和路由(Django的urls.py配置与Flask的@app.route()装饰器)。这些组件提升了代码组织和数据库操作的便捷性,确保了Web应用的稳定性和可扩展性。
|
6天前
|
中间件 API 开发者
深入理解Python Web框架:中间件的工作原理与应用策略
【7月更文挑战第19天】Python Web中间件摘要:**中间件是扩展框架功能的关键组件,它拦截并处理请求与响应。在Flask中,通过`before_request`和`after_request`装饰器模拟中间件行为;Django则有官方中间件系统,需实现如`process_request`和`process_response`等方法。中间件用于日志、验证等场景,但应考虑性能、执行顺序、错误处理和代码可维护性。
15 0
|
前端开发 Python 数据库
Flask blueprint蓝图按功能模块化架构实例 推荐
使用flask作为开发框架,一定要按功能模块化,否则到了后面项目越大,开发速度就越慢。 1、Flask模块化结构规划 [root@yang-218 yangyun]# tree . ├── asset               #资产功能目录 │   ├── __init__.
1196 0