Spring Boot+Vue 前后端分离开发

前后端分离

前后端分离就是将一个应用的前端代码和后端代码分开写，为什么要这样做？

如果不使用前后端分离的方式，会有哪些问题？

传统的Java Web开发中，前端使用JSP开发，JSP不是由后端开发者来独立完成的。

前端-》HTML 静态页面–> 后端–》JSP

这种开发方式效率极低，可以使用前后端分离的方式进行开发，就可以完美地解决这一问题。

前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可。

前端通过Ajax请求来访问后端的数据接口，将Model展示到View中即可。

前后端开发者只需要提前约定好接口文档（URL、参数、数据类型.…），然后分别独立开发即可，前端可以造假数据进行测试，完全不需要依赖于后端，最后完成前后端集成即可，真正实现了前后端应用的解耦合，极大地提升了开发效率。

单体- -》前端应用+后端应用

前端应用：负责数据展示和用户交互。后端应用：负责提供数据处理接口。

前端HTML-》Ajax–> RESTful 后端数据接口。

传统的单体应用

前后端分离结构

前后端分离就是将一个单体应用拆分成两个独立的应用，前端应用和后端应用以JSON格式进行数据交互。

实现技术

Spring Boot +Vue
使用Spring Boot 进行后端应用开发，使用Vue 进行前端应用开发。

Vue+Element UI

Vue 集成Element UI
Element UI 后台管理系统主要的标签：

Vue router来动态构建左侧菜单

• 导航1
  页面1
  页面2

• 导航2
  页面3
  页面4

menu与router的绑定

1、标签添加 router属性。

2、在页面中添加标签，它是一个容器，动态渲染你选择的router。

3、标签的index值就是要跳转的router。

Element UI表单数据验证

具体代码请看我的第二篇文章