Spring+SpringMVC+MyBatis整合進階篇（四）RESTful實戰(前端代碼修改)

時間 2019-11-12

標籤 spring+springmvc+mybatis spring springmvc mybatis 整合進階 restful 實戰前端代碼修改欄目 Spring 简体版

原文原文鏈接

前言

前文《RESTful API實戰筆記(接口設計及Java後端實現)》中介紹了RESTful中後端開發的實現，主要是接口地址修改和返回數據的格式及規範的修改，本文則簡單介紹一下，RESTful過程當中前端代碼的改變以及先後端分離的一些想法。javascript

整合代碼及修改計劃

在此次的代碼修改過程當中，後端改動相對較大，而前端代碼的改動更多的是配合後端修改，主要是請求接口的url及js的ajax請求部分，修改後的代碼更加符合RESTful規範：css

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的操做來控制登陸流程，後端僅做爲接口提供者的角色。html

<%@ 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實現一個先後端分離的實戰項目。前端

控制權轉變

這是我對此次代碼改動的一點小總結：
修改前：

修改後：
vue

從圖中能夠看出後端和前端的功能變化，後端由原來的大包大攬似的獨裁者變成了接口提供者，而前端也不只僅是原來那樣僅處理小部分業務，頁面跳轉也再也不由後端來處理和決定，整個項目的控制權已經由後端過渡至前端來掌控，後端所扮演的角色轉變已然改變，目前雖然沒有徹底實現如圖中的效果，由於頁面和功能實在有些少，小小的改變並無帶來特別明顯的衝擊感，可是八字已經有了一撇啦。java

先後端分離的展望

其實目前的項目中已經有了先後端分離的雛形了，好比登陸流程，及文章詳情頁，都是採用的靜態頁面+RESTful來實現全部功能，jquery

傳統的開發模式中，前端開發人員通常只是簡單地將UI設計師提供的原型圖實現成靜態的html頁面，切切圖、寫寫css、調調樣式之類的，而具體的頁面交互邏輯，好比與後臺的數據交互工做、或者頁面間的跳轉，可能都是由後端的開發人員來實現的，前端十分的耦合後臺。git

甚至可能後臺人員直接兼顧前端的工做，一邊實現API接口，一邊開發頁面，二者互相切換着作，致使後臺的開發壓力大大增長，先後端工做分配不均，不只僅開發效率慢，並且相互依賴嚴重，不能作到徹底的並行開發，並且代碼難以維護，前端若是隻是作html代碼，後端還須要參照着改，一旦改動則痛苦無比。github

如上文中的圖片所示，先後端分離的話則能夠很好的解決先後端分工不均的問題，將更多的交互邏輯分配給前端來處理，然後端則能夠專一於其本職工做，好比提供API接口，進行權限控制等工做，前端開發人員能夠獨立完成與用戶交互的整一個過程，二者能夠並行開發，不互相依賴，開發效率更快，並且分工比較均衡。ajax

想法不少，這裏就不一一列舉了，待完成後再詳細介紹吧，進階篇中的文章仍是更多的介紹後端的一些技術棧，前端的重構會在下個項目中實現。

結語

首發於個人我的博客，新的項目演示地址：perfect-ssm，登陸帳號：admin,密碼：123456

若是有問題或者有一些好的創意，歡迎給我留言，也感謝向我指出項目中存在問題的朋友，本篇主要講述了實現RESTful中前端部分的修改。

若是你想繼續瞭解該項目能夠查看整個系列文章Spring+SpringMVC+MyBatis+easyUI整合系列文章,也能夠到個人GitHub倉庫或者開源中國代碼倉庫中查看源碼及項目文檔。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。