Bootstrap、Python、Flask做简单的前端
Bootstrap、Python、Flask 做简单的前端
1. 说明
无论做什么类型的程序,都难免需要给别人展示一下。Web 展示是个很好的方案,做起来省事,效果好,可交互,无需安装,跨平台,等等等等,算是个必备技能,与做 PPT 比肩。前一阵用 pyecharts 做网页统计图,发现自己做的界面实在太丑,同时又想引用一些现成的风格和控件,于是学习了一下 Web 前端框架,顺带熟悉一下 JS。菜鸟入门,记录如下,仅供参考。
2. 前端流行框架
先看看几种流行的前端框架:BootStrap, React, Vue。
BootStrap 容易上手,学习成本低,它提供了一些常用的 css 和 js,拿来就能用。
React 是数据单向响应的,数据发生变化时,前端 UI 即可随之变化。React 可管理 Dom 树的变化,使页面呈现更快。
Vue 站在了 React 的肩膀上, 许多方面更出色,如数据的双向绑定,速度更快,组件化,方便打包和发布等等,但相对来说上手的难度较大。
长远考虑, 建议使用 Vue+node.js. 短期简单使用, BootStrap 是个不错的选择。因此在这里选择了 Bootstrap。
3. 下载
(1) 下载软件包
https://v3.bootcss.com/getting-started/#download
在此可以直接下载用于生产环境的 bootstrap,解压后看到,有 css, fonts, js 三个目录,总共 1.7M。剩下的就是看看怎么在 html 里面引用它们。
(2) 下载最新源码
更建议下源码,里面有些测试程序和 demo,学习和调试更方便。
1 | $ git clone https://github.com/twbs/bootstrap.git |
(3) 其它组件
我还下载了 bootstrap 的日期时间控件,它的支持比较强大,比如进行月级别的选择。使用它,在不支持 html5 的浏览器中也可以正常使用时间日期控件了。
1 | $ git clone git://github.com/smalot/bootstrap-datetimepicker.git |
4. 实例
(1) 目录结构
我只写了 index.html 和 run.py 两个文件,使用了 python 的 flask 框架支持 http 服务。其它内容都是从刚下载 bootstrap 目录下复制过来的(拷进来直接用即可,无需安装),具体的存放位置随意,只要在 html 文件指定好路径即可。
(2) run.py
1 | from flask import Flask |
(3) index.html
1 | <!DOCTYPE html> |