简单了解前后端分离架构(MVVM)

JavaWeb 项目前后端分离架构

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式有效解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓, IOS 等等)打下坚实的基础。
核心思想是前端 html 页面通过 ajax 调用后端的 restuful api 接口并使用 json 数据进行交互。
前后端分离的优势

  1. 可以实现真正的前后端解耦,前端服务器使用 nginx/tomcat。前端/WEB 服务器放的是 css,js,图片等等一系列静态资源,前端服务器负责控制页面引 用,跳转,路由.
  2. 发现 bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。页面逻 辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工 程师来负责。接口数据出错,数据没有提交成功,应答超时等问题,全部由后端 工程师来解决。
  3. 减少后端服务器的负载压力。除了接口以外的其他所有 http 请求全部转移到 前端服务器上。
  4. 即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷 不出来而已。
  5. 也许你也需要有微信相关的轻应用,那样你的接口完全可以共用,如果也有 app 相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升效率。 (多端应用)
  6. 页面显示的东西再多也不怕,因为是异步加载。
  7. nginx 支持页面热部署,不用重启服务器,前端升级更无缝。
  8. 增加代码的维护性&易读性(前后端混在一起的代码读起来相当费劲)。
  9. 提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖。
  10. 在 nginx 中部署证书,外网使用 https 访问,并且只开放 443 和 80 端口, 其他端口一律关闭(防止黑客端口扫描),内网使用 http,性能和安全都有保 障。
  11. 前端大量的组件代码得以复用,组件化,提升开发效率.

MVVM

MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的 状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View中由于需要展示内容而涉及的业务逻辑。
简单了解前后端分离架构(MVVM)_第1张图片

Vue

什么是 Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心 库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三 大主流框架!

Vue.js 优点

  • 体积小 压缩后33K
  • 运行效率更高
    用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候,浏览器要不停的渲染新的 DOM 树,导致页面看起来非常卡顿。
    基于虚拟 dom,一种可以预先通过 JavaScript 进行各种计算,把最终的 DOM 操作计算出来并优化的技术,由于这个 DOM 操作属于预处理操作,并没 有真实的操作 DOM,所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作 提交,将 DOM 操作变化反映到 DOM 树上。
    dom树如下:
    简单了解前后端分离架构(MVVM)_第2张图片
  • 双向数据绑定,简化 Dom 操作
    通过 MVVM 思想实现数据的双向绑定,让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.
  • 生态丰富、学习成本低
    市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件!来即用实现 快速开发!对初学者友好、入门容易、学习资料多.
    Vue的安装
    直接用

你可能感兴趣的:(JavaWeb,Java复习,java,开发语言,后端,vue.js)