Vue.js---实现前后端分离架构中前端页面搭建（一）

【Vue.js实现前后端分离架构中前端页面搭建】 一、前后端分离

1. 简介

前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。

使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源，如果希望能够独立运行就需要借助基于Node.js的一些前端框架。java框架基础

2. 实现前后端分离的常用前端框架

对于前端工程师来说常用的就是Vue.js和React.js和angularJS。他们是前端工程师常用的三大框架。

Vue.js 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。在课程中讲解此框架，后面的项目的前端页面也是基于Vue实现

React相比Vue.js更新一些，近几年有追赶Vue.js的架势。更适合做移动项目。

AngularJS相比Vue更加大量一些。只有在一些大型项目中才可能被使用。

3. 前后端分离和动静分离

前后端分离软件架构方式。前端页面和服务端项目分别部署。

动静分离指“动态页面（JSP）”和静态页面分离开。很多时候为了让页面访问速度更快，把原来的动态页面（JSP）转换为静态页面（HTML）（可以借助Nginx实现）访问时访问静态页面。

二、Vue.js概述

1. 简介

Vue是一个渐进式的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. SPA介绍

Vue.js属于SPA一员。

英文全称：Single Page web Application ，SPA

中文全称：单页Web应用。

整个应用就一个页面，客户端页面通过与服务端的交互动态更新页面中内容。

2.1 优点

符合前后端分离工作模式：单页面应用可以结合Restful，符合前后端分离开发。

良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。

减轻服务器端压力：由于都是局部刷新对服务器压力更小

多平台共享：无论是移动端、电脑端都可以共享服务端接口。通过作用域传值就无法实现接口共享。

2.2 缺点

SEO难度大 对于单页面应用在SEO搜索时可能页面搜索到的就是空的。

首页渲染耗时长 首页需要一次加载多个请求，渲染时间可能会比较长。

3. MVVM介绍

Vue.js使用了前端中常用的分层思想MVVM。

MVVM分为M、V、VM

M（Model） 也就是页面中单独数据

V （View）是页面中HTML结构

VM（View-Model） 当V需要调用M中数据时，由VM做中间处理

3.1 示例

data(){} 里面的内容就是数据。也就是Model。