在这种情况下,前后端分离就显得非常重要了。这样的开发模式下,只要把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、国际化配置文件以及视图
好了,今天分享到这里,喜欢的话来一波关注转发,谢谢大家
联系客服