flask 项目中使用 bootstrapFileInput(构建篇)

Posted 2021-04-12 藕丝空间

bootstrap 为 flask 使用人员提供了一个非常优美且有效的前端页面组件,但是完美之处还存在些许缺陷,比如文件的上传功能.而 bootstrap-fileinput 是基于 bootstrap 的控件,非常完美的填补了这个空缺.

注意: 本文是主要是以 http://plugins.krajee.com/file-input/demo 示例为基础进行讲解.

构建 Flask 项目

目录结构

项目名称(本项目名称为 bootstrapFileInput)
    |- app # 项目实例
        |- lib # 应用库蓝图, 项目所共用的 css, js, images 等文件都将放置于此.
            |- static
            - __init__.py
        |- basic # bootstrapFileInput 项目 demo 的 basic 基础用法库.
            |- static
            |- templates
            - __init__.py
            - views.py
        |- advanced # bootstrapFileInput 项目 demo 的 advanced 基础用法库.
        - ...
        |- 以此类推
        ...
    |- env # 项目的 python 环境
        - ...
    - config.py # 配置文件
    - manage.py # 基于 flask-script 的启动文件
    - requirement.txt # 项目依赖库文件

构建项目的虚拟应用环境

请参阅 http://www.os373.cn/article/1, 不在赘述

安装依赖库

激活虚拟环境

source env/bin/activate

安装所需软件

(env)$ pip install flask
(env)$ pip install flask-script

创建 app python 包

__init__.py 内容如下:

# -*- coding:utf-8 -*-
__author__ = '东方鹗'

from flask import Flask
from config import config
def create_app(config_name):
    """ 使用工厂函数初始化程序实例"""
    app = Flask(__name__)
    app.config.from_object(config[config_name])
    config[config_name].init_app(app=app)    
    # 以下的蓝本可以按照自己的需求进行删加.

    # 注册蓝本 lib
    from .lib import lib as lib_blueprint
    app.register_blueprint(lib_blueprint, url_prefix='/lib')
    return app

代码里的蓝本可以按照自己的实际需求进行删加.

注意: 蓝本没有和实际项目一致,会报错!!!

创建放置共享库的蓝图 lib

app/lib/__init__.py 内容如下:

# -*- coding:utf-8 -*-
__author__ = '东方鹗'

from flask import Blueprint
lib = Blueprint('lib', __name__, static_folder='static')

app/lib/static 文件夹下存放的是共享库相关文件,比如 jquery, bootstrap, fileinput 等共享库所需的 css, js, image 等文件.

创建项目配置文件 config.py

# -*- coding:utf-8 -*-
__author__ = u'东方鹗'

import os
import hashlib

basedir = os.path.abspath(os.path.dirname(__file__))

class Config(object):
    SECRET_KEY = os.environ.get('SECRET_KEY') or hashlib.new(name='md5', string='ousi keji hawk@#').hexdigest()
    UPLOAD_FOLDER = os.path.join(basedir, 'app/lib/static/uploads')
    MAX_CONTENT_LENGTH = 32 * 1024 * 1024

    @staticmethod
    def init_app(app):
        pass

class DevelopmentConfig(Config):
    DEBUG = True

class TestingConfig(Config):
    TESTING = True

config = {    
            'development': DevelopmentConfig, 
            'testing': TestingConfig,    
            'default': DevelopmentConfig
}

创建启动文件 manage.py

# -*- coding:utf-8 -*-
__author__ = '东方鹗'

import os
from app import create_app
from flask_script import Manager, Shell

app = create_app(os.getenv('FLASK_CONFIG') or 'default')
manager = Manager(app=app)

def make_shell_context():
    return dict(app=app)

manager.add_command("shell", Shell(make_context=make_shell_context))

@manager.command
def test():
    """ 单元测试 """
    import unittest
    tests = unittest.TestLoader().discover('tests')
    unittest.TextTestRunner(verbosity=2).run(test=tests)

if __name__ == '__main__':
    manager.run()

启动项目

(env)$ python manage.py runserver --host 0.0.0.0 --port 5000

没有报错,则说明配置成功!!!

本章源代码下载:

zip压缩包
tar.gz压缩包