JSP的主要工作就是把页面模板与数据给装配起来,变成HTML发送给浏览器
## 黑暗岁月
在Web编程才诞生的时候,大家只能使用Perl和C语言等以CGI的方式来输出HTML
所谓装配其实就是字符串拼接。
## 服务器端动态页面
1996年的微软退出了ASP(Active Server Page),它可以支持在HTML里面嵌入代码。
可以先用可视化编辑器(Dreamweaver)把界面创建好,然后再塞入代码。
![](http://p8a6vmhkm.bkt.clouddn.com/picgo20180815141512.png?picgo)
页面看上去就是一个HTML静态文本,被"<%%>"包裹的就是代码了,装配工需要运行他们,把产生的数据嵌入到HTML中
SUN公司推出了JSP(Java Server Pages)
JSP本质上就是一个模板,代码与HTML混杂在一起,没有美感。
## 标签库
后来推出了MVC设计模式,可以把展示和逻辑分开,JSP自然就是视图
但是界面上显示的逻辑还是必不可少,像分支、循环的控制语句不可或缺,所以可以做一层封装,也就是JSTL(JSP Standard Tag Library)
![](http://p8a6vmhkm.bkt.clouddn.com/picgo20180815141916.png?picgo)
<c: if> , <c:forEach> 就是标签了,本质上都是JAVA类,可以接收到传递过来的参数,进行计算,输出HTML
## 模板引擎
依然有人为了省事往JSP中写入大量的代码。
有一天,Java 世界来了两个新家伙,一个叫 Freemaker, 一个叫 Velocity,
* 这两个新装配工与JSP差不多,但是语法受限制,JSP可以嵌入任何JAVA语句,而Freemaker,Velocity只是为了页面展示用的,想在里面编写复杂的业务逻辑是根本不可能的。
![](http://p8a6vmhkm.bkt.clouddn.com/picgo20180815142148.png?picgo)
* 可以脱离Web 环境来使用,不像JSP必须有Tomcat等Web 容器的支持。
* 还可以做动态页面的静态化,例如说有些页面就是把数据库的数据展示出来, 而数据变化频率很低, 那他俩就可以事先读取数据库, 把页面的数据生成了,缓存在那里, 等到用户使用时可以直接返回。
## JavaScript
后来JSP页面装配起来更简单了, 引用的JS文件和css增多了。
因为很多与界面相关的东西都挪到了JavaScript和CSS去了。
JavaScript可以从浏览器端发出异步的HTTP调用,基于此发展了很多的JQuery的框架,可以灵活的在浏览器中操作界面。
后面服务器端的View越来越少,很多从浏览器发过来的HTTP个会到JSP中进行模板和数据的装配,也不会有HTML的返回。
这些HTTP请求调用的都是JAVA接口,这些Java 代码直接把JSON数据返回给浏览器了。
最新式的页面模板竟然是一个静态的HTML文件
![](http://p8a6vmhkm.bkt.clouddn.com/picgo20180815143037.png?picgo)
这个模板扩展了HTML属性,这 ng-controller="StuController" 是一个js函数,也是MVC中控制器
这个 javascript 函数, 它通过 http 调用了服务器端的接口 "/students" , 然后把返回的数据直接放到了 students 里边。
![](http://p8a6vmhkm.bkt.clouddn.com/picgo20180815143203.png?picgo)
JavaScript在浏览器里面实现了MVC。StuController函数是控制器,students是模型(通过HTTP调用从服务器端获得),视图模板就是静态的HTML,然后在浏览器中把模板和数据装配起来,形成了HTML
现在前后端分离了,后端只负责提供接口以及页面模板,由JavaScript在浏览器直接读到页面模板和JSON以后,在浏览器中进行装配。