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
2
3
4
5
6
7
8
from flask import Flask
from flask import render_template

app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
app.run(debug=True)

(3) index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/static/bootstrap-datetime/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
</head>
<body>
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript" src="/static/jquery/js/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-datetime/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
</script>
</body>

运行效果如下:

5. 问题与解答

  在使用中遇到一些问题,整理如下:

(1) 在 html 中何处加入 css 和 js 的引用?

  在 html 中,一般把 css 写上边,把 js 写下边,因为如果 js 较大,load 时间较长时,会影响网页显示速度,而 css 不占 load 时间,比如有时候我们网速慢,load 网页时,字虽然出来了,但一开始风格显示不对,这就是因为 css 还没 load 完,也间接地说明 css 并未在开始 load。

(2) Html 中的 {% xxx %} 是干什么用的?

<% %> 里面可以添加 java 代码片段

(3) 加入日期时间控件是不是还需要下其它的包?

  需要另外安装 bootstrap-datetimepicker 项目,它包括了年视图,月视图,小时视图,很好用的。

(4) bootstrap 需要安装,还是解包后直接使用?

  解包后直接使用

(5) 对 js 和 css 存放的目录有什么特殊要求?

  对于 js 和 css 的目录,怎么放都行,只要在程序里指对位置就可以。

(6) Xx.min.js 与 xx.js 有什么区别?

 min.js 是 js 的压缩格式

(7) Javascript 怎么用在 html 中?

  <script>xxxx<script>可以有多个 script 标签

(8) Div 是干什么用的

  Div 在 html 中定义了块,可以通过 <div> 的 class 或 id 应用单独的样式。

(9) 怎么让 div 不换行

  每个 Div 默认换行,如果不想换行,在 head 中加<style> div{ float:left} </style>,但它会把所有 div 都变成不换行,一般设完后 layout 就会乱掉。实际上,换行是 <div> 固有的格式表现,想不换行用<span>

(10) 怎么让几个控件横排,并指定显示比例为 1/n

用<div class=”row”>

(11) 怎么让一组控件整体居中

外边加一个<div class=’container’>

(12) 如何改变元素的值

  在 javascript 中设定,形如:document.getElementById('draw').value='1'

6. 参考

(1) BootStrap, React, Vue

http://blog.51cto.com/12444007/1967291

(2) Flask 项目中使用 bootstrap

https://blog.csdn.net/os373/article/details/79620450

(3) Bootstrap 网站

https://v3.bootcss.com/