打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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、国际化配置文件以及视图

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Spring国际认证指南|使用 AngularJS 使用 RESTful Web 服务
JHipster简介
spring boot中统一异常处理
使用超动感HTML & JS开发WEB应用! | AngularJS中文社区
2018年Java,Web 和移动程序员学习的 12 个框架
学会这12个框架,你的薪资和level能更上一层楼
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服