《淺談架構之路:前后端分離模式》 - 山人行 - 博客園

前言:分離模式

  對前后端分離研究了一段時間,恰逢公司有一個大項目決定嘗試使用前后端分離模式進行,便參與其中。該項目從2016年初立項至今,平平穩穩得度過,但也涌現出越來越多的問題,絕對不是說前后端分離模式不好,而是很多公司在嘗試前后端分離的時候沒有做好充分得準備。

  網上對前后端分離介紹的文章已經屢見不鮮,接下來本人用一點粗淺的言語也談談這塊,獻丑了。

為什么要分離?

  如果只問“前后端分離的意義大么?”這是廢話,因為從軟件架構的角度 Web 的前后端從一開始不就一直是分離的么,而且 browser、server 可能將永遠分離下去。

  為了了解這個問題,我們有必要先了解一下 Web的研發模式演變,關于這個題材,下面這篇博文說得不錯,這邊就不做搬運工了。

  https://github.com/lifesinger/blog/issues/184

  我們不能“為了分離而分離”,而應該“為了真正理解web開發、為了更好完成需求而分離”。

前后端分離的誤區?

  1、前端人員配備是否充足?

  由于所在公司以往項目采用傳統開發風格,即以后端MVC為主的開發模式,前端人員僅僅提供靜態html頁面,其余工作皆由后端開發人員完成。采用前后端分離模式可以減后臺負擔,加快研發效率,當然,前提是前端能做好的話。以往只需要提供靜態頁面的前端人員,在前后端分離模式中要負責項目的view+controller部分,即除了靜態頁面,還需要負責頁面的所有交互代碼、以及nodejs與視圖層以及后端API的交互工作,無疑增加了前端人員的學習成本,在沒有足夠知識和人才儲備的情況下,只能讓前端人員加班加點。結果是大量前端人員離職(PS:做這么多事,工資總得加吧!)

  2、前后端職責分配?

  很多公司認為采用前后端分離之后,前后端只需要通過指定API進行交互即可,前端負責頁面渲染,Nodejs負責路由分配,后端提供API。忽視了大量關鍵工作,職責分配和細節處理沒有相應文檔規定,緩存機制、圖片上傳下載、數據校驗、語言國際化等等并沒有出具相應信息。另外,大量忽視了nodejs層的作用,僅僅把nodejs當成一個路由中轉,這一方面也是對nodejs技術的不熟悉導致的,其實nodejs能負責很多事,除了復雜業務邏輯處理和數據操作由Java 負責,大量工作完全可以在nodejs層處理。(PS:還是基礎不夠導致的!)

  3、后端API是否Restful風格?

  很多公司采用了前后端分離模式后,后端API仍然采用以往的傳統風格,這是不合理的,Restful風格的API應該是前后端分離的最佳實踐。ResultFul推薦每個URL能操作具體的資源,而且能準確描述服務器對資源的處理動作,通常服務器對資源支持get/post/put/delete/等,用來實現資源的增刪改查。前后端分離的話,這些api-url是對接的橋梁,采用resultFul接口地址含義才更清晰、見名知意。(PS:用了Spring4.x 竟然還不用rest風格,說不過去啊)

  4、前后端協作模式?

  前后端分離后,無論是API接口的對接還是測試工作,都涉及到前后端人員的溝通,很多公司采用前后端分離后,前后端協作模式配合力度底,互相等待,開發效率低下,反而不如傳統的開發模式。例如:當后端 API 沒有編寫完成時,前端無法進行調試,這就導致了前端會被后端阻塞的情況。其實像這種互相等待的模式需要改進,?Mock Server 可能可以解決一些問題。

