flask 專案中使用 bootstrapFileInput(構建篇)

bootstrap 為 flask 使用人員提供了一個非常優美且有效的前端頁面元件,但是完美之處還存在些許缺陷,比如檔案的上傳功能.而 bootstrap-fileinput 是基於 bootstrap 的控制元件,非常完美的填補了這個空缺.

注意: 本文是基於 bootstrap-fileinput v4.4.2. github 地址:

注意: 本文是主要是以 示例為基礎進行講解.

構建 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 # 專案依賴庫檔案

構建專案的虛擬應用環境

請參閱 , 不在贅述

安裝依賴庫

啟用虛擬環境

source env/bin/activate

安裝所需軟體

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

建立 app python 包

__init__.py 內容如下:

# -*- coding:utf-8 -*-__author__ = '東方鶚'from flask import Flaskfrom config import configdef 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 osfrom app import create_appfrom 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.commanddef 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

沒有報錯,則說明配置成功!!!

本章原始碼下載:

作者：藕絲空間
連結：