[技術博客] 前端相關

時間 2019-12-06

標籤技術博客前端相關简体版

原文原文鏈接

模版引擎原理

模版引擎是爲了讓數據與界面相互分離而出現的工具，使用模版引擎進行開發，可以提升相應的開發效率，同時對代碼複用率的提高效果也很是顯著。通常來講，模版引擎有本身相應的標記語言。模版引擎會解析相應的標記語言，而後將數據渲染進生成的html頁面之中。css

模版文件 + 渲染的數據 = 最終頁面內容html

thymeleaf模版引擎實例

在咱們的項目迭代中，前端代碼所採用的模版引擎就是themyleaf,themyleaf是一個開源的java模版引擎庫。
themyleaf相對於其餘模版引擎的區別在於，themyleaf基於相關xml標籤和屬性去定義模版的處理邏輯，而不是直接在模版中編輯相關的代碼。
由於themyleaf的上述優點，因此themyleaf的文本文件自己也是格式良好的html文件，而且能夠直接被瀏覽器打開進行相關內容的瀏覽。

thymeleaf在phyweb項目中的應用實例

幫助後端同窗和新加入的同窗熟悉項目中相關內容的使用。
首先項目前端的總體結構爲

-resources
--static
----css
----js
----script
----......
--templates
----*.html

從上述代碼結構中能夠看出，前端模塊中，主要將相關的代碼文件存放在static和templates文件中。
templates文件夾中存放的爲相關的前端內容頁面，而static文件夾中存放的是相關的css和js文件，以及alpha階段迭代的物理實驗腳本內容。
通常開發新的前端頁面之時，能夠在templates的html中寫好相應的模版內容，而後再與後端的同窗對接相應的接口，將後端獲取的數據再渲染到相應的html模版文件之中。
thymeleaf獲取數據實例

<div class="profile-info-value">
    <span th:text="${user.getSex() != null} ? ${user.getSex().getValue()} : '暫未設置'">Sex</span>
</div>

<!-- 該段內容爲user-center頁面中的相關內容，從後端獲取到user對象後，經過調用user對象的方法，判斷若是不爲null，則顯示user.getSex().getValue()的內容，不然則會顯示暫未設置的內容 -->

<tbody>
    <tr th:each="rept : ${reportTemplates}">
        <td class="center aligned" th:text="${rept.getExperiment_id()}">Experiment ID</td>
        <td class="center aligned" th:text="${rept.getExperiment_name()}">Experiment Name</td>
        <td class="center aligned">
            <div class="ui buttons mini" th:id="${'experiment-data-' + rept.getExperiment_id()}" th:attr="
                    data-prepare-pdf=${rept.getPrepare_link()}, 
                    data-experiment-id=${rept.getExperiment_id()},
                    data-db-id=${rept.getId()}">
                <button class="ui green basic button btn-view-pdf" style="padding: .45em .8em">查看文檔</button>
                <button class="ui blue basic button btn-input-data" style="padding: .45em .8em">錄入數據</button>
                <button class="ui red basic button disabled btn-gen-report" style="padding: .45em .8em">生成報告</button>
            </div>
        </td>
    </tr>
</tbody>

<!-- 該段代碼在thymeleaf中屬於相應的循環標記，後端傳入的reportTemplates屬於相應的Collections類，經過thymeleaf的each標記語句能夠對集合類的內容進行遍歷，經過該段代碼能夠生成全部實驗報告操做欄和展現欄。 -->

phyweb在原有的基礎上，如何開發新頁面：

首先，由於咱們的前端頁面基本都有相同的頁腳與導航欄等相關內容，經過themyleaf將導航欄與頁腳提取出來，抽象成了base.html的內容。
base.html中的內容主要爲頁面導航欄與頁腳的相關內容，在開發其他頁面之時，能夠不用進行重寫。開發新頁面之時，只要在新頁面進行相應的導入便可。導入方式爲

<!-- 在html開頭聲明時，加入layout:decorator="base"來導入相應的base頁面 -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="base">

在寫頁面中的具體內容之時，能夠經過在新頁面中重寫base.html文件的相應模塊的到相關內容,具體操做爲：

<!-- 重寫該塊相關內容來進行展現 -->
<th:block layout:fragment="content">
    ....
    .....
    .....
    ....
</th:block>

寫好以後，新的前端頁面就此產生了。同時要查看相應效果的話，並非很推薦用瀏覽器直接查看相關html頁面，最好可以在後臺起一個相關的控制器，而後訪問相應的路徑，本身進行測試頁面的展現效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。