1. 程式人生 > >[原創]顛覆傳統網站開發模式的web伺服器

[原創]顛覆傳統網站開發模式的web伺服器

Jerry Server - 正式版1.0.0 文件

之前發過一篇文章,當時的想法現在看來真的不是很明確,得到了很多批評。不過,批評有利有弊,由此我又仔細思考了很多,最終明確了自己究竟要做什麼。特厚著臉皮發出正式版文件!

1、緣由

以Java web舉例,現在的網站系統開發模式,對於web端和服務端的資料互動以及頁面渲染,無外乎兩種:

  1. 第一種是交給後端處理,Jsp,Freemark模板引擎之流,這種開發模式需要前端人員做好靜態頁面交給後端去處理一些其它工作。這種開發模式到如今也依舊流行,這也是招聘Java web程式設計師要求也要會HTML、JS、CSS的原因。到現在基本上都是採用這種開發模式,注意這種模式並非真正的前後端分離!
  2. 另一種是交給前端處理,前端全部完成web端的頁面渲染工作。要知道的是,前端處理只能使用JS,一些前端JS模板引擎也有不少,Vue等,無論再花哨,本質依舊是JS。不可忽視的是,完全依賴JS處理前端頁面是存在弊端的,比如SEO問題。
  3. 總的來說,兩種方式有利有弊。如果你在實際開發中涉及到我上面說的第一種,需要後端再對前端頁面進行處理,那麼可以使用 Jerry 來解決這部分的分工,實現完全前後端分離。

2、定義

Jerry是幫助前後端完全分離的工具,它可以幫助後端工程師只做後端,前端工程師只做前端。

3、思想

簡單來說,以往的模式是請求後端介面,後端進行處理後返回一個頁面給瀏覽器。前後端並沒有進行徹底分離,比如還在使用後端模板引擎(FreeMark,Thymeleaf)或JSP。為什麼Web開發不能像Android等移動端開發一樣真正前後端分離呢?

上述開發模式是後端提供介面(也就是網址),經過處理得到一些資料,然後經過模板引擎的一系列渲染,填充資料,再把完成的HTML頁面返回給瀏覽器。流程圖如下:

Jerry 的思想就是把這部分的流程進行拆分。流程圖如下:

也許你會說,Cookie 怎麼辦?會話如何保持?我想說,Jerry 伺服器會相當認真的執行代理的角色。把客戶端的HTTP請求的方法、Cookie、引數原封不動的傳送給服務端。服務端傳送回來的響應也會把Set-Cookie響應給客戶端。(筆者想到的就是Cookie比較常用,若思考欠缺,歡迎指正。)理論上說,Jerry的方案是可行的。

4、模式

  1. 一種完全真正的前後端分離,Jerry採用如今最流行的JSON作為前後端資料互動的介面。

    對後端工程師來說,只需要關心介面的實現,不需要再接觸前端頁面,甚至不要求懂HTML,JS等。

  2. 只做介面有什麼優勢?一套介面適用web、Android、ios各個平臺,這對軟體專案的可擴充套件性大大提升。不可否認的是,現在依舊有些網站採用後端直接返回html片段的開發模式,這對軟體的擴充套件性非常不利。

  3. 對前端工程師來說,任務脈絡更為清晰而簡潔。不像以前只需要做好頁面,更需要使用FreeMark等處理動態互動。這在之前是由後端工程師來做的。可以說是完全顛覆以往。把網站開發做成像安卓開發一樣的前後端分明。

  4. 如果你已經有了成熟的前後端分離方案,自然不需要Jerry,如果你們的後端工程師還需要再去寫FreeMark,Thymeleaf等,則可以考慮使用Jerry達到更徹底的前後端分離。

5、場景

用一句話形容Jerry:既能上戰場殺敵,又能在家做家務

你既可以把Jerry部署在實際專案中使用,當做一個前端伺服器。

如果你真的不想在線上部署Jerry,那你可以在開發過程中,交由前端開發人員去使用Jerry。

把原來的前端只做靜態頁面然後交由後端去渲染的工作改為全部讓前端去做,然後在上線時再把寫過FreeMark語法的HTML檔案放到後端專案中。

5、優勢

  1. 快!啟動快,毫秒級的啟動!

    響應快,配置後臺監控,響應時間一覽無遺。

    優先讀取各種檔案的快取,使用EhCache實現。

    對於後端介面,使用加權負載均衡。

    對於日誌監控等耗時而且響應無關的操作,全部執行在其它執行緒。

    如果你還有其它加快速度的方法,歡迎留言。

  2. 輕!輕量級,沒有過多依賴,大部分功能能自己實現就自己寫。全部依賴如下:

    • Netty
    • slf4j + logback
    • fastjson
    • ehcache
    • junit4
    • freemark
  3. 自帶監控系統。對頁面的響應速度以及HTTP資訊一覽無遺。

6、引擎

Jerry 使用 FreeMark 作為模板引擎。也就是說,原來需要後端工程師使用freemark去渲染頁面,現在變為前端工程師去使用。在這一點,Jerry沒有重複造輪子,而是吸收兼併了FreeMark的優勢。

例如,服務端介面:

{
    "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}

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

7、監控

監控系統對各個頁面與檔案的響應耗時與請求資訊進行監控,監控頻率可以在全域性配置檔案中進行自定義配置,預設為10s。

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

後臺監控頁面預覽:

監控系統執行流程:

8、負載均衡

Jerry 對於靜態資源全部做了快取,FreeMark本身就帶有快取。對於FreeMark頁面的後端介面支援使用加權負載均衡。如果你想體驗加權負載均衡,可以把快取時間設定為1。然後不斷重新整理頁面。關於如何設定負載均衡,請參考介面配置。

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
#freemark檔案編碼
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. freemark檔案編碼是設定處理freemark檔案的編碼。
  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正式版中,採用FreeMark作為模板引擎,一個(FreeMark)HTML檔案只能有一個配置。

12、一些其它問題

1,Linux與Windows

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

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

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

2,關於編碼

全專案預設UTF-8,不過也提供配置支援自定義。

對於不需要語法處理的HTML檔案來說,不涉及編碼問題。

對於需要語法處理的HTML檔案,統一配置在config配置檔案。

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

3,如何啟動

請在Git克隆/下載本專案壓縮包,解壓後只需保留以下3個目錄或檔案,其它全部刪除即可:

  • /config
  • /webapps
  • JerryServer-0.0.1-SNAPSHOT.jar

然後在控制檯或命令列執行java -jar JerryServer-0.0.1-SNAPSHOT.jar即可執行。

Linux系統如使其在後臺執行,在末尾加個&即可。

然後使用的問題,一般來說,只需要把web專案放到webapps下,專案根目錄新建page.json介面配置即可。 關於介面配置詳細引數上面已經說明。然後在HTML頁面使用FreeMark語法獲取後端資料。例子:

API介面:

{
       "message": "ok",
       "data": [
           {
               "time": "2018-09-06 16:57:43",
           }
        ]
  }

HTML頁面:

<p>
    message:${message}<br>
    data[0].time:${data[0].time}
</p>

4,是不是造Nginx的輪子

關於這一點很明確,不是。來看下面的流程圖:

13、更新日誌

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進行網路請求。

14、尾聲

禁止申請專利!

還有,感謝支援!

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

star