使用 ajax 和 Vue 进行前后端交互

Separation

在传统的 Web 应用开发中,浏览器的请求首先会发送到 Controller, 由 Controller 交由相应的 Model 进行业务逻辑处理,处理完毕后将结果交由 View 进行渲染,动态输出完整的 HTML 返回给浏览器。这么做有两个缺点,一是需要在 HTML 中嵌入后端模板引擎,如 JSP、Thymeleaf 等。JSP饱受诟病,在HTML中写大量的java代码,显然让程序显得很混乱,无法很好地解耦。而 Thylemeaf 虽然是纯 HTML 的后端模板引擎,但这样前后端的关联性还是比较强。二是使用后端模板引擎的坏处是,HTML页面需要完全渲染完毕后,才返回给浏览器展示。这样一来,如果页面元素非常多,页面加载时间就很长了,影响用户体验不说,还会给服务器造成很大的处理压力。

如果后端仅提供数据,而把渲染页面这种事交给前端来做,因为前端是在浏览器执行的,这样就能够减缓服务器的压力了。从另一个角度,随着移动互联网的兴起,客户端不再仅仅是浏览器,还可能是手机,例如Android客户端、iOS客户端、微信小程序。如果一套互联网服务需要同时有Web端、手机端,那么传统的后端包办一切的开发模式显然是行不通的。

在这种大环境下,于是催生了前后端分离。简单地说,就是把传统网络应用的 Controller 层,交给了客户端来掌控。后端只负责业务逻辑处理。当然,这里的 Controller 不是指 Spring MVC 中的 Controller,而是前端对一个页面中什么时间点应该展示什么内容,有自己的控制权。

具体到 Spring Boot 中的前后端分离,就是利用 @RestController 注解,让后端仅仅提供 json 格式的纯数据。前端(包括Web端和移动端)拿到数据之后,该怎么渲染,怎么展示,那是前端的事情。例如,Android客户端拿到数据,将数据显示到 RecyclerView 上, Web前端拿到数据,将数据显示在网页表格里。

如何提供一套好的规范,可以参考之前写过的 Spring(四)使用 RESTful 风格。 RESTful 风格就是一种很好前后端数据交互的的规范。

那么我们的问题是,后端通过 RESTful 风格的设计, 向前端提供纯 json 数据,对于Web前端来说,我们该如何“拿取”这些数据,并进行展示呢?这就需要用到 Ajax 和 Vue 技术了。

阅读更多

HTML JavaScript DOM

前面提到,完整的 Javascript 由以下三个部分组成

  • 语言基础
  • BOM(Browser Object Model 浏览器对象模型)
  • DOM(Document Object Model 文档对象模型)

这一篇主要讲讲 DOM ,DOM 其实就是把 html 里面的各种数据当作对象进行操作的一种思路。

pic

那么 DOM 有什么作用呢?

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • 能够改变页面中的所有 HTML 元素或属性
  • 能够改变页面中的所有 CSS 样式
  • 能够对页面中的所有事件做出反应
阅读更多

Head First JavaScript

JavaScript用于网页和用户之间的交互,比如提交的时候,进行用户名是否为空的判断。

完整的 Javascript 由以下三个部分组成

  • 语言基础
  • BOM(Browser Object Model 浏览器对象模型)
  • DOM(Document Object Model 文档对象模型)
阅读更多

Head First HTML

HTML是HyperText Markup Language 超文本标记语言的缩写。

HTML是由一套标记标签 (markup tag)组成,通常就叫标签。

阅读更多

html5插入视频空白问题

今天想在我的博客文章一些想法中插入一段视频。

本来把视频上传到我的apache服务器中,然后在 Hexo 的 Markdown语法中插入以下语句即可

1
2
<video src='链接地址' type='video/mp4' controls='controls'  width='100%' height='100%'>
</video>

但是在 Chrome 中播放的时候,一直显示空白,但是有声音。琢磨了半天不知道问题出在哪。

后来发现是 html5 嵌入视频的时候,对视频编码是有要求的

MP4有3种编码,mpg4(xdiv),mpg4(xvid),avc(h264)

转换成H264编码就可以网页正常播放了,好像H264才是公认的MP4标准编码

emmm

用 PotPlayer 重新录制新的编码视频重新上传,搞定了。

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×