一種專門用於前後端分離的web服務器(JerryServer)

作者:像風一樣i
來源:https://www.cnblogs.com/yueshutong/p/9600961.html
一種專門用於前後端分離的web服務器(JerryServer)

1、問題

隨著現在整個軟件開發行業的發展,在開發模式上逐漸由以前的一個人完成服務端和前端web頁面,演變為前端和後端逐漸分離的趨勢。在安卓、IOS等移動設備開發基本已經成型,前後端達到了完全分離。可是在web網站開發中,前後端依舊高耦合、難分離;後端開發人員難以像開發安卓、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服務器是幫助前後端完全分離的工具,它可以幫助後端工程師只做後端,前端工程師只做前端。

3、技術效果

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

4、附圖說明

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

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

一種專門用於前後端分離的web服務器(JerryServer)

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

一種專門用於前後端分離的web服務器(JerryServer)

本發明的核心思想是代理服務器的角色,對於瀏覽器發起的請求,代理服務器接收後會提取請求中的相關信息,如GET或POST參數、Cookie,攜帶並轉發至後端提供的接口。

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

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

5、安裝使用

  1. 前往Git倉庫克隆/下載Zip壓縮包到本地電腦。
  2. 解壓後只需保留以下3個目錄或文件,其它全部刪除即可:
  • /config
  • /webapps
  • JerryServer-1.0.0-SNAPSHOT.jar
  1. 在控制檯執行java -jar JerryServer-1.0.0-SNAPSHOT.jar命令運行該jar包。Linux系統如使其在後臺運行,在末尾加個&即可。
  2. 訪問http://localhost:8888出現如下界面(默認訪問ROOT項目的index.html文件)
一種專門用於前後端分離的web服務器(JerryServer)


  1. 訪問 http://localhost:8888/admin 並更改不同參數,體驗動態渲染。
一種專門用於前後端分離的web服務器(JerryServer)


  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}

com: ${com}

data[0].time:${data[0].time}

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

7、後臺監控

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

對於監控日誌可以自定義輸出目錄,目錄只支持相對路徑(也就是隻能在webapps目錄下),監控日誌格式為JSON。

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

後臺監控頁面預覽:

一種專門用於前後端分離的web服務器(JerryServer)

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
}
]
}
]
一種專門用於前後端分離的web服務器(JerryServer)

在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服務器更簡單,更方便。而且我的web服務器更符合服務拆分的思想。

就比如世界上為什麼會有了C++還要有Java、Python等編程語言一樣的道理,總之一句話,不衝突 ~ 不算造輪子

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: 改用線程池管理日誌線程


分享到:


相關文章: