标签： Java Vue Sring JPA ELementUI
作者： Maxchen
版本： V1.0.1
日期： 2020/3/6

1. 前后端分离——概念

前后端分离顾名思义将前端代码和后端代码分开写，为什么我们要前后端分离？

传统的Java Web开发中，前端主要采用JSP，而JSP不是由后端开发者独立完成的，需要前端和后端共同协同完成。

可以看到这种开发方式效率极低，而且耦合型太强，为了完美解决这一个问题我们采用了前后端分离的开发方式。

前端独立编写客户端代码提供界面交互，后端只需要独立编写服务端代码提供数据接口即可。之后联调时前端通过ajax请求来访问后端的数据接口，将Model展示到View即可。

前端开发者和后端开发者只需要提前约定好接口文档（URL，参数、数据类型……），之后分别独立开发。在后端开发者做完之前，前端可以造数据进行测试，不用等候后端开发者开发好接口。实现了前后端应用的解耦合，极大地提高了开发效率。

1.1 传统的单体项目

image.png-53.2kB

如图所示传统的Java Web开发会将HTML静态页面重新改写成JSP，后端采用 Spring + SpringMVC + 持久层 框架形式，应用会部署到一个包当中，最后统一部署到Tomcat容器中。

1.2 前后端分离的结构

image.png-50.6kB

如上图所示前后端分离是将一个单体应用拆分成两个独立的应用，他们之间通过接口的形式进行交互，前端调用后端接口返回的JSON数据。

2. 前后端分离——实现技术

上文从概念上讲述了前后端分离的好处，下面具体了解下我这次前后端分离的采用的技术：SpringBoot Vue

2.1 SpringBoot简介

Spring Boot是一个简化Spring开发的框架。用来监护spring应用开发，约定大于配置，去繁就简，just run 就能创建一个独立的，产品级的应用。

我们在使用Spring Boot时只需要配置相应的Spring Boot就可以用所有的Spring组件，简单的说，spring boot就是整合了很多优秀的框架，Spring Boot基本上是Spring框架的扩展，它消除了设置Spring应用程序所需的XML配置,且做了那些没有它你也会去做的Spring Bean配置，简化了许多框架方面的配置。下图展示了目前Spring Boot 2.0 的核心技术和生态整合：

image.png-254.6kB

2.2 Vue简介

2.2.1 MVVM架构

在介绍Vue之前，我们先了解一下MVVM架构：

image.png-44.3kB

MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.2.2 Vue前端架构

Vue.js 可以说是MVVM 架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。Vue是 MVVM 中的ViewModel的一个引申，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 比较简洁。Vue前端的详细设计图参考如下：

image.png-67.5kB

Vue Router 用于配置路由，后续开发中会经常用到

Vue Component 用于具体页面组件开发

webpack 用于前端项目打包

2.2.3 Vue目录结构

这里我从网上摘取了一套Vue目录结构，在实际开发过程中，会因为项目的差异，目录有些小的改动，这里仅供参考。

├── build                      # 构建相关
├── static                     # 静态资源
│   │── img                    # 图片
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
│   │── Tinymce                # 富文本
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json