前后端分离详解（转发）

前言

本文转发自“Web项目聚集地”（点击蓝色字体即可跳转）
作者：松哥。
在看到这篇文章之前，我曾和团队的小伙伴一起开发过一个后台设备管理系统，其中就是使用前后端耦合的JSP方式开发。开发过程中经过了很多非常繁琐的磨合工作，正如接下来你即将看到的“前后端不分离的时代”中所叙述的那样。而正是有了前后端分离开发这种编程模式才使得我们从繁琐的前后端磨合中释放出来，前端专注于页面的设计；后端专注于处理数据和api接口开发。
我个人认为这篇文章非常适合初学web开发或正在准备和小伙伴一起开发自己的第一个web产品的时候看，尤其是正在读大学的计算机学生看，强烈安利！！！

前后端不分离的时代

1. 后端模板：JSP、FreeMarker、Velocity
2. 前端模板：Thymeleaf

前后端不分离的时代，JSP是一个非常典型的写法，JSP将HTML和Java代码结合在一起，刚开始的时候确实提高了生产力，但是时间久了，大伙就发现JSP存在的问题了：

对于后端工程师来说，可能不太精通CSS，所以流程一般是这样前端设计页面—>后端把页面改造成JSP—>后端发现问题—>页面给前端—>前端不会JSP。

这种方式效率低下，特别是在移动互联网兴起后，公司的业务除了PC端，还有手机端、小程序等，通常，一套后台系统需要对应多个前端，此时就不可以继续使用前后端不分的开发方式了。

在前后端不分离的开发方式中，一般来说，后端可能返回一个ModelAndView，渲染成HTML之后，浏览器当然可以展示，但是对于小程序、移动端来说，并不能很好的展示HTML（实际上移动端也支持HTML，只不过运行效率低下）。这种时候，一种新的解决方案应运而生，那就是前后端通过JSON这个轻量级的格式进行数据交互。

前后端分离

前后端分离后，后端不再写页面，只提供JSON数据接口（XML数据格式现在用得比较少），前端可以是移动端、小程序、也可以是PC端，前端负责JSON的展示，页面跳转等都是通过前端来实现的。前后端分离后，前端目前有三大主流框架：

1. Vue
   作者尤雨溪，Vue本身借鉴了Angular，目前GitHub star数最多。
   Vue上手容易，可以快速学会，对于后端工程师来说，能快速搭建页面解决问题。
   就目前国内前端框架使用情况来说，Vue算是使用最多的。而且目前来说，有大量Vue相关的周边产品，各种UI框架，开源项目，学习资料非常多。
2. React
   Facebook的产品。是一个用于构建用户界面的js库，React性能较好，代码逻辑简单。
3. Angular
   AngularJS是一款由Google维护的开源JavaScript库，用来协助单一页面应用程序运行。它的目标是透过MVC模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。

Vue简介

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

1. 只关注视图层
2. MVVM框架

大家在使用jQuery过程中，掺杂了大量的DOM操作，修改视图或者获取value，都需要DOM操作，MVVM是一种视图和数据模型双向绑定的框架，即数据发生变化，视图会跟着变化，视图发生变化，数据模型也会跟着变化，开发者再也不需要操作DOM节点。

SPA

SPA（single page web application），单页面应用，是一种网络应用程序或网站的模型，它通过 动态重写当前页面 来与用户交互，而非传统的从服务器重新加载整个新页面。这种方式避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页面应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面。SPA有一个缺点，因为SPA应用部署后只有一个页面，而且这个页面只是一堆js、css引用，没有其他有效价值，因此，SPA应用不易被搜索引擎收录，所以，一般来说，SPA适合做大型企业后台管理系统。
Vue 使用方式大致可以分为两大类：

1. 直接将Vue在页面中引入，不做SPA应用
2. SPA应用

基本环境搭建

首先需要安装两个东西：

1. NodeJS
2. npm

直接搜索下载NodeJS即可，安装成功之后，npm也就有了。安装成功之后，可以在cmd命令验证是否安装成功：

npm install -g vue-cli
# 只需要第一次安装时执行
vue init webpack
my
- project
# 使用webpack模板创建一个vue项目
cd
my
- project
# 进入到项目目录中
npm install
# 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev
# 启动项目

启动成功后，浏览器输入http://localhost:8080就能看到安装成功页面了。