前言

前文《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整合进阶篇(四)RESTful实战(前端代码修改)的更多相关文章

  1. Spring+SpringMVC+MyBatis整合基础篇

    基础篇 Spring+SpringMVC+MyBatis+easyUI整合基础篇(一)项目简介 Spring+SpringMVC+MyBatis+easyUI整合基础篇(二)牛刀小试 Spring+S ...

  2. Spring+SpringMVC+MyBatis整合优化篇

    优化篇 Spring+SpringMVC+MyBatis+easyUI整合优化篇(一)System.out.print与Log Spring+SpringMVC+MyBatis+easyUI整合优化篇 ...

  3. Spring+SpringMVC+MyBatis整合基础篇(二)牛刀小试

    前言 承接上文,该篇即为项目整合的介绍了. 废话不多说,先把源码和项目地址放上来,重点要写在前面. 项目展示地址,点这里http://ssm-demo.13blog.site,账号:admin 密码: ...

  4. Spring+SpringMVC+MyBatis整合基础篇(三)搭建步骤

    作者:13GitHub:https://github.com/ZHENFENG13版权声明:本文为原创文章,未经允许不得转载. 框架介绍 Spring SpringMVC MyBatis easyUI ...

  5. Spring+SpringMVC+MyBatis整合(easyUI、AdminLte3)

    实战篇(付费教程) 花了几天的时间,做了一个网站小 Demo,最终效果也与此网站类似.以下是这次实战项目的 Demo 演示. 登录页: 富文本编辑页: 图片上传: 退出登录: SSM 搭建精美实用的管 ...

  6. 框架篇:Spring+SpringMVC+Mybatis整合开发

    前言: 前面我已搭建过ssh框架(http://www.cnblogs.com/xrog/p/6359706.html),然而mybatis表示不服啊. Mybatis:"我抗议!" ...

  7. ssm之spring+springmvc+mybatis整合初探

    1.基本目录如下  2.首先是向lib中加入相应的jar包  3.然后在web.xml中加入配置,使spring和springmvc配置文件起作用. <?xml version="1. ...

  8. Spring+springmvc+Mybatis整合案例 annotation版(myeclipse)详细版

    Spring+springmvc+Mybatis整合案例 Version:annotation版 文档结构图: 从底层开始做起: 01.配置web.xml文件 <?xml version=&qu ...

  9. Spring+springmvc+Mybatis整合案例 xml配置版(myeclipse)详细版

    Spring+springmvc+Mybatis整合案例 Version:xml版(myeclipse) 文档结构图: 从底层开始做起: 01.配置web.xml文件 <?xml version ...

随机推荐

  1. [目标检测]PVAnet原理

    创新点:基于Faster-RCNN使用更高效的基础网络 1.1 创新点 PVAnet是RCNN系列目标方向,基于Faster-RCNN进行改进,Faster-RCNN基础网络可以使用ZF.VGG.Re ...

  2. [js高手之路]HTML标签解释成DOM节点

    最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这 ...

  3. 第一篇--认识Jmeter

    Jmeter是Apache组织开发的基于Java的压力测试工具,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文件.Java 小服务程序.CGI 脚 ...

  4. 关于i++和++i

    初学Java,经常看到i++和++i的一些问题,在此整理一下. 首先看下面一个小程序: public class atest{ public static void main(String args[ ...

  5. [2017-07-18]logstash配置示例

    提醒 /etc/logstash/conf.d/下虽然可以有多个conf文件,但是Logstash执行时,实际上只有一个pipeline,它会将/etc/logstash/conf.d/下的所有con ...

  6. 【拦截器】HandlerInterceptor接口

    package org.springframework.web.servlet; import javax.servlet.http.HttpServletRequest; import javax. ...

  7. PKIX path building failed

    百度这个问题,很多人都说是证书问题.至于是什么证书呢?搞了老半天原来是 /Java/jre/lib/security/cacerts不正确.换了个jdk版本就解决这个问题了. 可靠的jdk1.8下载链 ...

  8. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  9. java8 去掉 perm 用 Metaspace 来替代

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt266 正如大家所知,JDK 8 Early Access版已经提供下载.这使 ...

  10. Maven(一)初识Maven

    前言 在这之前一直都有去看关于Maven的相关介绍,但是没有到真正要用的时候,自己总是以为懂了.其实真的感觉Maven并没有想象的那么简单! 那我们该怎么去学习maven呢?接下来我将从: 初步认识m ...