Spring+SpringMVC+MyBatis整合進階篇（四）RESTful實戰(前端程式碼修改)
前言
前文《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中前端部分的修改。