當前位置:首頁 » 網頁前端 » springboot前端
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

springboot前端

發布時間: 2023-03-05 17:32:24

① Spring Boot 前端請求參數自動映射到枚舉,後端響應JSON數據自動解析枚舉

1. 表單請求方式
請求URL: http://xxx.xxx.com/form?type=1
方法form()接收到請求參數為Type[code="1", desc="類型1"]枚舉對象
響應數據:{"testId": 1,"testName": "test1","type": {"code": "1","desc": "類型1"}}

2.JSON請求方式
請求URL: http://xxx.xxx.com/json
請求參數:{"type":"TYPE_1"}
方法json()接收到請求參數為Type[code="1", desc="類型1"]枚舉對象
響應數據:{"testId": 1,"testName": "test1","type": {"code": "1","desc": "類型1"}}

注意:這種比較特殊,沒有特殊配置,參數值需要是枚舉名稱,如果參數值是1,會根據枚舉類的ordinal屬性來關聯,原因應該是解析json用的是jackson,用不到spring的Formatter和Converter之類的機制。
有解決方案的朋友歡迎留言~~ (❤ ω ❤)

② 「SpringBoot實戰」視圖技術-Thymeleaf

在一個Web應用中,通常會採用MVC設計模式實現對應的模型、視圖和控制器,其中,視圖是用戶看到並與之交互的界面。對最初的Web應用來說,視圖是由HTML元素組成的靜態界面;而後期的Web應用更傾向於使用動態模板技術,從而實現前後端分離和頁面的動態數據展示。Spring Boot框架為簡化項目的整體開發,提供了一些視圖技術支持,並主要推薦整合模板引擎技術實現前端頁面的動態化內容。本文對SpringBoot常用的Thymeleaf進行整合。

Thymeleaf是一種現代的基於伺服器端的Java模板引擎技術,也是一個優秀的面向Java的XML、XHTML、HTML5頁面模板,它具有豐富的標簽語言、函數和表達式,在使用Spring Boot框架進行頁面設計時,一般會選擇 Thymeleaf模板。我們在這里學習Thymeleaf 常用的標簽、表達式。

Thymeleaf標簽

使用標簽只需要加上一個命名空間就可以了。 即修改原html的第二行就可以了。

變數表達式${..}主要用於獲取上下文中的變數值,示例代碼如下。

這是標題

- 使用了Thymeleaf模板的變數表達式${..}用來動態獲取p標簽中的內容 - 如果當前程序沒有啟動或者當前上下文中不存在title變數,該片段會顯示標簽默認值「這是標題」; - 如果當前上下文中存在title 變數並且程序已經啟動,當前p標簽中的默認文本內容將會被tite變數的值所替換,從而達到模板引擎頁面數據動態替換的效果。

Thymeleaf為變數所在域提供了一些內置對象

結合上述內置對象的說明,假設要在Thymeleaf模板擎頁面中動態獲取當前國家信息,可以使用#locale內置對象

選擇交量表達式和變數表達式用法類似,一般用於從被選定對象而不是上下文中獲取屬性值,如果沒有選定對象,則和變數表達式一樣,示例代碼如下。

消息表達式#{..}主要用於Thymeleaf模板頁面國際化內容的動態替換和展示。使用消息表這式#{..}進行國際化設置時,還需要提供一些國際化配置文件。關於消息表達式的使用,下文寫國際化時會詳細說明。

鏈接表達式@{..}一般用於頁面跳轉或者資源的引入,在Web開發中占據著非常重要的地位,並且使用也非常頻繁。

片段表達式~{..}是一種用來將標記片段移動到模板中的方法。其中,最常見的用法是使用th:insert或th:replace 屬性插入片段

Spring Boot默認設置了靜態資源的訪問路徑,默認將/**所有訪問映射到以下目錄。

我們創建一個springboot項目用於本次實驗。項目名為springboot_01_thyme。java8,springboot2.6.6

創建一個LoginController類用於數據替換效果測試。

我們寫一個login.html進行測試。我們導入一個bootstrap的樣式到static/login裡面,並且自己定義一些css。

最後我們通過訪問http://localhost:8080/toLoginPage 可以查看效果

在resources目錄下創建名為i18n的文件夾,數一數這個單詞多少個字母internationalization,就知道為什麼叫i18n了。
然後我們在i18n文件夾下面創建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。
目錄結構:這個Resource Bundle 'login'時idea自動創建的,我們不需要管,只需要完成我們的就行。

login.properties

login_zh_CN.properties

login_en_US.properties

然後我們在配置文件application.properties裡面添加代碼

我們在config包下面創建一個MyLocalResovel類,自定義國際化功能區域信息解析器。

這里我們基本就完成了,但是在訪問中文的時候會出現亂碼現象。

我們打開idea的file->settings->file Encodings.
將Default encoding for properties的編碼改為utf-8,同時勾選Transparentnative-to-ascii conversion

然後我們重新編寫login.properties和其他相關的

但是這種方法1隻對當前項目有效。下次創建還是使用GBK編碼

本文我們主要了解了Thymeleaf的基本語法、標簽、表達式、基本使用、同時還實現了頁面登錄頁得國際化。

本文作者:hjk-airl

本文鏈接:https://www.cnblogs.com/hjk-airl/p/16181598.html

③ 後端使用springboot+tio-http-server,前端使用element-ui+websocket,如何解決跨域問題後端已支持跨域

最便捷的還是使用nginx反向代理吧。

例如,假設後端的ip和埠號為:192.168.111.222:8080,前端的ip和埠號為:192.168.111.222:8001,此時前後端埠不一致導致跨域。

部署一個ngnix,修改ngnix安裝目錄下的/config/nginx.conf文件,剛安裝的ngnix的配置文件里默認應該為:

配置好ngnix後,你前端工程里訪問後端介面時,只需要將請求url修改為http://192.168.111.222:8001/api/即可。

例如你原來的登錄後端介面可能是訪問http://192.168.111.222:8080/login,你要修改為訪問http://192.168.111.222:8001/api/login