2. 程式人生 > >SSM框架中的前後端分離

SSM框架中的前後端分離

阿新 • • 發佈：2018-12-20

認識前後端分離

在傳統的web應用開發中，大多數的程式設計師會將瀏覽器作為前後端的分界線。將瀏覽器中為使用者進行頁面展示的部分稱之為前端，而將執行在伺服器，為前端提供業務邏輯和資料準備的所有程式碼統稱為後端。

由於前後端分離這個概念相對來說剛出現不久，很多人都是隻聞其聲，不見其形，所以可能會對它產生一些誤解，誤以為前後端分離只是一種web應用開發模式，只要在web應用的開發期進行了前後端開發工作的分工就是前後端分離。

其實前後端分離並不只是開發模式，而是web應用的一種架構模式。在開發階段，前後端工程師約定好資料互動介面，實現並行開發和測試；在執行階段前後端分離模式需要對web應用進行分離部署，前後端之前使用HTTP或者其他協議進行互動請求。然而作為一種架構模式，我們在實施的過程中主要對以下四個方面來進行比較和重新認識。

前後端分離大概可以從四個方面來理解：

  1. 互動形式
  2. 程式碼組織方式
  3. 開發模式
  4. 資料介面規範流程

一、互動形式

在前後端分離架構中，後端只需要負責按照約定的資料格式向前端提供可呼叫的API服務即可。前後端之間通過HTTP請求進行互動，前端獲取到資料後，進行頁面的組裝和渲染，最終返回給瀏覽器。

二、程式碼組織方式

在傳統架構模式中，前後端程式碼存放於同一個程式碼庫中，甚至是同一工程目錄下。頁面中還夾雜著後端程式碼。前後端工程師進行開發時，都必須把整個專案匯入到開發工具中。

而前後端分離模式在程式碼組織形式上有以下兩種:

  • 半分離
    前後端共用一個程式碼庫，但是程式碼分別存放在兩個工程中。後端不關心或很少 關心前端元素的輸出情況，前端不能獨立進行開發和測試，專案中缺乏前後端 互動的測試用例。
  • 分離
    前後端程式碼庫分離，前端程式碼中有可以進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽後端，能支援前端的獨立開發和測試。而後端 程式碼中除了功能實現外，還有著詳細的測試用例，以保證API的可用性，降低 整合風險。

三、開發模式

我們之前的架構屬於傳統的MVC架構，整體沒有進行前後端分離，在專案的開發階段，前端工程師負責編寫HTML，完成前端的頁面設計並套頁面，然後再使用模板技術將寫好的前端程式碼轉換為Smarty指令碼，同時內嵌一些後端提供的模板變數和一些邏輯操作。應用執行期，將全部程式碼進行打包，和後端程式碼部署到同一伺服器上，同時會進行簡單的動靜態分離部署。

此時，應用的開發流程如下圖所示。

而在實現前後端分離架構之後，前端工程師只需要編寫HTML、js、CSS等前端資源，然後通 過HTTP請求呼叫後端提供的服務即可。除了開發期的分離，在執行期前後端資源也 會進行分離部署。

前後端分離之後，開發流程將如下圖所示。

通過上面的兩幅流程圖，不難發現，在開發模式上，前後段分離不僅僅只是工程師的分工開發，更重要的意義在於實現了前後端的並行開發，簡化了開發流程。

四、資料介面規範流程

在開發期間前後端共同商定好資料介面的互動形式和資料格式。然後實現前後端的並行開發，其中前端工程師再開發完成之後可以獨自進行mock測試，而後端也可以使用介面測試平臺進行介面自測，然後前後端一起進行功能聯調並校驗格式，最終進行自動化測試。

分離的四個好處

前後端分離模式和傳統的web應用架構相比有很大的不同，到底分還是不分，這還真是個問題。

從目前應用軟體開發的發展趨勢來看，主要有兩方面需要注意：

  1. 越來越注重使用者體驗，隨著網際網路的發展，開始多終端化。
  2. 大型應用架構模式正在向雲化、微服務化發展。

