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的正确打开方式是什么?
对于在Flask里用bootstrap admin theme,核心是正确集成静态资源和路由。这里以流行的Flask-Admin和Bootstrap-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)
关键点:
template_mode='bootstrap3'让Flask-Admin使用Bootstrap 3的基础模板- 如果要换主题,把主题的CSS/JS文件放到
static目录,在admin/index_view里通过extra_css或extra_js引入 - 自定义
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 的模板。

