SpringBoot+Vue前后端分离开发简单介绍(未完)

SpringBoot+Vue前后端分离

Spring Boot+Vue概述

前后端分离

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

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

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

前端—>HTML静态页面—>后端---->JSP

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

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

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

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

单体—>前端应用 + 后端应用

前端应用：负责数据展示和用户交互

后端应用：负责提供数据处理接口。

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

传统的单体应用：

前后端分离结构：

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

实现技术

Spring Boot + Vue

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

Element UI的使用

Vue + Element UI

Vue 集成 Element UI

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

• el-container：构建整个页面的框架。

• el-aside：构建左侧菜单。

• el-menu：左侧菜单内容

  :default-openeds：默认展开的菜单，通过菜单的index值来关联。

  :default-active：默认选中的菜单，通过菜单的index值来关联。

• el-submenu：可展开的菜单，常用属性：

  index：菜单的下标，文本类型，不能是数值类型。

• template：对应el-submenu的菜单名，

• i：设置菜单图标，通过class属性设置。

  • el-icon-message
  • el-icon-menu
  • el-icon-setting

• el-menu-item：菜单的子节点，不可再展开，常用属性：

  index：菜单的下标，文本类型，不能是数值类型。

Vue router 来动态构建左侧菜单

• 导航1

  • 页面1
  • 页面2

• 导航2

  • 页面3
  • 页面4

menu 与 router 的绑定

1、标签添加 router 属性。

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

nu 与 router 的绑定

1、标签添加 router 属性。

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

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