论Vue + SpringBoot 前后端分离的技术栈

缺乏、安全感 2023-10-04 09:16 82阅读 0赞

> 本文原来是我毕业设计技术栈模块的内容，现因使用省级A类竞赛替代了毕业设计，就空出来了，所以发到我的博客上。
> 
> 纯手打，不足之处，欢迎大佬指出
> 
> 原文地址**[https://zwz99.blog.csdn.net/article/details/115179795][https_zwz99.blog.csdn.net_article_details_115179795]**

**目录**

2.1 SpringBoot框架

2.1.1 控制反转

2.1.2 切面编程

2.1.3 Spring框架优缺点

Spring的优点

2.1.4 SpringMVC框架介绍

2.1.5 SpringBoot框架介绍

2.1.6 SpringBoot框架优点

2.2 Vue框架

2.2.1 MVVM 双向数据绑定

2.2.2 Vue框架简介

2.2.3 IView组件库

2.3 Mybatis与Jpa框架

2.4 SpringSecurity权限控制

2.5 Activity工作流

--------------------

### **2.1 SpringBoot框架** ###

#### **2.1.1 控制反转** ####

**Spring是一个轻量级的企业级Java开发框架**，该框架的核心理念就是**控制反转**，控制反转就是**将Java对象创建的控制权从开发者调用方转移给被调用方**。

在Java程序使用了Spring框架之后，Java对象不再由开发者调用创建，而是由Spring容器来创建。Spring容器会智能控制各大模块之间的关系，而不是由开发者编写的程序代码直接控制。这样Java对象的创建控制权，由应用程序转移到了Spring容器。控制权发生了反转，这就是Spring的控制反转。获得依赖对象的步骤被反转了，在Spring控制反转之后，获得依赖对象的过程，由自我管理，变为了由IOC容器主动注入，所以Spring的控制反转也叫依赖注入。依赖注入，也就是由IOC容器在运行期间，主动将某种依赖关系注入到对象之中。所以，**在Spring中依赖注入和控制反转，是从不同的角度的描述的同一件事情，就是指通过引入IOC容器，利用依赖关系注入的方式，实现对象之间的解耦**。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70][] Spring 控制反转

Spring的控制反转就好比好莱坞原则，不要打电话过来，我们会打给你。好莱坞模式的核心是，抽象类定义了算法的骨架，而将一些类的具体实例化延迟到子类中再去实现。

Java组件定义了整个流程框架，而其中的一些业务逻辑的实现要借助于其他业务对象的加入，它们可以通过两种方式参与到业务流程中。而控制反转的实现机制一种是依赖查找，类似与JDNI的实现，通过JNDI来找到相应的业务对象，另一种是依赖注入，通过IoC容器将业务对象注入到组件中。

#### **2.1.2 切面编程** ####

在Java程序设计中，**面向切面编程，是面向对象编程的进一步补充和完善**。面向切面编程利用一种称为横切的技术，剖解开封装的Java对象内部，并将那些影响了多个类的公共行为封装到一个切面。切面是和系统的业务关联性较低，却为业务模块所共同调用整合的逻辑或责任封装起来，可以减少系统的重复代码，降低系统各大模块之间的耦合度，提高了程序的可维护性。

使用面向切面编程技术，把软件系统分为两个部分：核心关注点和横切关注点。对于Java系统的业务处理来说，主要流程是核心关注点，与之关系不大的部分是横切关注点。横切关注点的一个特点是，他们经常发生在核心关注点的多处，而各处基本相似，比如登入权限认证、操作日志，每个部分单独处理，然后把他们组装成完整的业务流程。每个部分都被称为切面或者关注点。面向切面编程的作用在于分离系统中的各式各样的关注点，将核心关注点和横切关注点分离开来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 1][] Spring AOP

对于Spring控制反转来说，尽管Spring IOC 不依赖于AOP，这意味着开发者可以自由选择是否使用AOP，AOP提供强大的中间件解决方案，这使得Spring IOC容器更加完美！允许用户自定义切面，用AOP来完善OOP的使用。