我們主要通過前後端分離架構，為我們帶來以下四個方面的提升：

  • 為優質產品打造精益團隊
    通過將開發團隊前後端分離化，讓前後端工程師只需要專注於前端或後端的開發工作，是的前後端工程師實現自治，培養其獨特的技術特性，然後構建出一個全棧式的精益開發團隊。
  • 提升開發效率
    前後端分離以後，可以實現前後端程式碼的解耦，只要前後端溝通約定好應用所需介面以及介面引數，便可以開始並行開發，無需等待對方的開發工作結束。與此同時，即使需求發生變更，只要介面與資料格式不變，後端開發人員就不需要修改程式碼，只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。
  • 完美應對複雜多變的前端需求
    如果開發團隊能完成前後端分離的轉型，打造優秀的前後端團隊，開發獨立化，讓開發人員做到專注專精，開發能力必然會有所提升，能夠完美應對各種複雜多變的前端需求。
  • 增強程式碼可維護性
    前後端分離後，應用的程式碼不再是前後端混合，只有在執行期才會有呼叫依賴關係。

應用程式碼將會變得整潔清晰，不論是程式碼閱讀還是程式碼維護都會比以前輕鬆。

以上轉自前後端分離實踐（一）

利用JSON串來實現前後端分離

在自己最近做的專案中，使用的是利用SSM框架中的controller層來傳出JSON串，再通過jQuery中的.getJSON()來進行解析，再將資料傳到前端頁面。

controller層

部分程式碼省略，放出關鍵程式碼：

ShopManagementController

@Controller
@RequestMapping("/shopadmin")
public class ShopManagementController {
    @Autowired
    private ShopService shopService;
    @Autowired
    private ShopCategoryService shopCategoryService;
    @Autowired
    private AreaService areaService;
    @RequestMapping(value = "/getshopmanagementinfo",method = RequestMethod.GET)
    @ResponseBody
    private Map<String,Object> getShopManagementInfo(HttpServletRequest request) {
        Map<String,Object> modelMap = new HashMap<String, Object>();
        long shopId = HttpServletRequestUtil.getLong(request,"shopId");
        if(shopId <= 0){
            Object currentShopObj = request.getSession().getAttribute("shopId");
            if(currentShopObj == null){
                modelMap.put("redirect",true);
                modelMap.put("url","/shopadmin/shoplist");
            }else {
                Shop currentShop = (Shop) currentShopObj;
                modelMap.put("redirect",false);
                modelMap.put("shopId",currentShop.getShopId());
            }
        }else{
            Shop currentShop = new Shop();
            currentShop.setShopId(shopId);
            request.getSession().setAttribute("currentShop",currentShop);
            modelMap.put("redirect",false);
        }
        return modelMap;
    }

    @RequestMapping(value = "/getshoplist",method = RequestMethod.GET)
    @ResponseBody
    private Map<String,Object> getShopList(HttpServletRequest request){
        Map<String,Object> modelMap = new HashMap<String, Object>();
        PersonInfo user = new PersonInfo();
        user.setUserId(1L);
        user.setName("test");
        request.getSession().setAttribute("user",user);
        user = (PersonInfo) request.getSession().getAttribute("user");
        try{
            Shop shopCondition;
            shopCondition = new Shop();
            shopCondition.setOwner(user);
            ShopExecution se = shopService.getShopList(shopCondition,0,100);
            modelMap.put("shopList",se.getShopList());
            modelMap.put("user",user);
            modelMap.put("success",true);
        }catch (Exception e){
            modelMap.put("success",false);
            modelMap.put("errMsg",e.getMessage());
        }
        return modelMap;
    }

    @RequestMapping(value = "/getshopbyid",method = RequestMethod.GET)
    @ResponseBody
    private Map<String,Object> getShopById(HttpServletRequest request){
        Map<String,Object> modelMap = new HashMap<String,Object>();
        Long shopId = HttpServletRequestUtil.getLong(request,"shopId");
        if(shopId > -1){
            try {
                Shop shop = shopService.getByShopId(shopId);
                List<Area> areaList = areaService.getAreaList();
                modelMap.put("shop",shop);
                modelMap.put("areaList",areaList);
                modelMap.put("success",true);
            }catch (Exception e){
                modelMap.put("success",false);
                modelMap.put("errMsg",e.getMessage());
            }
        }else {
            modelMap.put("success",false);
            modelMap.put("errMsg","empty shopId");
        }
        return modelMap;
    }

