今天給各位分享前端模板引擎和后端模板引擎的知識，其中也會對前端模板引擎themfly進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、04《Spring Boot 入門教程》使用模板引擎開發(fā) Web 項(xiàng)目
• 2、前端工作流節(jié)點(diǎn)的使用技巧
• 3、前端模板引擎與各種流行框架之間有什么區(qū)別？
• 4、web后端和前端是怎么連接的

04《Spring Boot 入門教程》使用模板引擎開發(fā) Web 項(xiàng)目

模板引擎這個(gè)詞，咋聽起來，有點(diǎn)高大上的意味。

實(shí)際上，模板引擎是非常平易近人的技術(shù)。譬如大家可能都比較熟悉的 JSP ，就是一種比較典型的模板引擎。

當(dāng)瀏覽器將請求拋給控制器，控制器處理好數(shù)據(jù)后，就跳轉(zhuǎn) JSP 等模板引擎頁面。注意在跳轉(zhuǎn)的同時(shí)，還會將數(shù)據(jù)組裝好，也交給模板引擎處理。

模板引擎會根據(jù)數(shù)據(jù)，和模板引擎的規(guī)則，動(dòng)態(tài)生成 HTML 頁面，最后返回給瀏覽器顯示。

我們使用 Spring Boot 開發(fā) Web 項(xiàng)目，大體上有兩種方式。

第一種方式，是后端服務(wù)化的方式，也是當(dāng)前的主流方式。前端是靜態(tài)的 HTML 頁面，通過 Ajax 請求 Spring Boot 的后端接口。 Spring Boot 返回?cái)?shù)據(jù)一般采用 JSON 格式，前端接收后將數(shù)據(jù)顯示。

第二種方式，是采取模板引擎的方式。前端的請求，到達(dá) Spring Boot 的控制器后，控制器處理請求，然后將返回?cái)?shù)據(jù)交給模板引擎。模板引擎負(fù)責(zé)根據(jù)數(shù)據(jù)生成 HTML 頁面，最后將 HTML 返回給瀏覽器。

我個(gè)人比較推薦第一種方式，說一下該方式的幾個(gè)優(yōu)點(diǎn)：

本篇是講模板引擎，也得說說模板引擎的優(yōu)點(diǎn)，王婆賣瓜不能光夸草莓啊。模板引擎開發(fā)的頁面，對搜索引擎 SEO 比較友好；還有就是簡單的頁面，如果用模板引擎開發(fā)速度比較快，畢竟模板化的方法，目的就是減少重復(fù)提高效率。

Spring Boot 支持的模板引擎種類很多，常見的有 FreeMarker 、 Thymeleaf 、 JSP 。

因?yàn)檫@些模板引擎使用的用戶都不少，所以我們逐一介紹下其實(shí)現(xiàn)過程。

至于孰優(yōu)孰劣，請各位看官自行評價(jià)。正所謂：尺有所短，寸有所長，各取所愛，萬物生長！

本篇我們開發(fā)一個(gè)商品瀏覽項(xiàng)目實(shí)例。

此處說一個(gè)我個(gè)人的經(jīng)驗(yàn)：在做一個(gè)項(xiàng)目或一個(gè)模塊的時(shí)候，不要一開始就動(dòng)手寫代碼，最好是謀定而后動(dòng)。

我們作為程序員，實(shí)際上是整個(gè)程序世界的總指揮。應(yīng)該先整體規(guī)劃，再實(shí)現(xiàn)局部。這種總分型的開發(fā)方法便于我們理順?biāo)悸?，提高編碼效率！

好的，我們來思考下，實(shí)現(xiàn)商品瀏覽項(xiàng)目實(shí)例的整體流程：

整體流程

可以看到，我們是先建立了控制器方法和頁面，再去實(shí)現(xiàn)其中的具體細(xì)節(jié)。這樣可以讓我們的思維保持連貫性和整體性，在做一些頁面和方法較多的項(xiàng)目時(shí)，會感覺更加順暢。

我們按整體流程，使用 FreeMarker 模板引擎，來實(shí)現(xiàn)商品瀏覽功能。

使用 Spring Initializr 創(chuàng)建項(xiàng)目，Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-freemarker ，生成項(xiàng)目后導(dǎo)入 Eclipse 開發(fā)環(huán)境。

引入 Web 項(xiàng)目及 FreeMarker 模板相關(guān)的依賴項(xiàng)，代碼如下：

實(shí)例：

創(chuàng)建控制器類，由于是商品相關(guān)的控制器，所以命名為 GoodsController ，代碼如下：

實(shí)例：

我們具體解釋下該類的作用。

我們 resource/templates 目錄下新建商品頁面 goods.ftl ，先不必實(shí)現(xiàn)具體功能，代碼如下：

實(shí)例：