#### **2.1.3 Spring框架优缺点** ####

Spring框架是于二十世纪初开始流行的一个轻量级的Java 企业级开发框架，它是为了解决企业应用开发的复杂性而创建的。Spring框架的最主要的优势就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 Java Web应用程序开发提供现有集成的框架。

Spring框架使用基础的JavaBean来完成以前只可能由EJB完成的事情。但Spring框架不只是用于web服务器端的开发。从容易性、稳定性和可二次开发的角度而言，任何Java的应用都可以从Spring框架中受益。Spring的核心是控制反转和面向切面编程。简单来说，**Spring是一个分层的Java一站式轻量级开源框架**。

![spring-logo-9146a4d3298760c2e7e49595184e1975.svg][] Spring

#### **Spring的优点** ####

**高内聚低耦合**

Spring就是一个大工厂（容器），可以将所有对象创建和依赖关系维护，交给Spring管理

**AOP编程的支持**

Spring提供面向切面编程，可以方便的实现对程序进行权限拦截、运行监控等功能

**事务支持**

只需要通过配置就可以完成对事务的管理，而无需手动编程

**方便测试**

Spring对Junit测试框架支持，可以通过Spring的注解，从而方便测试开发者编写的Spring程序

**集成性好**

Spring不排斥各种优秀的开源框架，其内部提供了对各种优秀框架的直接支持

**使用简单**

Spring 对JavaEE开发中非常难用的一些API，都提供了封装，使这些API应用难度大大降低

#### **2.1.4 SpringMVC框架介绍** ####

在Java程序设计中，MVC 是一种十分著名的程序设计模式，尤其是在 JavaWeb开发领域。MVC模式将系统包含的业务数据的模块，与系统渲染模块的视图模块一起解耦的。在系统模型和系统视图之间引入重定向层可以解决问题。此重定向层是Java的控制器。控制器将从视图接收请求，执行更新系统模型的操作，然后通知系统前端视图模型需要更改的消息。对于依赖于模型的状态并且依赖于请求的控制器，可以决定要显示哪个视图。

很多Java系统的问题，在于处理系统业务数据和显示业务逻辑的视图的对象之间有非常高的耦合性。一般来说，更新业务对象的命令都是从视图本身发起的，使视图对任何业务对象更改都有非常高的敏感性。而且，当系统的多个视图依赖于一个业务对象时是完全没有灵活性的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 2][] MVC 模式

**Spring MVC是一种框架，它使用Java语言诠释了MVC程序设计模式，也使用了MVC设计模式的核心思维，将web三层架构进行分步解耦**。基于请求驱动指的就是使用请求-响应模型，开发者使用框架的目的，就是简化开发，SpringMVC就是为了让日常的Java开发变简单。

SpringMVC是对MVC核心思维的进一步拓展。它为控制器层和Java处理程序提供了大量与此模式相关的功能模块。开发者向MVC设置控制反转时，它使应用程序高内聚低耦合，只需通过简单的开发配置的更改，就可快速更改组件的灵活性

#### **2.1.5 SpringBoot框架介绍** ####

Spring 框架主要包含了控制反转和面向切面编程者两个特性，对Java开发进行进一步了简化。但是一个大型的项目不能只用一个或几个开发框架就可以编写的，一般来说需要集成很多框架，比如一个Java项目，至少要集成 MVC 框架、Tomcat服务器、日志框架、ORM框架，连接数据库要选择连接池。如使用Spring，每集成一个组件都要去先写它的配置文件，比较繁琐且容易出错，然后就有了SpringBoot。

SpringBoot框架是由Pivotal团队设计开发的Java开发框架，在2014年4月发布 Spring Boot1.0版本，后又在2018 年3月发布了Spring Boot 2.0版本。Spring Boot框架是对spring的进一步封装，其设计目的是用来简化 Spring 应用的初始搭建以及开发过程。通过Java封装、抽象、提供默认配置等方式让我们更容易使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 3][] Spring Boot