    @RequestMapping(value = "/getshopinitinfo",method = RequestMethod.GET)
    @ResponseBody
    public Map<String,Object> getShopInitInfo(){
        Map<String,Object> modelMap = new HashMap<String, Object>();
        List<ShopCategory> shopCategoryList = new ArrayList<ShopCategory>();
        List<Area> areaList = new ArrayList<Area>();
        try {
            shopCategoryList = shopCategoryService.getShopCategoryList(new ShopCategory());
            areaList = areaService.getAreaList();
            modelMap.put("shopCategoryList",shopCategoryList);
            modelMap.put("areaList",areaList);
            modelMap.put("success",true);
        }catch (Exception e){
            modelMap.put("success",false);
            modelMap.put("errMsg",e.getMessage());
        }
        return modelMap;
    }

    @RequestMapping(value = "/modifyshop",method = {RequestMethod.POST})
    @ResponseBody
    public Map<String,Object> modifyShop(HttpServletRequest request) throws IOException {
        Map<String,Object> modelMap = new HashMap<String, Object>();
        //判斷驗證碼是否正確
        if(!CodeUtil.checkVerifyCode(request)){
            modelMap.put("success",false);
            modelMap.put("errMsg","輸入了錯誤的驗證碼");
            return modelMap;
        }
        //1.接收並轉化相應的引數，包括店鋪資訊以及圖片資訊
        String shopStr = HttpServletRequestUtil.getString(request,"shopStr");
        ObjectMapper mapper = new ObjectMapper();
        Shop shop = null;
        try {
            shop = mapper.readValue(shopStr,Shop.class);
        }catch (Exception e){
            modelMap.put("success",false);
            modelMap.put("errMsg",e.getMessage());
            return modelMap;
        }
        CommonsMultipartFile shopImg = null;
        CommonsMultipartResolver commonsMultipartResolver =new CommonsMultipartResolver(
                request.getSession().getServletContext());
        // 檢測檔案是否有上傳檔案流
        if (commonsMultipartResolver.isMultipart(request)){
            MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
            shopImg = (CommonsMultipartFile) multipartHttpServletRequest.getFile("shopImg");
        }
        //2.修改店鋪資訊
        if(shop != null && shop.getShopId() != null){
            PersonInfo owner =(PersonInfo) request.getSession().getAttribute("user");
            // session
            owner.setUserId(1L);
            shop.setOwner(owner);
            ShopExecution se;
            try {
                if (shopImg == null){
                    se = shopService.modifyShop(shop, new ImageHolder(null, null));
                }else {
                    se = shopService.modifyShop(shop,
                            new ImageHolder(shopImg.getInputStream(), shopImg.getOriginalFilename()));
                }
                if(se.getState()==ShopStateEnum.SUCCESS.getState()){
                    modelMap.put("success",true);
                }else {
                    modelMap.put("success",false);
                    modelMap.put("errMsg",se.getStateInfo());
                }
            }catch (ShopOperationException e){
                modelMap.put("success",false);
                modelMap.put("errMsg",e.getMessage());
            } catch (IOException e){
                modelMap.put("success",false);
                modelMap.put("errMsg",e.getMessage());
            }
            return modelMap;
        }else {
            modelMap.put("success",false);
            modelMap.put("errMsg","請輸入店鋪Id");
            return  modelMap;
        }
    }
}

拿getShopById做分析

    //返回/getshopbyid的url，方法為get
    @RequestMapping(value = "/getshopbyid",method = RequestMethod.GET)
    //返回JSON串
    @ResponseBody
    private Map<String,Object> getShopById(HttpServletRequest request){
        //初始化要返回的JSON串
        Map<String,Object> modelMap = new HashMap<String,Object>();
        //從Http請求中獲得shopId值
        Long shopId = HttpServletRequestUtil.getLong(request,"shopId");
        if(shopId > -1){
            try {
                /**
                * 下面程式碼做service層查詢，獲得商店Id為shopId的商店資訊
                */
                Shop shop = shopService.getByShopId(shopId);
                List<Area> areaList = areaService.getAreaList();
                modelMap.put("shop",shop);
                modelMap.put("areaList",areaList);
                modelMap.put("success",true);
            }catch (Exception e){
                modelMap.put("success",false);
                modelMap.put("errMsg",e.getMessage());
            }
        }else {
            modelMap.put("success",false);
            modelMap.put("errMsg","empty shopId");
        }
        return modelMap;
    }

再來看看前端頁面是如何處理的。

