从SSH到SSM，相信各位后台工程师熟谙各种后台技术之道。虽然作为一个非资深后台工程师，有很多需要学习记录的东西，但是今天咱决定来试探一下前端的深浅。
1知识储备
对于前端知识一片空白的人来说，看到越来越绚丽的前端页面，后台工程师除了会默默点赞，好奇心也会在翻滚。虽说成为前端技术大牛十分不易，但是入门前端还是相对简单的，那么零基础入门前端需要哪些知识储备呢？毫无疑问三大基础：HTML / CSS / JavaScript。
1.1 HTML和CSS
HTML（Hypertext MarkupLanguage），即超文本标记语言，是WWW的描述语言。在早期的HTML里面，HTML标签会有自己的很多样式（比如font标签，通过color属性控制文字的颜色），且在早期的页面布局主要是通过table布局，控制出的页面效果并不美观。
CSS（CascadingStylesheet）的出现很好的解决了早期HTML页面布局不美观的问题。如果说HTML是一个人的话，那么CSS就好比是服饰，服饰可以装饰出不同风格的人。HTML和CSS相辅相成，HTML控制整个网页结构，CSS控制整个页面样式。CSS的出现很好的实现了网页结构与网页样式的分离，这样可以减少HTML页面重复样式代码，加快网页加载速度。
HTML语法简单，掌握基本标签就可以入手，最基础的标签包括：段落标签、文字标签、图片标签、超链接标签、列表标签、表格标签和框架标签。基本的CSS需要掌握：文字、图片、背景、表格等样式，相对定位和绝对定位，以及外边距、内边距调整。
1.2 JavaScript
JavaScript是一种动态类型、弱类型、基于原型的脚本语言，内置支持类型。JavaScript通常用于向HTML页面嵌入动态文本、响应HTML页面事件完成相关交互行为，而前台页面和后台的交互可通过AJAX来实现。
JavaScript 语法十分简单，后台工程师基本半天时间可以掌握JavaScript的基本语法。对于后台工程师而言，需要关注JavaScript的弱类型特性，以及JS对象、DOM对象操作。
2框架选择
HTML/CSS/JavaScript是前端的三大基础，用原生的HTML/CSS/JavaScript进行前台开发，时间成本较大。正如后台技术一样，基于HTML/JavaScript/CSS的前端框架也层出不穷，如jQuery UI、Sencha Ext JS、Bootstrap等等。
2.1 JQuery UI
JQuery UI 囊括了丰富的控件和特效，用户可以选择多种风格来渲染页面，可以与 jQuery 无缝兼容。此外，通过 jQuery UI 提供的可视化界面，编程人员可以配置显示效果、修改内置风格，十分方便。下图展示的是jQuery UI中的Accordion Widget。
2.2 Senchap Ext JS
Senchap Ext JS是 Sencha 基于 Ext JS 开发的前端框架，它拥有十分丰富的表格、图画、报告，以及布局、控件、特效，甚至是数据连接。Sencha拥有十分丰富的产品线，从桌面端到移动端，都可以用Sencha产品开发完成，它几乎为前端开发提供了一套完整的解决方案。然而，Sencha Ext JS是一个商业化的框架，需要付费购买，同时重量级也是Sencha Ext JS的一大局限。
2.3 Bootstrap
Bootstrap可同时支持桌面端和移动端，为编程人员提供了丰富的图标、字体、控件，在版式、布局、特效等方面都做的非常出色，是目前最为流行的开发框架；在兼容性方面，Bootstrap得到了Chrome、Firefox、Safari、IE8+等主流浏览器的支持；此外，由于Bootstrap框架的广泛使用，Bootstrap扩展插件和组件也异常丰富，例如Bootstrap Table（http://bootstrap-table.wenzhixin.net.cn/）。
2.4 Bootstrap Table
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。作为一个与数据打交道的后台工程师，如果需要向外展示后台数据，相信Bootstrap和Bootstrap Table会给大家带来一道曙光。
3Bootstrap Table 动态表格进阶之路
首先来看下技术人员天天接触的JSON字符串（这是爬虫爬取的财经新闻，感谢爬虫老司机提供的数据）：
对于这样结构化的数据，其实也并没有直观化的把数据展示给大众；当一次性大量面对这样的数据时，不管非技术人员还是技术人员，看这样的数据都是十分枯燥乏味的。下面我们就来讲述下，如何利用Bootstrap Table完成数据的可视化。
3.1 Bootstrap Table 静态表格渲染
静态表格适用与数据结构简单相对情景，此表格表头和列数固定不变，如：
渲染此静态表格代码如下：
从以上代码和表格结构可以看出，静态表格表格结构是固定不变的，切代码不灵活、不可复用，对于不同的表格需求，需要重新写html代码。为了达到根据后台返回的数据结构产生不同的表格的目的，实现前端页面代码复用，需要使用动态表格完成相应功能。
3.2 Bootstrap Table 动态表格渲染
动态表格毫无疑问就是可以根据后台数据动态生成表格，表格结构不再固定不变。在渲染出动态表格之前先看渲染结果，渲染结果图如下：
上图Table主体由表头和表的数据行组成，Table顶部左上角是个jQuery选择器（用于搜索某时间范围内的数据），右上角是Table的搜索框（用于搜索表格数据）。要实现上图中的表格我们需要做些什么呢？下面一步步讲述动态表格的制作过程。废话不多说，上代码：
其中，data-search属性表示是否启用table的搜索框（当数据较多、较复杂时建议使用搜索框，方便数据检索），data-pagination设置为true时表格自动分页（表格底部会有分页条，可定位页码并指定每页数据量），data-toolbar是一个jQuery选择器，选择器由两个时间输入框和一个搜索按钮组成，当给搜索按钮添加事件、加上Bootstrap Table渲染JS代码，便可轻松完成将选定时间范围内的数据渲染到Table中。来看下搜索事件，以及Table渲染的JS代码如下：
最终表格：
页面全揽：
由上述分析可知，由于AJAX的参与，实现了BootstrapTable动态表格渲染与后台系统的解耦；通过对比Bootstrap Table动态表格与静态表格，可以发现：相对于静态表格而言，动态表格更具有灵活性，可应对多种包含不同字段结构的数据，无需为不同表格实现不同代码，动态表格复用性更强。
在文章的最后附上，前端快速入门知识储备线路（此图适合快速入门前端的同学参考，此图来此知乎：https://www.zhihu.com/question/30180100）：
致谢：感谢爬虫老司机贡献的爬虫数据、后台代码，以及部分前端代码。
参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
本文作者：范光松（Focuson），16年7月毕业于电子科技大学，目前就职于点融成都data组，任JAVA后台开发工程师一职。座右铭：Stay hungry，Stay foolish。
随着点融网新一轮融资，点融网即将开始大规模的扩张，需要各种优秀人才的加入，如果你觉得自己够优秀，欢迎加入我们！获取更多职位信息，请关注点融黑帮。
