Spring-Boot前后端分离开发实战

公司开发团队中，前端不懂后台，后端不懂前台，项目如何才能进行？

在这种情况下，前后端分离就显得非常重要了。这样的开发模式下，只要把restful接口设计好,大家就能各司其职进行开发了。那么Spring-Boot快速构建Web应用的时候如何前后端分离呢，今天就给大家分享个实战例子。先上效果图。

中文首页

中文登录成功页面

中文登录失败页面

英文首页

英文登录失败页面

1、首先建立一个Spring-Boot项目，先给出一个完整的项目目录，然后再解释

2、后端部分的话比较简单，就定义了一个登录restful接口，如果用户名和密码都是admin就返回登录成功JSON、否则返回失败JSON

3、前端部分的话，采用AngularJS框架，目录比较多

public Spring-Boot默认的前端资源路径

index.html 首页

--------css 存放CSS样式文件

--------i18n 存放国际化JSON文件

--------images 存放图片

--------js

----------------config 存放AngularJS 全局配置JS文件

----------------controller 存放AngularJS 控制器JS文件

----------------module 存放AngularJS 模块定义JS文件

--------lib 存放第三方JS库，如AngularJS、JQuery

--------view 存放视图

4、前端是个单页应用，所有的资源都在index.html中进行加载

5、app.module.js定义了app模块，这里使用到了ngRoute（路由跳转）、translate（国际化）模块

6、app.config.js进行全局配置，这里配置了路由跳转、国际化资源文件的位置

7、app.controller.js书写了首页的业务逻辑，这里定义了语言转换下拉菜单、以及默认语言

8、login.controller.js书写了登录页面的业务逻辑，获取用户名密码调用后台登录接口，成功后跳转到welcome页面并传递用户名称，如果登录失败则跳转到error页面

9、loginSuccess.controller.js书写了登录成功后的业务，获取传递过来的username，更新到视图中

10、loginFailed.controller.js书写了登录失败后的业务，设置5秒倒计时，跳转到登录页面

11、国际化配置文件以及视图

好了，今天分享到这里，喜欢的话来一波关注转发，谢谢大家