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



1. 前后端分离——概念

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

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

Created with Raphaël 2.2.0 start 前端 HTML静态页面 后端 JSP 是否联调? End yes no

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

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

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

Created with Raphaël 2.2.0 start 前端HTML Ajax RESTful后端接口 End

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

了解更多

Logo

前往低代码交流专区

更多推荐