(function() {
    var shopId = getQueryString('shopId');
    var isEdit = shopId?true:false;
    var initUrl = '/shopadmin/getshopinitinfo';
    var registerShopUrl = '/shopadmin/registershop';
    //訪問/shopadmin/getshopbyid這個url
    var shopInfoUrl = "/shopadmin/getshopbyid?shopId=" + shopId;
//從/shopadmin/getshopbyid?shopId這個url中獲得controller層返回的JSON串，通過$.getJSON函式進行解析。
//獲取相關的鍵值對，然後插入前端HTML頁面。
function getShopInfoUrl(shopId) {
        $.getJSON(shopInfoUrl,function (data) {
            if(data.success){
                var shop = data.shop;
                $('#shop-name').val(shop.shopName);
                $('#shop-addr').val(shop.shopAddr);
                $('#shop-phone').val(shop.phone);
                $('#shop-desc').val(shop.shopDesc);
                var shopCategory = '<option data-id="'
                    + shop.shopCategory.shopCategoryId +'"selected>'
                    + shop.shopCategory.shopCategoryName +'</option>';
                var tempAreaHtml = '';
                data.areaList.map(function (item,index) {
                    tempAreaHtml += '<option data-id="' + item.areaId+'"selected>'
                        + item.areaName+'</option>';
                });
                $('#shop-category').html(shopCategory);
                $('#shop-category').attr('disable','disable');
                $('#shop-area').html(tempAreaHtml);
                $("#shop-area option[data-id='"+shop.area.areaId+"']").attr("selected","selected");
            }
        });
    }

訪問url，即可獲得商店資訊

流程圖：

相關推薦

shiro配置 在springboot中前後端分離中，整合shiro認證授權框架

一：介紹     Apache Shiro是Java的一個安全框架。由於它相對小而簡單，現在使用的人越來越多。     Authentication：身份認證/登入，驗證使用者是不是擁有相應的身份。     Authorization：授權，即許可權驗證，驗證某個已認證

使用Vue+JFinal框架搭建前後端分離系統

response oid 請求 提高 eclipse start 前後端 bsp size 前後端分離作為Web開發的一種方式，現在應用越來越廣泛。前端一般比較流行Vue.js框架，後端框架比較多，網上有很多Vue+SpringMVC前後端分離的demo，但是Vue+JFi

Springboot 框架 gateway 前後端分離 實現 zuul Ribbon 負載均衡 脫離Eureka實現

專案後臺框架是使用的springboot ，前端使用的是angularJS，中間使用gateway做一層轉發。其實也是微服務的思想。那麼在gateway這層怎麼實現負載均衡。就使用到了zuul，那麼可以使用zuul 的Ribbon來實現負載均衡。 這個是我們專案原先做了一個配置。主要是zu

laravel框架下 前後端分離開發時 通過AJax請求單獨獲取加密後的csrf_token

專案中使用的是前後端分離的開發模式，導致有些頁面是沒有後端請求的， 但是在頁面上偶爾也會出現提交表單的情況，後端對post的請求都會校驗CSRF，（只有在路由的middleware中設定了[csrf]時才會在客戶端的cookie中產上一個XSRF-TOKEN），由於前面這個

SSM框架中的前後端分離

認識前後端分離 在傳統的web應用開發中，大多數的程式設計師會將瀏覽器作為前後端的分界線。將瀏覽器中為使用者進行頁面展示的部分稱之為前端，而將執行在伺服器，為前端提供業務邏輯和資料準備的所有程式碼統稱為後端。 由於前後端分離這個概念相對來說剛出現不久，很多人都是隻聞其聲，不見其形，所以可能會對它產生一些誤

使用ssm框架前後端分離出現中文亂碼

1.如果是url傳中文的話,要在tomcat上進行修改配置檔案,server.xml <Connect URIEncoding=“utf-8”/>標籤 2.如果不是的話,返回資料為亂碼的話,可以從以下幾個地方: 1.web.xml檔案中是不是配置 了字元過濾器, 2.cont

在前後端分離的SpringBoot專案中整合Shiro許可權框架

出自 目錄 專案背景 解決方案 參考文章 專案背景        公司在幾年前就採用了前後端分離的開發模式，前端所有請求都使用ajax。這樣的專案結構在與CAS單點登入等許可權管理框架整合時遇到了很多問題，使得許可權部分的程式碼冗長醜陋，CAS的各種重定向也使得使

SSM中通過Json做前後端分離

場景 前面專案已經搭建到SSM中進行註解式和XML配置式事務管理階段 參照： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85165504 在此專案基礎上搭建使用json進行前後端互動 實現 專案配置

在前後端分離的專案中，後臺使用shiro框架時，怎樣使用它的會話管理系統(session)，從而實現許可權控制

在前後端分離的專案中，ajax跨域和儲存使用者資訊是其中的重點和難點。 如果在後臺使用shiro框架來進行許可權控制，就需要用到cookie+session的模式來儲存使用者的資訊。 在前一篇文章《在前後端分離的專案中，ajax跨域請求怎樣附帶cookie》中，我具體寫了怎

前後端分離項目的技術與OA信用盤平臺搭建框架通用方案

靜態文件 ava 方法 允許 平臺搭建 前臺 pac 問題 部分 一、系統OA信用盤平臺搭建 Q1446595067 整個系統會由三部分組成，如下 二、細節1、前端 前端這裏是一個純前端的項目，使用webpack打包後就只有一些js/css等靜態文件。 開發語言與框架 vu

Maven多模塊，Dubbo分布式服務框架，SpringMVC，前後端分離項目，基礎搭建，搭建過程出

接口實現 url 代碼 blacklist order compiler ply 整合過程 ram 一、Maven多模塊項目的創建 　　　　我們需要建立一個多模塊的maven項目，其目錄結構為其中student-api用於暴露接口；student-service用語處理業務

SSM:Spring+SpringMVC+MyBatis（實現前後端分離）

背景介紹 前段時間開發涉及到了前後端分離思想，本人涉及到開發後端以及資料庫連線處理部分，測試使用postman進行請求，之後對前端請求瞭解了一部分後完成了一個小的頁面，現在分享並記錄下來。 分享 話不多說，maven建立工程在之前的文章中已經存在：maven專案建立。建立好的專案

vue釋出中的前後端分離和前後端不分離

前後端分離 思路:前端和後臺完全分離.前端提供靜態的css和js,在執行時將css和js給後端，後端進行資料的請求（ajax） 前後端分離就是前端和後臺在不同的伺服器上。基本是前端一個nginx加css和js 後端nginx加index.html 當用戶訪問的時候，訪問後端nginx的網址，執行後端的in

在vue中使用mock模擬資料（前後端分離）

最近前後端有點不協調，用了一下mockjs，下面記錄一下 我的環境是webpack+npm+vue，首先就用npm安裝mockjs，安裝命令是 npm install mockjs --save-dev，使用淘寶映象也是可以的，就是使用cnpm替換npm，一樣的效果 安裝好mockjs後，在main.js

在vue中使用mock模擬數據（前後端分離）

rand -m pos random 圖片 user log rod 記錄 最近前後端有點不協調，用了一下mockjs，下面記錄一下 我的環境是webpack+npm+vue，首先就用npm安裝mockjs，安裝命令是 npm install mockjs --save-d

django的crsf機制防禦詳解及在前後端分離中post資料到django-vue js 使用session 、cookie、angular cookie儲存token

django的crsf機制防禦詳解及在前後端分離中post資料到django  更新於: 2018-07-28 |  分類於 django CSRF(Cross Site Request Forgery) 跨站點偽造請求 某個使用

前後端分離模式下JWT使用者認證及其在DRF中的應用

       在前後端分離開發時為什麼需要使用者認證呢？原因是由於HTTP協定是不儲存狀態的(stateless)，這意味著當我們透過帳號密碼驗證一個使用者時，當下一個request請求時它就把剛剛的資料忘了。於是我們的程式就不知道誰是誰，就要再驗

在前後端分離的專案中使用vue寫下單功能

線上下單的流程： 點選結算時必須先登入 如果未登入跳轉至登入頁面 登入之後返回訂單確認頁面 難點：如何在登入成功之後，只能的判斷跳到哪裡？ 如果使用者是正常登入就跳到首頁 如果使用者是結算時過來的，就跳轉至結算頁面 1,結算按鈕繫

利用Nginx解決前後端分離專案中的跨域問題

1. 前端專案利用Nginx配置站點 server { listen 8092 default_server; listen [::]:8092 default_server; root /home/chenpeng/xiahuaida/data/vue; index index.ht

【web框架】【 Cloud-Admin學習筆記（二）】【前後端分離的釋出配置】

因為spirng前後端分離設計，釋出流程略有不同，前後端單獨釋出，通過nginx整合 1、前端專案打包 #轉到前端專案根目錄 cd D:\001\myProject\GitHub\AG-Admin-v2-UI # 構建生成環境 cnpm run build:prod 然後等待伺服