如何前后端分離?

  怎么做前后端分離?大方向就是

  后端專注于:后端控制層(Restful API)?& 服務層 & 數據訪問層;

  前端專注于:前端控制層(Nodejs) & 視圖層

  本人認為的前后端分離模式應該是這樣,當然這不一定正確:

  1、項目設計階段,前后端架構負責人將項目整體進行分析,討論并確定API風格、職責分配、開發協助模式,確定人員配備;設計確定后,前后端人員共同制定開發接口。

  2、項目開發階段,前后端分離是各自分工,協同敏捷開發,后端提供Restful API,并給出詳細文檔說明,前端人員進行頁面渲染前臺的任務是發送API請(GET,PUT,POST,DELETE等)獲取數據(json,xml)后渲染頁面。

  3、項目測試階段,API完成之前,前端人員會使用mock server進行模擬測試,后端人員采用junit進行API單元測試,不用互相等待;API完成之后,前后端再對接測試一下就可以了,當然并不是所有的接口都可以提前定義,有一些是在開發過程中進行調整的。

  4、項目部署階段,利用nginx 做反向代理,即Java + nodejs + nginx 方式進行。

編后語

  從經典的JSP+Servlet+JavaBean的MVC時代,到SSM(Spring + SpringMVC + Mybatis)和SSH(Spring + Struts + Hibernate)的Java 框架時代,再到前端框架(KnockoutJS、AngularJS、vueJS、ReactJS)為主的MV*時代,然后是Nodejs引領的全棧時代,技術和架構一直都在進步。雖然“基于NodeJS的全棧式開發”模式很讓人興奮,但是把基于Node的全棧開發變成一個穩定,讓大家都能接受的東西還有很多路要走。創新之路不會止步,無論是前后端分離模式還是其他模式,都是為了更方便得解決需求,但它們都只是一個“中轉站”。

  走過的“中轉站”可能越來越多,但是不要漸行漸遠才是。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248840.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248840.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248840.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

springboot快速集成swagger

今天技術總監說:小明,我們本次3.0改造,使用swagger2.0作為前后端分離的接口規范,它可以一鍵生成前后端的API,一勞永逸……小明:??? Spring Boot 框架是目前非常流行的微服務框架&…

php curl處理get和post請求

CURL 是一個利用URL語法規定來傳輸文件和數據的工具,支持很多協議,如HTTP、FTP、TELNET等。最爽的是,PHP也支持 CURL 庫。使用PHP的CURL 庫可以簡單和有效地去抓網頁。你只需要運行一個腳本,然后分析一下你所抓取的網頁&#xff0…

【Web】JavaWeb項目為什么我們要放棄jsp?為什么要前后端解耦?為什么要前后端分離?2.0版,為分布式架構打基礎。 - CSDN博客

