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表单数据验证
具体代码请看我的第二篇文章