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

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

part 日誌格式 roi 提升 簡潔 輕量 table 定義 發出

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。

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

5、優勢

  1. 啟動快!

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

    優先讀取各種文件的緩存,使用EhCache實現。

    對於後端接口,使用加權負載均衡。

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

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

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

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

6、引擎

Jerry 使用 FreeMark 作為模板引擎。也就是說,原來需要後端工程師使用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。

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

後臺監控頁面預覽:

技術分享圖片

監控系統運行流程:

技術分享圖片

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群交流。

我的博客:https://yueshutong.cnblogs.com/

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

Gitee:https://gitee.com/zyzpp/JerryServer

開源中國:https://www.oschina.net/p/jerryserver

技術分享圖片

技術分享圖片

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