此時(shí)我們啟動(dòng)項(xiàng)目，然后訪問 ，即可顯示對應(yīng)頁面內(nèi)容。

定義商品類 GoodsDo 用來描述商品信息，注意 Do 表示數(shù)據(jù)模型對象（Data Object），代碼如下：

實(shí)例：

然后我們編寫服務(wù)類 GoodsService ，提供獲取商品列表的方法。注意此處僅僅是演示模板引擎，并不需要訪問數(shù)據(jù)庫，直接返回一個(gè)指定內(nèi)容的商品列表。

實(shí)例：

此時(shí)，我們的控制器就可以注入 GoodsService 類型的組件，然后調(diào)用其方法了。

實(shí)例：

注意 model.addAttribute("goodsList", goodsService.getGoodsList()); ，我們將商品列表相關(guān)的數(shù)據(jù)交給模板引擎去處理。

此時(shí)我們可以根據(jù) FreeMarker 模板引擎，按模板規(guī)則顯示商品信息了。

實(shí)例：

注意我們通過 FreeMarker 的模板語法，輸出了商品列表信息。關(guān)于 FreeMarker 模板引擎更多的語法規(guī)則，感興趣的同學(xué)可以后續(xù)查閱更多資料。

啟動(dòng)項(xiàng)目，打開瀏覽器訪問 ，即可查看輸出結(jié)果。

Thymeleaf 和 FreeMarker ，都是模板引擎，使用方法基本類似。此處我們僅僅是給出一個(gè)范例，不再做過多的解釋。

使用 Spring Initializr 創(chuàng)建項(xiàng)目， Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-thymeleaf ，生成項(xiàng)目后導(dǎo)入 Eclipse 開發(fā)環(huán)境。

引入 Web 項(xiàng)目及 Thymeleaf 模板相關(guān)的依賴項(xiàng)。

實(shí)例：

創(chuàng)建控制器類， GoodsController ， Thymeleaf 直接使用 HTML 作為模板頁面，故代碼如下：

實(shí)例：

我們在 resource/templates 目錄下新建商品頁面 goods.html ，先不必實(shí)現(xiàn)具體功能，代碼如下：

實(shí)例：

此時(shí)我們啟動(dòng)項(xiàng)目，然后訪問 ，即可顯示對應(yīng)頁面內(nèi)容。

商品類 GoodsDo ，服務(wù)類 GoodsService ，這兩個(gè)類與上面沒有區(qū)別直接放出代碼。

實(shí)例：

實(shí)例：

好的，此時(shí)我們的控制器就可以注入 GoodsService 類型的組件，然后調(diào)用其方法了。

實(shí)例：

此時(shí)我們可以根據(jù) Thymeleaf 模板引擎，按模板規(guī)則顯示商品信息了。

實(shí)例：

注意我們通過 Thymeleaf 的模板語法，輸出了商品列表信息。關(guān)于 Thymeleaf 模板引擎更多的語法規(guī)則，感興趣的同學(xué)可以后續(xù)查閱更多資料。

啟動(dòng)項(xiàng)目，打開瀏覽器訪問 ，即可查看輸出結(jié)果。

到此，大家基本上也能發(fā)現(xiàn)，這兩種方式除了模板頁面文件內(nèi)容不同，其他地方基本都是一模一樣的。

也就是說，模板引擎主要負(fù)責(zé)通過一些模板標(biāo)簽，將控制器返回的數(shù)據(jù)解析為網(wǎng)頁。

注意 Spring Boot 官方已經(jīng)不推薦使用 JSP 了，確實(shí)操作起來也比較麻煩。但是由于 JSP 用戶體量還是比較大的，所以此處還是簡單演示下，開發(fā)步驟與 FreeMarker / Thymeleaf 基本一致。

使用 Spring Initializr 創(chuàng)建項(xiàng)目， Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-jsp ，生成項(xiàng)目后導(dǎo)入 Eclipse 開發(fā)環(huán)境。

引入 Web 項(xiàng)目及 JSP 模板相關(guān)的依賴項(xiàng)。

實(shí)例：

創(chuàng)建控制器類， GoodsController ，代碼如下：

實(shí)例：

手工添加 src/main/webapp 及子目錄如下，同時(shí)目錄下放一個(gè) goods.jsp 用于測試。注意該目錄是一個(gè) Source Folder 源代碼目錄，不是普通文件夾目錄。

spring-boot-jsp 項(xiàng)目結(jié)構(gòu)

實(shí)例：

注意，我們還需要添加一個(gè)視圖解析器，實(shí)現(xiàn) JSP 頁面往指定目錄跳轉(zhuǎn)。

實(shí)例：

此時(shí)我們啟動(dòng)項(xiàng)目，然后訪問 ，即可顯示對應(yīng)頁面內(nèi)容。

商品類 GoodsDo ，服務(wù)類 GoodsService ，這兩個(gè)類與上面沒有區(qū)別直接放出代碼。

