Spring+SpringMVC+MyBatis整合进阶篇(四)RESTful实战(前端代码修改)
2017-09-26 08:35
736 查看
前言
前文《RESTful API实战笔记(接口设计及Java后端实现)》中介绍了RESTful中后端开发的实现,主要是接口地址修改和返回数据的格式及规范的修改,本文则简单介绍一下,RESTful过程中前端代码的改变以及前后端分离的一些想法。整合代码及修改计划
在这次的代码修改过程中,后端改动相对较大,而前端代码的改动更多的是配合后端修改,主要是请求接口的url及js的ajax请求部分,修改后的代码更加符合RESTful规范:function saveArticle() { var title = $("#title").val(); var addName = $("#addName").val(); var content = UE.getEditor('myEditor').getContent(); var id = $("#articleIdfm").val(); var data = {"id": id, "articleTitle": title, "articleContent": content, "addName": addName} $.ajax({ type: method,//方法类型 dataType: "json",//预期服务器返回的数据类型 url: url,//url contentType: "application/json; charset=utf-8", data: JSON.stringify(data), success: function (result) { console.log(result);//打印服务端返回的数据 if (result.resultCode == 200) { $.messager.alert("系统提示", "保存成功"); $("#dlg").dialog("close"); $("#dg").datagrid("reload"); resetValue(); } else { $.messager.alert("系统提示", "操作失败"); $("#dlg").dialog("close"); resetValue(); }; }, error: function () { $.messager.alert("系统提示", "操作失败"); } }); }
改动较大的则是登录模块的代码,登录页面样式改变,与后端的交互也完全修改,由原来的后端接受登录信息并进行逻辑处理最后控制页面跳转,改为前端通过js和cookie的操作来控制登录流程,后端仅作为接口提供者的角色。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>perfect-ssm - 登录</title> <meta name="keywords" content="perfect-ssm"> <meta name="description" content="perfect-ssm"> <link href="css/bootstrap.min14ed.css" rel="stylesheet"> <link href="css/font-awesome.min93e3.css" rel="stylesheet"> <link href="css/animate.min.css" rel="stylesheet"> <link href="css/style.min862f.css" rel="stylesheet"> <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html"/> <![endif]--> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="/js/login.js"></script> <script src="/js/common.js"></script> </head> <body class="gray-bg"> <div class="middle-box text-center loginscreen animated fadeInDown"> <div> <div> <h1 class="logo-name">13</h1> </div> <h3>欢迎使用 perfect-ssm</h3> <form class="m-t" role="form" id="adminlogin" method="post" name="adminlogin" onsubmit="return false" action="##"> <div class="form-group"> <input type="email" class="form-control" placeholder="用户名" name="userName" id="userName" required=""> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="密码" name="password" id="password" required=""> </div> <button type="button" class="btn btn-primary block full-width m-b" onclick="javascript:login();">登 录 </button> <p class="text-muted text-center"><a href="##" onclick="javascript:adminlogin.reset();return false;"> <small>重置</small> </a> </p> </form> </div> </div> </body> </html>
function login() { var userName = $("#userName").val(); var password = $("#password").val(); var roleName = $("#roleName").val(); if (userName == null || userName == "") { alert("用户名不能为空!"); return; } if (password == null || password == "") { alert("密码不能为空!"); return; } $.ajax({ type: "POST", dataType: "json", url: "/users/cookie", data: $('#adminlogin').serialize(), success: function (result) { if (result.resultCode == 200) { setCookie("userName", result.data.currentUser.userName); setCookie("roleName", result.data.currentUser.roleName); window.location.href = "main.jsp"; }; }, error: function () { alert("异常!"); } }); }
页面的设计和美感与原来的项目并没有太多差别,这也是大部分朋友诟病这个项目的地方,由于暂时只是做一些功能性的实现和优化,因此页面的重构放在了后面的工作计划中,前端样式这次也只是修改了登录页面,其他页面并没有修改,因为这个阶段想要增加的是RESTful和缓存模块以及其他中间件的整合,至于页面重构会放到下一个项目中,目前的easyui会完全剥除掉,计划使用vue + ssm api实现一个前后端分离的实战项目。
控制权转变
这是我对这次代码改动的一点小总结:修改前:
修改后:
从图中可以看出后端和前端的功能变化,后端由原来的大包大揽似的独裁者变成了接口提供者,而前端也不仅仅是原来那样仅处理小部分业务,页面跳转也不再由后端来处理和决定,整个项目的控制权已经由后端过渡至前端来掌控,后端所扮演的角色转变已然改变,目前虽然没有完全实现如图中的效果,因为页面和功能实在有些少,小小的改变并没有带来特别明显的冲击感,但是八字已经有了一撇啦。
前后端分离的展望
其实目前的项目中已经有了前后端分离的雏形了,比如登录流程,及文章详情页,都是采用的静态页面+RESTful来实现所有功能,传统的开发模式中,前端开发人员一般只是简单地将UI设计师提供的原型图实现成静态的html页面,切切图、写写css、调调样式之类的,而具体的页面交互逻辑,比如与后台的数据交互工作、或者页面间的跳转,可能都是由后端的开发人员来实现的,前端十分的耦合后台。
甚至可能后台人员直接兼顾前端的工作,一边实现API接口,一边开发页面,两者互相切换着做,导致后台的开发压力大大增加,前后端工作分配不均,不仅仅开发效率慢,而且相互依赖严重,不能做到完全的并行开发,而且代码难以维护,前端如果只是做html代码,后端还需要参照着改,一旦改动则痛苦无比。
如上文中的图片所示,前后端分离的话则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供API接口,进行权限控制等工作,前端开发人员可以独立完成与用户交互的整一个过程,两者可以并行开发,不互相依赖,开发效率更快,而且分工比较均衡。
想法很多,这里就不一一列举了,待完成后再详细介绍吧,进阶篇中的文章还是更多的介绍后端的一些技术栈,前端的重构会在下个项目中实现。
结语
首发于我的个人博客,新的项目演示地址:perfect-ssm,登录账号:admin,密码:123456如果有问题或者有一些好的创意,欢迎给我留言,也感谢向我指出项目中存在问题的朋友,本篇主要讲述了实现RESTful中前端部分的修改。
如果你想继续了解该项目可以查看整个系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也可以到我的GitHub仓库或者开源中国代码仓库中查看源码及项目文档。
相关文章推荐
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(六)一定要RESTful吗?
- SpringMVC+Mybatis整合实现简单权限控制系统代码
- springmvc+mybatis+mysql整合实战
- 企业级框架整合Springmvc+mybatis+restful+bootstrap
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十一)redis密码设置、安全设置
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十二)Spring集成Redis缓存
- 【企业级框架整合】Springmvc+mybatis+restful+bootstrap框架整合
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(九)Linux下安装redis及redis的常用命令和操作
- MyBatis代码实例系列-09:初步整合Spring + Spring MVC框架之后,如何打印MyBatis的SQL语句
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(四)代码简化
- 【Spring+SpringMVC+Mybatis】利用SSM整合,完成用户登录、注册、修改密码系统
- (九)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven构建ant-framework核心代码Base封装
- MyBatis代码实例系列-05:Mybatis初步整合Spring + Spring MVC框架,实现Web请求实例
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(三)代码测试
- (四)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven代码结构
- (八)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven构建ant-framework核心代码annotation
- spring+springmvc+mybatis+oracle整合开发核心配置代码
- 【项目实战】基于Extjs+SpringMVC+Spring+Mybatis整合的进销存管理系统详解----项目简介(第一讲)
- 【企业级框架整合】Springmvc+mybatis+restful+bootstrap框架整合