一步步從後端渲染到前後端分離經驗分享(1)

2021-08-22 07:25:10 字數 1615 閱讀 4163

後端採用jsp,freemarker,jdea,babel等渲染框架對前端模板進行預編譯。

假設有這麼一組資料你想展示在介面上:

name

mrxu

mrxu0

mrxu1

class="font">姓名:$div>

#list>

以上採取的是freemarker語法進行的html預編譯,編譯的結果如下:

class="font">姓名:mrxudiv>

class="font">姓名:mrxu1div>

class="font">姓名:mrxu2div>

在沒有vue,react,angular的年代(此處指代任何的前端渲染框架),不借助後端渲染工具你想介面上根據資料實現介面效果你需要多少步驟:

var model +="" +list[i].name + "

"

現在大部分人應該都沒感受過拼接字串的恐懼。

像很多非網際網路公司,技術並不是第一生產力,做專案還是比較保守的,不可能快速迭代技術。一切以「穩」字為主。如果沒有巨大的**是不會迭代技術的,畢竟像jquery,十幾年的沉澱,幾乎滿足各種要求,非常穩定。

那麼這個巨大的**是什麼呢?看我慢慢分析。

以上的開發速度是基於我自己的公司現狀分析的,上面的第三種模式開發速度3其實是最快的,其次是2最後是1,現在之所以慢是因為公司目前缺少符合這方面的人才。我雖然技術方面沒有問題,對相關的技術站早已經學會了,但是沒有實操經驗。在時間充足的情況下我還挺有把握的,但是專案工期是在太緊張了,我可不想閒著沒事就加班到凌晨4,5點的。最後我從延長時間,減少需求,新增人員三方面著手。希望能夠給與支援。不過沒有一方面能夠滿足我的,所以只能夠採取折中的辦法,使用了方案二,先把首版推上去。推上去之後再進行一次大的重構,從而徹底實現前後端分離。

目前比較火的前端渲染框架主要是angular,react,vue。我選擇了比較輕量級的vue,原因主要出於以下幾點:

- 1.簡單易學,angular目前使用的是ts開發這使得學習成本提高,react官網對中文支援很差,vue是中國人搞的,所以中文翻譯挺棒的,而且主要用於web開發。

- 2.支援不打包只引入資源即可跑專案,適合目前的方案

介面布局採用rem布局,原因如下:

- 1.可以跟設計圖同尺寸作圖,很方便

- 2.公司一直採用這種方式,已經習慣了這個套路。

不過也帶來了很多麻煩,這裡先賣個關子,後面再說。

資料請求axios:

- 1.採用了promise的方式,相當於對現在的ajax的乙個擴充套件

- 2.擁有鉤子機制,可以監控攔截請求前,請求後狀態。

mintui:

- 1.這是我接觸的第乙個整合自vue的ui框架

- 2.能夠支援一次性載入和分開載入

- 3.教程中文,上手簡單

- 4.由餓了麼團隊開發,大廠家莫名的細分

所以選擇這個有些任性,嘿嘿。以上的選擇也是為了後期進行完整的分離方案設計的,能夠最簡化工作量的移植。

採用vue的全家桶進行spa模式開發,獲得更好的使用者體驗。

教你一步步封裝 Vue 元件並發布到 npm

在開發專案過程中,通常會用到很多功能和設計相類似的元件,為了避免重複造輪子,我們經常會用到一些第三方元件,比如 vux,vant。但是這樣會引入太多沒用到的元件,造成打包體積過大。所以我們有必要封裝一些基礎的元件用於開發。下面我為大家介紹如何封裝vue的toast和dialog元件並上傳到npm。掘...

從抖音到奶頭樂,它是如何一步步毀掉我們的?

文自 行業研究報告 id report88 當你玩著王者榮耀,吃著雞,刷著朋友圈,看著抖音的時候,背後有成千上萬的人正在費盡心思讓這些產品更具有粘性,他們的目的就是乙個 毀掉你的自律。只要毀掉你的自律,你就把自己的生命獻給了這些東西,當然你也會心甘情願奉上你的金錢。嗑瓜子 理論 因為,一粒瓜子,從你...

物聯網發展歷程,一步步從概念走向了成熟

出門在外,忽然忘記自己是否關閉了房屋的門鎖,對於許多有些許強迫症的人而言,在這種情況下若是不回去確認一下,一天的心神都不會安寧。而這時,簡單的拿出自己的手機,檢視自己家智慧型門鎖的相關資訊,就能很明確的知道門窗是否已經緊鎖,這種場景只不過是目前物聯網中乙個微小的縮影。我們總是喜歡圍繞著物聯網侃侃而談...