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

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

<!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 中？

(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/