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

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

注意: 本文是基于 bootstrap-fileinput v4.4.2. github 地址: https://github.com/kartik-v/bootstrap-fileinput

注意: 本文是主要是以 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压缩包：https://github.com/eastossifrage/bootstrapFileInput/archive/v1.1.zip

tar.gz压缩包：https://github.com/eastossifrage/bootstrapFileInput/archive/v1.1.tar.gz