SpringBoot框架是基于Spring框架开发而来的。SpringBoot框架自身并不提供控制反转、面向切面编程以及扩展功能，换句话说，SpringBoot并不是用来将 Spring取而代之，而是和 Spring框架整合在一起，用于提升 Spring 开发者体验的工具。

**SpringBoot框架的核心理念就是约定大于配置**。采用Spring Boot开发框架可以大大的简化传统软件的开发模式，它集成了大量常用的第三方库配置，所有你想集成的常用框架，它都有对应的组件支持，例如 Redis、Hakira、Jpa、MongoDB、kafka。在Java中使用SpringBoot框架，可以零配置地开箱即用这些第三方库，大部分的 SpringBoot 应用都只需要非常少量的配置代码，开发者能够更加专注于业务逻辑的开发。

#### **2.1.6 SpringBoot框架优点** ####

1. 快速创建独立运行的Spring项目以及与主流框架集成、

2. 使用嵌入式的Servlet容器，应用无需打成WAR包

3. Starters自动依赖与版本控制

4. 大量的自动配置，简化开发，也可修改默认值

5. 无需配置XML，无代码生成，开箱即用

6. 准生产环境的运行时应用监控

7. 与云计算的天然集成

> **原文地址 [https://zwz99.blog.csdn.net/article/details/115179795][https_zwz99.blog.csdn.net_article_details_115179795]**

### **2.2 Vue框架** ###

#### **2.2.1 MVVM 双向数据绑定** ####

MVVM，就是MVC设计思想的升级版。首先第一块的模型指的是前端向后端传递的JSON数据，视图指的是所看到的页面，视图模型是MVVM模式的核心，它是连接view和model的桥梁。它可以执行两种操作：一是将后端传来的模型数据转化成视图，渲染到前端页面，可以通过双向数据绑定来实现。二是将视图转化成模型，即将前端的JSON数据，转化为Java的一个个对象，可以通过DOM 事件监听来实现。所以我们称MVVN为数据的双向绑定。

在使用MVVM设计思想实现的系统中，模型层和视图层它们是不可以直接进行通信的。它们只能通过View-Model来通信，View-Model一般要实现observer充当观察者，当前端页面的数据发生变化，View-Model能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当操作用户操作视图，View-Model也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 View-Model可以互相通信。

**MVVM 就是将其中视图层的状态和行为抽象化，让开发者将视图UI设计和业务逻辑开发分开**。开发者可以取出 Model的JSON数据，同时可以处理视图层中由于需要展示内容而涉及的业务逻辑。MVVM设计思想，立足于原有MVP框架并且把WPF的新特性糅合进去，以面对开发者复杂的功能需求。

#### **2.2.2 Vue框架简介** ####

一般来说，传统的网页是脚本语言JavaScript连接了各种各样的Html文件、css文件，不存在一定的组织架构。如果一个网页的页面元素非常多，或者是结构很庞大的网页中，业务逻辑和视图层如果全部混合在一起，像网页传统开发一样全部混合在HTML中，那么要对它们进行开发会十分复杂，并且如果其中有几个结构之间存在耦合的关系，那么会导致代码上出现严重的错误。

而对于网页开发而言，Vue是一款流行的、多用途的且高性能的JavaScript框架，Vue可以创建可测试性和可维护性更强的程序。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 4][] Vue LOGO

**Vue是一套构建前端系统的渐进式框架，Vue采用自下向上增量开发的设计，它的核心库只关注视图层研发**，开发者易于上手，同时Vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。简单来说，在传统web开发中，我们搭建项目都以HTML文件或者JSP文件结构为基础，然后通过JQuery或者JavaScript来添加各种各式各样的特效，需要去选中每一个元素进行设计研发，一旦开发的系统发生改动，或者系统项目非常大，那么程序的修改将是十分繁琐的。但如果用了Vue，这些问题都会被妥善解决，将大大缩减工作量。

#### **2.2.3 IView组件库** ####

**IView是一套基于Vue的开源UI设计的前端组件库**，它主要用于电脑浏览器端界面的中后台产品。IView的设计相对于其他组件库来说更加简单明了，在表单、表格、下拉框这些较复杂的组件中，直接可以将数据传进去，在组件库内部实现了模板生成，开发者使用起来非常高效、快捷。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 5][] IView

