JavaWeb 项目前后端分离架构

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

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

MVVM

MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View中由于需要展示内容而涉及的业务逻辑。

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树如下：
双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.
生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发！对初学者友好、入门容易、学习资料多.
Vue的安装
直接用 <script>引入
下载 Vue.js 并导入 js 文件 <script src="js/vue.js"></scrip

命令行工具 (CLI)

第一个Vue程序

导入开发版本的 Vue.js
创建 Vue 实例对象，设置 el 属性和 data 属性
使用简洁的模板语法把数据渲染到页面上
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 先导入Vue.js --><script src="js/vue.js"></script></head><body><div id="app">{{message}}--{{age}} <!-- {{数据}} 插值表达式--></div><script type="text/javascript">/* new Vue()创建vue对象  ViewModel */var app = new Vue({el:"#app",//数据挂载点data:{//数据，可定义多个message:"Hello Vue",age:20}});</script></body>
</html>

<div id="app"><h1>{{message}}</h1>{{age}} <!-- {{数据}} 插值表达式--></div>

同样，也可以加标签。

Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器，可以使用其他的闭合标签，不能使用 HTML 和 BODY data:{ message:’hello world’} model 数据 Vue 中用到的数据定义在 data 中 data 中可以写复杂类型的数据,如对象,数组渲染复杂类型数据时，遵守 js 的语法即可

 <h1>{{message}}</h1>{{age}} <!-- {{数据}} 插值表达式-->{{users.age}}{{users.name}}{{city}}</div><script type="text/javascript">/* new Vue()创建vue对象  ViewModel */var app = new Vue({el:"#app",//数据挂载点data:{//数据，可定义多个message:"Hello Vue",age:20,users:{name:'ll',age:19},city:['西安','汉中']}});</script>

简单了解前后端分离架构（MVVM）相关推荐

前后端分离架构，MVVM
前后端分离架构前后端分离已经成为互联网项目业界开发的标准使用方式,通过nginx+tomact的方式有效进行解耦,并且前后端分离会为以后的大型分布式框架,弹性计算架构,微服务架构,多段化服务(多 ...
前后端分离架构：Web 实现前后端分离，前后端解耦
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 blog.csdn.net/fuzhongmin05 推荐:https://ww ...
Node.js + Express + Springboot实现前后端分离架构
2019独角兽企业重金招聘Python工程师标准>>> 架构说明前后端分离架构,很多团队都是通过"代理转发"浏览器发往后端的rest请求来解决跨域问题,可以用n ...
若依前后端分离如何写移动端接口_前后端分离架构概述
1.背景 2.未分离时代(各种耦合) 3.半分离时代 4.分离时代 5.总结 <Netty 实现原理与源码解析 -- 精品合集> <Spring 实现原理与源码解析 -- 精品合集& ...
前后端分离架构中的接口安全(上篇)
互联网发展至今,已由传统的前后端统一架构演变为如今的前后端分离架构,最初的前端网页大多由JSP.ASP.PHP等动态网页技术生成,前后端十分耦合,也不利于扩展.现在的前端分支很多,如:Web前端.An ...
大型医院云HIS系统：采用前后端分离架构，前端由Angular语言、JavaScript开发；后端使用Java语言开发融合B/S版电子病历系统
一套医院云his系统源码采用前后端分离架构,前端由Angular语言.JavaScript开发:后端使用Java语言开发.融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知 ...
前后端分离架构一直没机会实战？1周完成Vue+Core WebApi移动商城实战(含源码)！...
疫情让企业受到重创! 就业形势更加严峻! 前后端分离架构成了当下最高频的招聘需求还没实战过前后端分离? 花3分钟阅读本文, 带你全面了解前后端分离,轻松面试拿高薪! Web发展至今技术非常成熟,主流 ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
企业管理系统前后端分离架构设计系列一权限模型篇
ACL(Access Control List)(访问控制列表) DAC(Discretionary Access Control)(自主访问控制) MAC(Mandatory Access Cont ...

简单了解前后端分离架构（MVVM）

JavaWeb 项目前后端分离架构

MVVM

Vue

简单了解前后端分离架构（MVVM）相关推荐

最新文章

热门文章