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仓库或者开源中国代码仓库中查看源码及项目文档。