web表现层技术梳理 – 汪明鑫的个人博客

前端技术层出不穷，作为半吊子的前端，梳理一下前端技术，为了毕业设计前端模版引擎的选择和后续对前端知识的学习。

首先不用说的，草原三剑客 html,css,javascript，基础的知识我都过了一些。

后来有什么Vue,React等前端框架的出现，异常强大，都有简单的了解，不是很熟，就不在这里赘述了。

说到前端，一定要说到一个架构模式 MVC模式

Model（模型）、View（视图）和Controller（控制）

承担view角色的有jsp,freemarker,velocity,thymeleaf

前后端交互方式：

一个是表单提交，a标签跳转，js跳转，ajax请求，webSocket全双工通信

ajax是目前前后端交互最常用的技术，增删改查都可以使用，

且局部刷新页面，效率高

websocket是前后端实时通信的全双工通讯的协议

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 协议本质上是一个基于 TCP 的协议。

前端代码：

<script type="text/javascript">
        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            var url = GetUrlRelativePath();
            websocket = new WebSocket("ws://" + url + "/websocket");
        }
        else {
            alert('Not support websocket')
        }

        //连接发生错误的回调方法
        websocket.onerror = function () {
            //    setMessageInnerHTML("resultInfo");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            //     setMessageInnerHTML("open");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            //  setMessageInnerHTML("close");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(response) {
            gradeChange4(response);
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('batch').value;
            websocket.send(message);
        }

        function GetUrlRelativePath() {
            var url0 = document.location.toString();
            var url = url0.split("//");
            var url1 = url[1];
            var arrUrl = url1.split("/batch");
            var relUrl = arrUrl[0];
            return relUrl;
        }

后端：

使用内嵌服务器的websocket

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
</dependency>

@ServerEndpoint

这个注解用来标记一个类是 WebSocket 的处理器。

然后，你可以在这个类中使用下面的注解来表明所修饰的方法是触发事件的回调

// 收到消息触发事件
@OnMessage
public void onMessage(String message, Session session) throws IOException, InterruptedException {
    ...
}

// 打开连接触发事件
@OnOpen
public void onOpen(Session session, EndpointConfig config, @PathParam("id") String id) {
    ...
}

// 关闭连接触发事件
@OnClose
public void onClose(Session session, CloseReason closeReason) {
    ...
}

// 传输消息错误触发事件
@OnError
public void onError(Throwable error) {
    ...
}

说到前端不得不说一下当年风靡一时的jquery,js库，可以更加方便的操作DOM对象，就是在现在jquery也有很多公司在用

当然node.js,angular.js,vue,react，以及前后端分离逐渐成为主流。

还有一些是为了页面好看，比如bootstrap,easyui,layui

bootstrap（用的很多）可以使用按钮，导航栏，分页等

easyui在国内用的相对较少

layui做弹框和弹出层时特别好用且好看

在网易的时候，组里用的是react以及公司自己封装的ui组件,后端spring boot ，前后端分离，玩的不是很明白

在同程艺龙，是jsp,jquery,bootstrap

在美团，是freemarker，jquery,bootstrap

jquery和bootstrap还是很受欢迎的

毕业设计后端打算用spring boot,mybatis,前端还没想好，前后端分离就算了，整不明白，react,vue就算了

模版引擎在jsp,freemarker,velocity,thymeleaf挑一个

其他的前端技术要用到js,jquery,ajax,bootstrap,layui

jsp是我最熟悉的技术，最开始做java web项目就是用的jsp
优点：
1、功能强大，可以写java代码
2、支持jsp标签（jsp tag）
3、支持表达式语言（el）
4、官方标准，用户群广，丰富的第三方jsp标签库
5、性能良好。jsp编译成class文件执行，有很好的性能表现
缺点：
jsp没有明显缺点，非要挑点骨头那就是，由于可以编写java代码，如使用不当容易破坏mvc结构。

velocity是较早出现的用于代替jsp的模板语言
优点：
1、不能编写java代码，可以实现严格的mvc分离
2、性能良好，据说比jsp性能还要好些
3、使用表达式语言，据说jsp的表达式语言就是学velocity的
缺点：
1、不是官方标准
2、用户群体和第三方标签库没有jsp多。
3、对jsp标签支持不够好

freemarker

freemarker在线手册

FreeMarker 是一款 模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

模板编写为FreeMarker Template Language (FTL)。它是简单的，专用的语言，不是像PHP那样成熟的编程语言。那就意味着要准备数据在真实编程语言中来显示，比如数据库查询和业务运算，之后模板显示已经准备好的数据。在模板中，你可以专注于如何展现数据，而在模板之外可以专注于要展示什么数据。

优点：
1、不能编写java代码，可以实现严格的mvc分离
2、性能非常不错
3、对jsp标签支持良好
4、内置大量常用功能，使用非常方便
5、宏定义（类似jsp标签）非常方便
6、使用表达式语言

缺点：
1、不是官方标准
2、用户群体和第三方标签库没有jsp多

其他：
1、性能。velocity应该是最好的，其次是jsp，普通的页面freemarker性能最差（虽然只是几毫秒到十几毫秒的差距）。但是在复杂页面上（包含大量判断、日期金额格式化）的页面上，freemarker的性能比使用tag和el的jsp好。
2、宏定义比jsp tag方便
3、内置大量常用功能。比如html过滤，日期金额格式化等等，使用非常方便
4、支持jsp标签
5、可以实现严格的mvc分离

jsp和freeMarker是两种不同的技术，或者说不通的理念。
jsp需要访问的时候访问Dao层抓取数据，生成html页面，返给浏览器。
freeMarker则是提前根据模板生成好html的静态页面，这样在访问时，直接访问到的就是一个静态页面，这个就是效率问题了，不过freeMarker适合用变化不大，但是内容很多的网页。

jsp在功能上是比freemarker要强的，但freemarker比jsp的访问速度快。而且在一定的业务需求中，freemarker可以根据模板生成静态页面，更进一步的提高了访问速度。

thymeleaf

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

说实话，jsp,freemarker,velocity,thymeleaf到底哪个好，到底用哪个，我也没法得出结论，总之各有千秋把

spring官方支持thymeleaf

大概率毕设会从freemarker、thymeleaf这2个里面选一个

知乎上有说thymeleaf好的，也有说freemarker好的，具体可以看链接 https://www.zhihu.com/question/64039553

转载请注明：汪明鑫的个人博客 » web表现层技术梳理