Python中bootstrap admin theme配合Flask的正确打开方式是什么?

对 web 不熟,需要做一个简单好看的后台信息展示小工具,找了几个好看的模版,目前我的方式是:

1. 先在购买的 theme 的基础上搭建一个范例文件,组合出我需要的一些 ui 元素和页面布局

2. 因为会有很多用不到的 js 和 css,这一步需要一条一条删除然后刷新页面看是否有影响,然后最终保存一个相对简洁的文件。

3. 拷贝到 flask 中做模版,又需要修改资源路径,js css 等


4.jinja 替换 ui 元素信息为我要的信息


赶觉这样操作好浪费时间。



所以,我的问题是:
1. 是不是我这种使用 bootstrap admin theme 结合 flask 的方式不对?

2. 有没有方法针对某一个页面,仅仅只另存为用到加载到的资源。比如随便一个 bootstrap theme 里面就有大量图片和 js font 都用不到,能怎么保存一个精简版?

听说 react 做 ui 爽,我简单看了下,学习起来要费时间,我目前主要只是要一个好看的 admin 加上一些 ajaxj 动态刷新就足够。
Python中bootstrap admin theme配合Flask的正确打开方式是什么?


3 回复

对于在Flask里用bootstrap admin theme,核心是正确集成静态资源和路由。这里以流行的Flask-AdminBootstrap-Admin主题为例,给你一个能直接跑的方案。

首先,确保环境装好:

pip install flask flask-admin

然后创建主应用文件,比如 app.py

from flask import Flask
from flask_admin import Admin
from flask_admin.base import AdminIndexView
import os

# 创建Flask应用
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'  # 记得换成你自己的密钥

# 自定义Admin首页,方便集成主题
class MyAdminIndexView(AdminIndexView):
    pass  # 这里可以自定义首页逻辑

# 创建Admin实例,使用自定义首页
admin = Admin(app, name='管理后台', template_mode='bootstrap3', index_view=MyAdminIndexView())

# 添加模型视图示例(这里用个简单的演示)
from flask_admin.contrib.sqla import ModelView
from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True)

# 创建表
with app.app_context():
    db.create_all()

# 添加用户管理视图
admin.add_view(ModelView(User, db.session))

if __name__ == '__main__':
    app.run(debug=True)

关键点:

  1. template_mode='bootstrap3' 让Flask-Admin使用Bootstrap 3的基础模板
  2. 如果要换主题,把主题的CSS/JS文件放到static目录,在admin/index_view里通过extra_cssextra_js引入
  3. 自定义AdminIndexView可以完全控制后台页面的HTML结构

跑起来后访问 http://localhost:5000/admin 就能看到后台界面。要换主题的话,去Bootswatch之类的网站下载Bootstrap主题CSS,替换掉默认样式就行。

总结:用Flask-Admin的template_mode配合自定义静态文件是最直接的方法。


adminlte 了解一下。

<!-- Tell the browser to be responsive to screen width -->
<link rel=“stylesheet” href="{{ url_for(‘static’, filename=‘plugins/bootstrap/css/bootstrap.min.css’) }}">

<!-- Font Awesome -->
<link rel=“stylesheet” href="{{ url_for(‘static’, filename=‘plugins/font-awesome/css/font-awesome.min.css’) }}">

<!-- Ionicons -->
<link rel=“stylesheet” href="{{ url_for(‘static’, filename=‘plugins/Ionicons/css/ionicons.min.css’) }}">

<!-- Theme style -->
<link rel=“stylesheet” href="{{ url_for(‘static’, filename=‘css/AdminLTE.min.css’) }}">
<link rel=“stylesheet” href="{{ url_for(‘static’, filename=‘css/skin-blue.min.css’) }}">

<!-- jQuery 3 -->
<script src="{{ url_for(‘static’, filename=‘plugins/jquery/jquery.min.js’) }}"></script>

<!-- Bootstrap 3.3.7 -->
<script src="{{ url_for(‘static’, filename=‘plugins/bootstrap/js/bootstrap.min.js’) }}"></script>

<!-- AdminLTE App -->
<script src="{{ url_for(‘static’, filename=‘js/adminlte.min.js’) }}"></script>

干嘛搞那么麻烦,nginx static 做一个,api 做一个,不要用 flask 的模板。

回到顶部