一種專門用於前後端分離的web伺服器（JerryServer）

  • 2020 年 2 月 17 日
  • 筆記

如果你還不了解現在的前後端分離，推薦閱讀淘寶前端團隊的前後端分離的思考與實踐

1、問題

隨著現在整個軟體開發行業的發展，在開發模式上逐漸由以前的一個人完成服務端和前端web頁面，演變為前端和後端逐漸分離的趨勢。在Android、IOS等移動設備開發基本已經成型，前後端達到了完全分離。可是在web網站開發中，前後端依舊高耦合、難分離；後端開發人員難以像開發Android、IOS等移動端一樣，只需要面向介面編程，而不用關心web頁面的邏輯設計。

網站開發在前後端的分離上也進行了一部分發展，比如出現了Vue.js，React.js等前端js框架，使用起來可以說是很方便。但不可忽視的是，使用js去渲染頁面是把壓力轉移到了客戶端，而且使用js渲染頁面會導致SEO（搜索引擎爬取不到頁面資訊）等問題。

所以，在服務端處理頁面並返回視圖也是現在另一種流行的開發模式。在Java web開發中，出現了JSP動態頁面，動態渲染頁面並返回視圖到瀏覽器客戶端。隨著發展，JSP現如今也被FreeMarker、Thymeleaf等更加輕量的模板引擎逐漸取代，逐漸成為主流。但是這種方式造成了後端開發人員難以擺脫HTML頁面，現在的公司依舊有很多後端工程師去做這部分工作。

綜上所述，為了徹底解決上面的兩個問題，既能實現前端與後端的完全分離，而又不需要使用js去渲染頁面。我們在服務端處理頁面的基礎上發明了一種改變傳統網站開發模式的web伺服器，解決web開發中前後端難分離的問題。

本發明可以把後端人員對頁面的處理的工作交還給前端去做。後端人員只需要面向介面編程，而不必接觸前端HTML頁面的實現。原來需要後端去寫FreeMarker語法邏輯去渲染HTML頁面的工作交由前端人員去做。本質上只是分離了這部分工作安排，而並沒有改變工作的內容。

2、定義

Jerry伺服器是類似Tomcat的web伺服器，幫助前後端完全分離的工具，它可以幫助後端工程師只做後端，前端工程師只做前端。

3、技術效果

  1. 前後端分工更加明確，後端只需要面向介面編程，只關心後端業務邏輯，不關心前端的實現。
  2. 前端不再只寫靜態頁面，還要使用FreeMarker語法寫頁面邏輯。
  3. 後端的一套業務介面適用於Android、IOS、web等平台設備，提高服務端系統的擴展性。
  4. 改變了傳統開發中要求後端人員必須學習HTML、JavaScript、Css等前端技能。
  5. 本伺服器可以用於開發過程中的調試階段，由前端人員進行使用，並將最終寫好邏輯的HTML文件放在項目中上線；也可以將本伺服器直接用於線上環境，成為項目中的一部分。這兩種都可以達到前後端分離開發的目的。

4、附圖說明

圖1：在傳統Java web開發中的運行流程圖

解釋：此流程圖中只有request部分是前端負責，其餘均為後端負責。

圖2：使用本發明之後的Java web運行流程圖

本項目的核心思想是代理伺服器的角色，對於瀏覽器發起的請求，代理伺服器接收後會提取請求中的相關資訊，如GET或POST參數、Cookie，攜帶並轉發至後端提供的介面。

對於後端來說，就好像只收到了瀏覽器發出的請求，代理伺服器完全可以被後端人員忽略掉。

代理伺服器收到後端的響應內容，提取響應頭中的Set-Cookie值，並處理響應體（JSON），使用FreeMarker模板引擎渲染到HTML文件，攜帶Set-Cookie一起響應給瀏覽器，對於瀏覽器用戶來說，就好像只與服務端進行通訊。

5、安裝使用

  1. 前往Git倉庫克隆/下載Zip壓縮包到本地電腦。
  2. 解壓後只需保留以下3個目錄或文件，其它全部刪除即可：
    • /config
    • /webapps
    • JerryServer-1.0.0-SNAPSHOT.jar
  3. 在控制台執行java -jar JerryServer-1.0.0-SNAPSHOT.jar命令運行該jar包。Linux系統如使其在後台運行，在末尾加個&即可。
  4. 訪問http://localhost:8888出現如下介面（默認訪問ROOT項目的index.html文件）

訪問 http://localhost:8888/admin 並更改不同參數，體驗動態渲染。

  1. 安裝成功！

6、模板引擎

Jerry 使用 FreeMarker 作為模板引擎。

例如，服務端介面：

{      "message": "響應成功",      "state": {          "message": "ok",      },      "data": [{          "time": "2018-04-25 13:25:07",      }, {          "time": "2018-04-25 13:25:07",      }]    }

HTML頁面：

    message：${message}<br>      com: ${com}<br>      data[0].time：${data[0].time}

其它用法請參考FreeMarker學習網站：FreeMarker開發手冊

7、後台監控

監控系統對各個頁面與文件的響應耗時與請求資訊進行監控，監控頻率可以在全局配置文件中進行自定義配置，默認為10s。

對於監控日誌可以自定義輸出目錄，目錄只支援相對路徑（也就是只能在webapps目錄下），監控日誌格式為JSON。

默認提供的監控頁面位於webapps/manage項目下。默認訪問：http://localhost:8888/manage

