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）

JavaWeb 项目前后端分离架构

MVVM

Vue