flask建站实践笔记002-admin登录页面

GitHub
优豆
YouTube

接着上一个学习笔记，把404,500页面移动到src/templates下面。
然后运行一下保证错误页面正确解析。

下面是准备好数据库的相关操作。这里用到flask_migrate，好东西。

数据库迁移准备工作

接着上一个学习笔记，在src/site/routes里面虽然没有使用User类，但是也包含了引用，目的是给migrate来创建数据库记录。

export FLASK_APP=run.py
创建一个空数据库
在model文件里面设置好数据对象
flask db init
执行完上面的命令后，会生成一个migrations目录
每次改动过model之后都需要执行一次下面的循环
flask db migrate
flask db upgrade
执行上面的操作后，数据库会生成对应的表，migrate命令会检测到增加了哪些表等信息。upgrade则执行操作
然后就是每次改动过model之后都需要执行一次migrate，upgrade的循环。
现在在versions目录下面可以看到刚刚创建的版本信息。

经过上面的操作，后面如果在对数据模型做任何修改就方便多了。

在和run.py同级目录下创建init_db.py文件

# coding:utf-8
import os

from werkzeug.security import generate_password_hash

from src import db, create_app
from src.models.modelUser import User

if __name__ == "__main__":
    app = create_app(os.getenv('FLASK_CONFIG') or 'default')
    with app.app_context():
        # 创建数据库表，通过migrate创建，这里注释掉
        # db.create_all()

        admin = User('admin', generate_password_hash('123456', method='sha256'),'admin@126.com')
        db.session.add(admin)
        db.session.commit()
        print(User.query.all())
        print(User.query.filter_by(name='admin').first())

右键单击init_db运行一下，就会添加一条记录。下面开始处理页面了。

后端可以响应请求后，开始涉及到前端的部分了。

前端部分

建立模板

新建html文件src/admin/templates/adminBase.html作为模板文件。
新建css文件src/admin/static/css/adminBase.css
添加一个网站图标src/static/images/favicon.png

说明一下html5的结构。

下面这个是兼容移动端的设置
<meta name="viewport" content="width=device-width,initial-scale=1">

这个是模板的自定义块用来插入不同的信息，后面的雷同。后面会讲到如何在继承页面使用
{% block title %}{% endblock %}
{% block styles %}{% endblock %}

这里的url_for是模板的静态资源引用的方式
<link rel="stylesheet" href="{{ url_for('admin.static', filename='css/login2.css') }}">

继承模板的时候要带上super，才会包含父模板的内容。不然是整个覆盖掉的。
{{super()}}

用到了cookie的相关操作，这里是一个脚本
浏览器端操作cookie的JavaScript脚本

建立登录页面

新建html文件src/admin/templates/login.html

修改routes文件响应请求添加处理函数

from functools import wraps

from flask import abort
from flask import redirect
from flask import render_template
from flask import session
from flask import url_for
from jinja2 import TemplateNotFound

from src.admin import admin


def login_required(f):
    @wraps(f)
    def decorated(*args, **kwargs):
        if 'userName' in session:
            return f(*args, **kwargs)
        else:
            session["needlogin"] = True
            return redirect(url_for('.index'))

    return decorated


@admin.route('/')
def index():
    try:
        # 已经登录了
        if 'userName' in session:
            return redirect(url_for('.dashboard'))
        else:
            return render_template("login.html")
    except TemplateNotFound:
        abort(404)


@admin.route('/dashboard')
@login_required
def dashboard():
    try:
        return render_template("dashboard.html")
    except TemplateNotFound:
        abort(404)


@admin.route('/logout', methods=['GET', 'DELETE'])
@login_required
def logout():
    session.pop('userName', None)
    return redirect(url_for('admin.index'))

这里说一下上面的redirect(url_for(‘.index’))这个重定向是内部的端点名，通俗的说就是处理函数的名字，想重定向到主页就是def index()的函数名
index，那么前面的.表示是admin.index，因为这里使用了Blueprint.

新建html文件src/admin/templates/dashboard.html

创建src/admin/static/css/login.css，src/admin/static/js/login.js
引入相关文件在ext目录下src/admin/static/js/ext/jquery.validate.js

复制背景图片到src/admin/static/images

新建api接口处理文件src/admin/routesApi.py用来处理登录请求。

from flask import request, jsonify
from flask import session
from werkzeug.security import check_password_hash

from src.admin import admin
from src.models.modelUser import User


@admin.route('/api/v1.0/login', methods=['POST'])
def login():
    if not request.is_json:
        return jsonify({'code': 1, 'msg': '请使用JSON格式的请求'})

    try:
        data = request.get_json()
        if not data.get('username'):
            return jsonify({'code': -1, 'msg': '缺少必要参数-username'})
        if not data.get('password'):
            return jsonify({'code': -2, 'msg': '缺少必要参数-password'})
        user = User.query.filter_by(name=data['username']).first()
        if not user:
            return jsonify({'code': 10, 'msg': '未找到该用户'})

        if not check_password_hash(user.password, request.get_json()['password']):
            return jsonify({'code': 11, 'msg': '密码验证失败'})
        else:
            session['userName'] = user.name
            return jsonify({'code': 0, 'msg': '验证成功'})
    except:
        import traceback
        traceback.print_exc()
        errMsg = traceback.format_exc()
        print(errMsg)
        return jsonify({'code': 100, 'msg': '后台处理出现异常情况，请稍后在试'})

修改src/__init__.py添加routesApi路由