前戲 前后端分離已成為互聯網項目開發的業界標準使用方式,通過nginxtomcat的方式(也可以中間加一個nodejs)有效的進行解耦, 并且前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務(多種客戶…

MongoDB升級導致啟動失敗

起因 最近項目使用MongoDB,但是作為一個技術菜鳥,NoSQL數據庫我還真不會用,于是我就在自己的阿里云服務器上安裝了一個MongoDB4.0.9。 現象 但是當我使用yum -y update升級以后,MongoDB無法啟動了,即使重裝刪除了MongDB的文件了還…

測者的測試技術手冊:揭開java method的一個秘密--巨型函數

揭開java method的一個秘密:巨型函數 相信,很多人都不知道Java的Method的上限為64K。本文將超過這個上限的函數叫做巨型函數。 巨型函數的問題 1、如果代碼超過了這個限制,Java編譯器就報"Code too large to complier"的錯誤。 2、…

前端攻略系列(二) - 前端各種面試題

幸運且光榮的被老大安排了一個任務 - “去整理些前端面試題”。年前確實不是招人的好時候,所以我們前端團隊經過了超負荷的運轉,終于堅持過了春節。春節以后就開始招人啦,這套題考察的目標就是基礎基礎再基礎,嘿嘿。 事先聲明&…

html 初識

一、web請求流程模擬 python編寫的簡易服務器應用程序 import socketserversocket.socket() ip_port (127.0.0.1,8080) server.bind(ip_port) server.listen()while 1:conn, addr server.accept()from_browser_msgconn.recv(1024)print(from_browser_msg)conn.send(bHTTP/1.1 …

Iframe的那些事

在web開發中,經常會用到iframe,難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中獲取iframe中的元素 1、 格式:window.frames["iframe的name值"].document.getElementByIdx_x(…

異常處理try...catch...throw

C 引入了異常處理機制。其基本思想是:函數 A 在執行過程中發現異常時可以不加處理,而只是“拋出一個異常”給 A 的調用者,假定為函數 B。 拋出異常而不加處理會導致函數 A 立即中止,在這種情況下,函數 B 可以選擇捕獲 …

Makefile 中:= ?= += =的區別

是最基本的賦值: 是覆蓋之前的值? 是如果沒有被賦值過就賦予等號后面的值 是添加等號后面的值轉載于:https://www.cnblogs.com/mingyunrangwozoudaoxianzai/p/10118039.html

原生JS寫Ajax的請求函數

本文主要介紹了如何通過原生JavaScript封裝ajax請求,文中給出了具體的實現代碼和詳細的解釋,希望對你有所幫助。 一、JS原生Ajax ajax:一種請求數據的方式,不需要刷新整個頁面; ajax的技術核心是 XMLHttpRequest 對象&…

軟件工程--第十三周學習進度

第十三周代碼量258 所花時間 6h博客量 2篇了解到的知識點 在尋找“水王”程序編寫時,學習了一種新的設計思想,兩兩刪除法,最后剩下的就是水王。這種設計思想,感覺可以用到多種編程,感覺很有意思。轉載于:https://www.c…

如何使用 tf object detection

# 如何使用 tf object detectionhttps://juejin.i m/entry/5a7976166fb9a06335319080https://towardsdatascience.com/how-to-train-your-own-object-detector-with-tensorflows-object-detector-api-bec72ecfe1d9https://towardsdatascience.com/building-a-toy-detector-with…

WEB文件上傳之JQuery ajaxfileupload插件使用(二)

1.JQuery ajaxfileupload插件使用準備 下載地址: http://www.phpletter.com/DOWNLOAD/ 2.原理分析 ajaxfileupload也是利用iframe實現無刷新異步提交,與我的上一篇文章(WEB文件上傳之apache common upload使用(一)&…

Navicat安裝激活

有條件的同學麻煩不要使用下面的激活步驟,僅供個人學習使用 。。。。。。 。。。。。。 。。。。。。 。。。。。。 一、去官網下載最新Navicat軟件https://www.navicat.com.cn/download/navicat-premium 二、去下載激活腳本https://github.com/DoubleLabyrinth/nav…

WEB文件上傳之apache common upload使用(一)

文件上傳一個經常用到的功能,它有許多中實現的方案。 頁面表單 RFC1897規范 http協議上傳 頁面控件(flash/html5/activeX/applet) RFC1897規范 http協議上傳 頁面控件(flash/html5/activeX/applet) 自定義數據規范 http協議上傳 頁面控件(flash/html5/act…

前端CSS學習筆記

一 CSS介紹 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(超文本標記語言)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語…

自律以自救

在一次邏輯思維的跨年晚會上,羅胖曾以「帝王」來形容活在當下移動互聯網世界的人們。一個手機 App 可以讓你足不出戶,享受上百名廚師團隊的服務,中飯想吃啥菜式、樣品,輸入框中一應俱全,光論規格,可能已超過…

Validform使用入門

Validform使用入門 1、引入css 請查看下載文件中的style.css,把里面Validform必須部分復制到你的css中(文件里這個注釋 "/*以下部分是Validform必須的*/" 之后的部分是必須的)。之前發現有部分網友把整個style.css都引用在了頁面…

Java爬取并下載酷狗音樂

本文方法及代碼僅供學習,僅供學習。 案例: 下載酷狗TOP500歌曲,代碼用到的代碼庫包含:Jsoup、HttpClient、fastJson等。 正文: 1、分析是否可以獲取到TOP500歌單 打開酷狗首頁,查看TOP500,發現存…