《淺談架構之路:前后端分離模式》

?

前言:分離模式

  對前后端分離研究了一段時間,恰逢公司有一個大項目決定嘗試使用前后端分離模式進行,便參與其中。該項目從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的全棧開發變成一個穩定,讓大家都能接受的東西還有很多路要走。創新之路不會止步,無論是前后端分離模式還是其他模式,都是為了更方便得解決需求,但它們都只是一個“中轉站”。

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

轉載來自:https://www.cnblogs.com/shanrengo/p/6397734.html

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

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

相關文章

查詢語句

1.基本查詢語句 1.1 語法: SELECT 屬性列表 FROM 表名或視圖列表 WHERE 條件表達式1 GROUP BY 屬性名1 | HAVING 條件表達式2 ORDER BY 屬性名2 ASC DESC 2.單表查詢 1.應用:查詢表中所有的記錄 2.查詢指定字段:查詢表中所有name字段的記錄 …

Nodejs+Koa2+云服務ECS 開發微信公眾號(一)之環境配置

硬件準備工作 1. 本人采用阿里云的云服務器,購買了入門級云服務ECS(293元每年); 2.針對服務器進行認證,設置個人服務器密碼; 3.購買數據盤,并將其掛載于云服務器之上(建議掛載在/…

中文詞頻統計與詞云生成

本次作業來源于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2822 中文詞頻統計 1. 下載一長篇中文小說。 下載長篇小說《西游記》 本次作業小說保存在txt文檔:xyj.txt 2. 從文件讀取待分析文本。 xyj open(rF:/xyj.txt,r,encodingutf-8)…

java SWT Browser實現瀏覽器功能并運行JavaScript代碼

一、創建簡單的瀏覽器 import org.eclipse.swt.*; import org.eclipse.swt.browser.*; import org.eclipse.swt.layout.*; import org.eclipse.swt.widgets.*;public class Myswt3 {public static void main(String [] args) {Display display new Display();final Shell she…

[JZOJ5866]【NOIP2018模擬9.13】指引

Description Input Output Sample Input 6 3 2 0 3 1 1 3 4 2 0 4 5 5 Sample Output 2 Data Constraint Hint 貪心,把旅行者和出口的x坐標降序排序。 然后從前往后掃,如果是出口,就把y坐標插進set里,如果是旅行者,就查…

scrapy框架之遞歸解析和post請求

今日概要 遞歸爬取解析多頁頁面數據scrapy核心組件工作流程scrapy的post請求發送今日詳情 1.遞歸爬取解析多頁頁面數據 - 需求:將糗事百科所有頁碼的作者和段子內容數據進行爬取切持久化存儲 - 需求分析:每一個頁面對應一個url,則scrapy工程需…

SmartGit 過期解決方案之 非商業版本安裝使用

作為前端開發的小伙伴一定有這樣的困惑,自己在日常的團隊協作配合時,提交代碼和解決沖突是我們最頭疼的問題,但是又不喜歡使用Eclipse或者IDEA這種超級占內存的編輯器,使用Git命令又是那么捉襟見肘,所以有一個好用的輕…

HDU6438 Buy and Resell 解題報告(一個有趣的貪心問題的嚴格證明)

寫在前面 此題是一個很容易想到的貪心題目,但是正確性的證明是非常復雜的。然而,目前網上所有題解并未給出本題貪心算法的任何正確性證明,全部僅停留在描述出一個貪心算法。本著對算法與計算機科學的熱愛(逃)&#xff…

Webpack不生成index.html

沒有導出你的最后2個插件,并且沒有指定html文件名dist,因為HtmlWebpackPlugin應該生成相對于path,下面是固定配置: var path require(path)var webpack require(webpack)var HtmlWebpackPlugin require(html-webpack-plugin);m…

CSS3筆記之定位篇(一)relative

知識點1:relative和absolute relative: 相對自身,并會限制內部absolute元素層疊 absolute: 相對容器,并受到父類容器relative的影響,比如:overflow:hidden/scroll fixed: 不受relative限制,只受z-index的…

洛谷P3066 [USACO12DEC]逃跑的BarnRunning Away From…

題面鏈接 一句話題意:給出以1號點為根的一棵有根樹,問每個點的子樹中與它距離小于等于l的點有多少個。 我:似乎并不好做啊。。。看了題解后大霧。。。 sol:考慮樹上差分,對于一個點,在他那個位置&#xff0…

vue使用webPack打包發布后頁面顯示空白

今天筆者將打包后,進行訪問,訪問到index.html,但是出現的是空白頁。 打包命令:npm run build,打包后的文件如下: 這是因為index.html中引入的css ,js 的路徑不對:如下圖 這個是因為webpack打包的時候引入…

第一次實驗報告

c程序實驗報告 姓名:黃志乾 實驗地點:教學樓514教室 實驗時間:3月19日實驗項目: 1、字符與ASCII碼 2、運算符與表達式的應用 3、順序結構應用程序 4、數學函數的算法描述 5、雞兔同籠的算法描述 6、確定坐標的算法描述…

Mac下Idea安裝Git報錯Xcrun問題的解決

使用過IDEA的小伙伴都知道,它和我們之前用過的Eclipse一樣強大,或者比他更強大。當它配合的Mac使用時,就會變得更得心應手,少去很多環境配置的環節。其中最典型的就是Git 由于Mac自帶就安裝了git, 大家可以通過終端輸入命令“git…

關于Django路由層簡單筆記

Django—路由層 URL配置(URLconf)就像Django 所支撐網站的目錄。它的本質是URL與要為該URL調用的視圖函數之間的映射表;你就是以這種方式告訴Django,對于客戶端發來的某個URL調用哪一段邏輯代碼對應執行。 1,簡單的路由配置 from django.urls…

hdu 5183

hdu 5183(Hash處理區間問題) 題目鏈接:http://acm.hdu.edu.cn/showproblem.php?pid5183 題意:給出一個n個元素的數組,現在要求判斷 a1-a2a3-a4...../-an 中是否存在某個某個區間使得 ai-ai1ai2...(-1)j-iaj k?? 這個題要利用Hash就可以實現幾乎在 O(n) 的時間內實現查找判斷…

vue-cli,webpack安裝

第一步應該下載node.js這是安裝vue-cli的基礎工具。官網下載快捷安全可:https://nodejs.org/en/ 第二步打開命令面板找到你要安裝的位置 第三步就是安裝全局vue-cli 命令操作 npm intatll -g vue-cli 安裝完畢之后 可以檢查安裝版本即 vue -V 如下圖 這還不算完&…

CSS3筆記之定位篇(二)z-index

知識點1&#xff1a;z-index基礎 z-index&#xff1a;auto; 默認值 z-index: <integer> 整數 z-index: inherit 繼承 不考慮css3 還有定位元素的z-index才有作用 知識點2&#xff1a;z-index與定位元素 無嵌套&#xff1a;后來居上&#xff0c;哪個大哪個上 //在沒有…

JSP頁面傳值出現中文亂碼的問題

在接收值的jsp頁面代碼的body里添加&#xff1a; <%request.setCharacterEncoding("utf-8"); %> //這里是設置utf-8為jsp頁面的中文編碼方式 jsp頁面之間傳值&#xff1a; 發送信息的jsp腳本&#xff1a; session.setAttribute("user",rs.getString…

【我所認知的BIOS】— uEFI AHCI Driver(8) — Pci.Read()

【我所認知的BIOS】—> uEFI AHCI Driver(8) — Pci.Read()LightSeed6/19/2014社會一直在變。不曉得是不是社會變的太苦開&#xff0c;而我沒變所以我反而顯得單純了。辦一個居住證。幾年前辦的以為最終能夠一勞永逸的&#xff0c;后來續辦的是發現確實不難了。尼瑪&#xf…