### **2.3 Mybatis与Jpa框架** ###

MyBatis是一个国内非常流行的持久层框架，该框架支持定制化 SQL语句、数据库存储过程以及相应的高级映射。MyBatis框架可以帮助开发者避免大多数 JDBC 代码，也不需要开发者手动设置一系列的参数和获取结果集。MyBatis框架用了简单注解或者XML语句配置和映射原生JDBC，将Java的实体类映射成数据库中真实存在的记录。

**MyBatis是一个半自动持久层框架，它将开发者经常使用的SQL语句抽取出来，用XML配置的方式编写**。MyBatis封装了预编译、执行 SQL、封装结果集、设置参数等一系列操作，实现了SQL语句设计与Java编码分离。开发者只需要学会 SQL语法和XML基本配置就可以使用MyBatis框架，方便维护与优化，它相比于 Hibernate来说，更加轻量级。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 6][]**Mybatis**

### **2.4 SpringSecurity权限控制** ###

在Java软件开发过程中，信息安全对于系统来说是很重要的一面。安全性问题虽然不属于系统的功能性需求，但是对于开发者而言，还是应该在应用开发的初期就考虑进来。如果在系统开发后期，才考虑到系统安全性的时候，就可能一发不可收拾。一方面，系统存在严重的安全漏洞，用户可能因为安全性不足而不使用该系统，从而让系统无法落地，并可能泄漏用户的隐私数据；另一方面，Java系统的基本架构已经定下来了，如果要大量修复漏洞，就必须对系统的架构做出大量的调整，牵一发而动全身。因此，开发者必须从系统开发的最初期就应该把安全相关的因素纳入调研范围。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 7][]**SpringSecurity权限控制**

**Spring Security是面向Java的Spring框架，为其设计研发了的一整套 Web 系统安全性的完整框架**。一般来说，Java系统的安全性包含了用户认证和用户授权两个部分。用户认证是指Java系统需要验证每一个登入用户是否合法，也就是说登入用户能不能进入这个系统。用户认证需要用户提供账号和密码，Java系统通过比对账号和密码来完成认证过程。用户授权指的是确认每一个用户是否有权限执行当前操作。在一个系统中，不同用户所具有的权限是不同的。比如对一个人事花名册菜单来说，有的用户只能进行查看花名册操作，而有的用户可以查看，还可以进行修改。Spring Security采用RABC模型，使用基于角色的访问控制，登入用户挂载角色，系统根据登入用户的角色，来判别是否有操作的权限。

### **2.5 Activity工作流** ###

在Java系统中的工作流，就是某个具体业务中，整个业务在计算机系统环境下的自动化操作，即让流程自动流下去。工作流主要解决问题的是“使在多个角色之间按照某种预定义的规范执行操作，如传递文档、信息或任务的过程自动进行，从而实现某个预期的业务目标，或者促使此目标的实现”。

集成了工作流的Java系统，真正实现了OA流程的办公自动化，改善了公司运营效率、提高企业资源利用率、提升企业员工工作的灵活性和适应性、提高量化考核业务处理的效率、减少浪费。工作流能够帮助开发者实现业务数据的同步交换和共享，可以真正帮助公司简化累赘流程，是未来工作流技术发展的主攻方向。

Activiti工作流是在2010年发行，由Alfresco软件公司开发，是一个负责流程业务管理框架，它覆盖了业务流程管理、工作流、服务协作等领域，是一个真正的开源、灵活、易扩展的可执行流程专用框架。

[https_zwz99.blog.csdn.net_article_details_115179795]: https://zwz99.blog.csdn.net/article/details/115179795
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210401201514282.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210401201820609.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[spring-logo-9146a4d3298760c2e7e49595184e1975.svg]: https://spring.io/images/spring-logo-9146a4d3298760c2e7e49595184e1975.svg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210401202353723.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210401202457209.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210401202832681.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210401202921671.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210401203006349.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210401203050494.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDY0MTIz,size_16,color_FFFFFF,t_70