實(shí)例：

實(shí)例：

好的，此時(shí)我們的控制器就可以注入 GoodsService 類型的組件，然后調(diào)用其方法了。

實(shí)例：

此時(shí)我們可以根據(jù) JSP 模板引擎，按模板規(guī)則顯示商品信息了。

實(shí)例：

注意我們通過 JSP 的模板語法，輸出了商品列表信息。關(guān)于 JSP 模板引擎更多的語法規(guī)則，感興趣的同學(xué)可以后續(xù)查閱更多資料。

啟動(dòng)項(xiàng)目，打開瀏覽器訪問 ，即可查看輸出結(jié)果。

最后大家應(yīng)該也發(fā)現(xiàn)了， FreeMarker 和 Thymeleaf 的用法幾乎是一模一樣的，而 JSP 還需要手工添加一些目錄和配置。

三種方式各有優(yōu)劣， FreeMarker 模板語法比較簡潔， Thymeleaf 可以直接使用 HTML 作為模板文件， JSP 用戶群體廣泛。

但是三種方式，都是一種模板引擎而已，將控制器返回?cái)?shù)據(jù)轉(zhuǎn)化為 HTML 頁面顯示，本質(zhì)上沒啥區(qū)別，大家對模板引擎有一個(gè)了解即可。

前端工作流節(jié)點(diǎn)的使用技巧

一般網(wǎng)站往往架構(gòu)在后端MVC框架中，由后端程序猿做主導(dǎo)，所以：

1、前端程序猿要對后端MVC框架有基本的了解，尤其是MVC中的V。

2、懂得V之后，就要掌握模板引擎的規(guī)則。前端模板引擎跟后端模板引擎很相似，做一些字符替換就可以將前端引擎的代碼段改成后端引擎的。

我在參考了一些簡單項(xiàng)目的前端工作流之后，搞了這么一個(gè)簡單的前端工作流。

1、保證工作目錄、開發(fā)目錄和上線目錄的內(nèi)容盡可能的簡單。因?yàn)閔tml/tpl/js/css是最常編輯的文件，而內(nèi)容圖片、API很少修改，庫、字體更是不會修改，所以都應(yīng)該擇出來。

2、img文件夾內(nèi)存放內(nèi)容圖片，它不用編輯，所以擇出來。但是注意，它需要一個(gè)監(jiān)視器來監(jiān)視文件的添加，一旦有添加，就自動(dòng)壓縮體積，然后覆蓋源圖。

3、libs文件夾的定位是：存放js庫和css庫以及字體庫。

4、api文件夾的定位是：開發(fā)的時(shí)候使用，上線不用，所以單獨(dú)存放。

5、media文件夾：存放視頻和音頻。如果你確定你的項(xiàng)目絕沒有可能用到音頻和視頻，那么這個(gè)文件夾可以取消。

前端模板引擎與各種流行框架之間有什么區(qū)別？

我覺得現(xiàn)在的前端模塊已情已流行的框架之間還是有一定的聯(lián)系的不過現(xiàn)在框架這種東西因?yàn)楸容^好用吧可以套用所以還是流行框架簡單點(diǎn)

web后端和前端是怎么連接的

web后端和前端是怎么連接的

WEB后端和WEB前端可以通過 前端模板引擎 與 后端模板引擎 進(jìn)行連接。

后端模板引擎： WEB前端開發(fā)人員開發(fā)好前端靜態(tài)頁面，然后交給WEB后端開發(fā)人員，他們再利用后端引擎模板（比如：freemarker）把前端頁面與后端數(shù)據(jù)進(jìn)行連接，形參一個(gè)動(dòng)態(tài)頁面。

前端模板引擎：

描述成前端模板引擎可能不太對，但是比較好理解吧。當(dāng)前比較流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自帶了前端模板引擎。

WEB前端人員與WEB后端人員一起協(xié)定好數(shù)據(jù)接口格式（請求地址、數(shù)據(jù)格式、數(shù)據(jù)字段等），然后WEB前端人員與WEB后端人員同時(shí)進(jìn)行項(xiàng)目的開發(fā)，WEB前端人員通過AJAX的方式從WEB后端獲取到前端頁面的相關(guān)JSON數(shù)據(jù)，然后通過MVVM前端框架把JSON數(shù)據(jù)渲染到頁面里面，最終形成了一個(gè)動(dòng)態(tài)頁面。

網(wǎng)站數(shù)據(jù)處理主要分為三層。

第一，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來實(shí)現(xiàn)等。通過前端代碼可以實(shí)現(xiàn)網(wǎng)頁的布局和設(shè)計(jì)。這層又可以稱為顯示層。也就是你用瀏覽器打開能看到的網(wǎng)頁。