後台監控頁面預覽：

8、負載均衡

對於FreeMarker頁面的後端介面支援使用加權負載均衡。關於如何設置負載均衡，請參考介面配置。

9、全局配置

全局配置文件位於config目錄下，使用默認UTF-8編碼進行讀取。詳細配置如下：

#開啟埠  port=8888  #默認首頁  index=index.html  #默認項目  project=ROOT  #全局404模板(webapps/)  404=/template/404.html  #介面配置文件名，要求內容為Json  config=page.json  #介面配置文件的編碼  js_charset=UTF-8  #解析介面響應的編碼  jk_charset=UTF-8  #請求介面超時時間ms  timeout=10000  #FreeMarker文件編碼  fm_charset=UTF-8  #監控刷新頻率(毫秒/ms)  monitor=10000  #監控文件目錄(webapps/)  monitorLog=/manage/log.json  #快取:最大存儲元素個數  maxElementsInMemory=10000  #快取:最大發獃時間(秒/s)  timeToIdleSeconds=120  #快取:最大存活時間(秒/s)  timeToLiveSeconds=600  #控制台日誌級別INFO/DEBUG  level=INFO

Jerry把所有的web項目與頁面都放在了webapps下，伺服器也只會響應webapps目錄下的文件。

  1. 關於全局404模板，默認即可。不過也支援自定義。
  2. 關於介面配置文件，默認page.json。你可以自定義，但一定必須是json內容，而且位於項目根目錄下（如ROOT/page.json）。
  3. 介面配置文件的編碼就是page.json文件的讀取時的編碼格式。默認utf-8
  4. FreeMarker文件編碼是設置處理FreeMarker文件的編碼。
  5. 監控刷新頻率。最低為1s，默認10s。
  6. 上面快取的意思是在有效的600秒(10分鐘)內，如果連續120秒(2分鐘)未訪問快取，則快取失效。就算有訪問，也只會存活600秒。
  7. 當你想查看運行日誌時，切換為debug即可。默認info。

10、介面配置

先看一下示範文件，下面進行講解。

[    {      "page": "index.html",      "id": "je",      "inter": [        {          "link": "https://www.kuaidi100.com/query?type=shentong&postid=3374107234608&id=1",          "weight": 1        },        {          "link": "https://www.kuaidi100.com/query?type=yuantong&postid=801371015800473775&id=1",          "weight": 2        }      ]    },    {      "page": "admin/index.html",      "id": "je",      "inter": [        {          "link": "https://www.kuaidi100.com/query?type=shentong&postid=3374107234608&id=1",          "weight": 1        }      ]    }  ]

屬性

說明

page

HTML文件路徑。

id

ID名稱。

inter

後端介面對象，可以定義多個實現負載均衡。

link

後端介面實際地址。

weight

權重，用於負載均衡。

在Jerry正式版中，採用FreeMarker作為模板引擎，一個（FreeMarker）HTML文件只能有一個配置。

11、一些其它問題

1，Linux與Windows

在Linux部署Jerry伺服器，訪問文件嚴格區分大小寫。而在Windows對大小寫不敏感。

舉個例子，訪問/ROOT和/ROOt時，在Windows是可以的，在Linux是失敗的。

如果在使用中您還遇到了其它Bug，歡迎在我的Git或者部落格給我留言。

2，關於編碼

全項目默認UTF-8，不過也提供配置支援自定義。

對於不需要語法處理的HTML文件來說，不涉及編碼問題。

對於需要語法處理的HTML文件，統一配置在config配置文件。

若出現亂碼，請檢查你的配置。

3，是不是造Node.Js的輪子

關於Node.Js，在做這個的時候我真的不知道它是幹啥的。因為我是一名Java後端工程師。 現在了解了Node.Js後，感覺Node.Js和我的這個web伺服器的角色都是中間的代理伺服器，從兩者渲染HTML頁面的方式上來看，本質還是不同的。Node.Js使用的JS進行編程式渲染，需要寫程式碼邏輯，我的web伺服器使用的FreeMarker模板引擎，直接在HTML上寫表達式語法，相比較之下，我的web伺服器更簡單，更方便。非但如此，JerryServer伺服器更符合服務拆分的思想。NodeJs雖然起到了前後端分離的作用，但也加大了前端人員的業務需求，許多後端的業務從此轉為了前端。JerryServer輕量簡單可分散式擴展，如何選擇，還需要根據實際情況判斷。

12、更新日誌

2018/9/8：修復介面數據為數組解析失敗的BUG。

2018/9/9：升級改版，主要是把介面配置簡化。實行一個頁面一個介面配置的策略。

把介面和頁面進行綁定。訪問頁面的method、header和body就是請求介面的method、header和body。

支援GET請求，POST請求等。

關於請求體類型，除了 multipart/form-data 格式，binary二進位流（圖片等），其餘格式都支援。默認UTF-8解碼與編碼。

2018/9/10：去掉JSOUP依賴，使用HttpURLConnection進行網路請求。

2018/9/18：修復URL路徑問題，訪問目錄默認訪問目錄下index.html（可自定義）

2018/9/21: 改用執行緒池管理日誌執行緒

13、尾聲

禁止申請專利！

若使用出現Bug等問題，請到以下地址留言評論，或者加入QQ群交流。

Github：https://github.com/yueshutong/JerryServer/

VirMach 便宜 VPS

QNews

QNews