第二層，是業(yè)務(wù)層，這層是負(fù)責(zé)處理數(shù)據(jù)的。常用的代碼語言有PHP,JSP，Java等。通過這些后臺處理語言的算法來處理前臺傳回的數(shù)據(jù)。必要的時(shí)候進(jìn)行操作數(shù)據(jù)庫，然后把結(jié)果返回給前端網(wǎng)頁。

第三層，是數(shù)據(jù)層，這個(gè)就是數(shù)據(jù)庫，用來存儲數(shù)據(jù)的。通過業(yè)務(wù)層的操作可以實(shí)現(xiàn)增刪改數(shù)據(jù)庫的操作。

舉個(gè)例子就是這樣，比方說你在網(wǎng)頁上填一個(gè)表格然后提交會有以下幾種數(shù)據(jù)傳輸經(jīng)過：

①你接觸到的是這個(gè)網(wǎng)頁是屬于表示層，這個(gè)網(wǎng)頁一般由HTML標(biāo)簽結(jié)合CSS/JAVASCRIPT來實(shí)現(xiàn)的。 這時(shí)候你要先填入數(shù)據(jù)。

②然后你按提交觸發(fā)后臺處理機(jī)制，這時(shí)候數(shù)據(jù)會傳到后臺的代碼進(jìn)行處理。這部分代碼根據(jù)不同網(wǎng)站可以使PHP,JSP，JAVA等。 代碼根據(jù)程序員預(yù)設(shè)的算法將收到的數(shù)據(jù)進(jìn)行處理之后會相應(yīng)的對數(shù)據(jù)庫進(jìn)行操作，存儲數(shù)據(jù)等。

③成功操作完數(shù)據(jù)庫之后，業(yè)務(wù)層的代碼會再向表示層也就是顯示器端傳回一個(gè)指令通知你表格填寫成功。

這就是基本的網(wǎng)站數(shù)據(jù)交換邏輯了

后端會暴露出一個(gè)處理數(shù)據(jù)邏輯的接口（api）,然后哦前端通過js像后端暴露的api發(fā)起請求過程可攜帶參數(shù)，然后后端接到請求后會返回?cái)?shù)據(jù)給前端，前端拿到數(shù)據(jù)后會渲染在頁面上

治安監(jiān)控的前端是怎么連接的？

固定攝像機(jī)前端有和電源（220V轉(zhuǎn)12V）全方位像像機(jī)前端一根視頻線（和主機(jī)采集卡連接）一根電源線220V（連接解碼器）一根通訊線（連接主機(jī)上的碼轉(zhuǎn)）

后端thinkphp和前端vue怎么協(xié)調(diào)

hinkphp作為服務(wù)端，為客戶端提供數(shù)據(jù)。而Vue是客戶端的一個(gè)JavaScript框架。便于我們對頁面進(jìn)行處理。

一般情況下，vue通過異步請求來獲取數(shù)據(jù)。由于實(shí)例化vue時(shí)已經(jīng)將相關(guān)的變量、模板等定義好了。

當(dāng)獲取到thinkphp回傳的數(shù)據(jù)后，將會自動(dòng)的把數(shù)據(jù)對應(yīng)的呈現(xiàn)在網(wǎng)頁上。

php在web開發(fā)中技術(shù)含量排第三(jsp,.在前),但由于php簡單,開發(fā)周期短,運(yùn)行速度快,很快就成為中小型網(wǎng)站的首選技術(shù),像CMS全球超過70%都是php的.再說大型網(wǎng)站現(xiàn)在也很少,所以,學(xué)習(xí)php找工作要容易得多,自己想接私單也容易拿下!

就是這樣的，我剛剛在后盾人知道的那邊有詳細(xì)的教學(xué)視頻.，可以給你學(xué)習(xí)

thinkphp作為服務(wù)端，為客戶端提供數(shù)據(jù)。而Vue是客戶端的一個(gè)JavaScript框架。便于我們對頁面進(jìn)行處理。

一般情況下，vue通過異步請求來獲取數(shù)據(jù)。由于實(shí)例化vue時(shí)已經(jīng)將相關(guān)的變量、模板等定義好了。

當(dāng)獲取到thinkphp回傳的數(shù)據(jù)后，將會自動(dòng)的把數(shù)據(jù)對應(yīng)的呈現(xiàn)在網(wǎng)頁上。 你看過后很簡單吧以后不會可以向我一樣經(jīng)常到后盾人找找相關(guān)教材看看就會了，希望能幫到你，給個(gè)采納吧謝謝(? ???ω??? ?)

thinkphp 設(shè)計(jì)服務(wù)端，全restful api的規(guī)范就行設(shè)計(jì)（其實(shí)只要返回json或xml就可以），

vue-resouve只是一個(gè)請求庫，和jquery 的 ajax 是大同小異的

關(guān)于前端模板引擎和后端模板引擎和前端模板引擎themfly的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。