はじめに Spring Boot学習中の者です。学習のためにアプリケーションを作成していて、無限スクロールを実装する上で考えたことや躓いたポイントをまとめました。 今回はユーザの投稿を検索するページを例とさせていただきます。 参考文献 使用技術 Spring Boot 2.5.6 Spring Security Thymeleaf Mybatis 2.2.0 Vue.js Axios IntersectionObserver 本当はvue-infinite-loadingを使用した無限スクロールを実現したかったのですが、作成したVueコンポーネントが読み込めず、解決に時間を要すると判断したため別の方法での実装となりました。 余力があれば、vue-infinite-loadingを使用した方法でも記事を書きたいと思います。 実装に際して考えたこと 「ページの下まで移動したら都度コンテンツを読
Java+Springboot+thymeleaf ■概要 1.SpringフレームワークでModelインターフェースで受けた値(フィールド)を HTML(ビュー)側に簡易実装するための仕組み(テンプレートエンジン) ■準備(宣言) htmlタグに以下を記述する //urlは特に意味はなくuri(一意)であることを示しているだけ ※これをしなくても動作はするが、STSで認識されないので宣言をしていく ※xmlnsはxml name spaceの略 ■留意事項 ・thymeleafは入出力を担当するテンプレートツール。 ・基本的にはif分岐やリスト操作など、論理演算は内部で済ませ、必要なモノは加工済みの状態で用意しておく。 ・viewから送ることができる値はStringのみ。例えば以下のようにオブジェクトを送ろうとしても、Stringとして扱われるため受け取ることができない。 <input
30 July 2023: Thymeleaf 3.1.2.RELEASE has been published. See what's new in Thymeleaf 3.1 and how to migrate. Thymeleaf is a modern server-side Java template engine for both web and standalone environments. Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stro
@の後ろにBean名をつけることで、そのBeanにアクセスすることができます。 *ThymeleafでSpringのpropertyファイル(application.propertiesなど)に記述している変数を利用したい場合 ${@environment.getProperty('property.key')} *環境ごとに表示を変更したい場合 <div th:if=${@environment.acceptsProfiles('production')}> This is the production profile </div> or <div th:if="${#arrays.contains(@environment.getActiveProfiles(),'production')}"> This is the production profile </div> という形で利用
Thymeleaf とは 読み方は「タイムリーフ」 テンプレートエンジンの1つ Spring Boot で使用が推奨されている 純粋な HTML としてテンプレートを記述することができる 動作環境 Spring Boot 上で Spring MVC のビューテンプレートエンジンとして動かすことを前提で調べる。 Hello World buildscript { repositories { mavenCentral() } dependencies { classpath 'org.springframework.boot:spring-boot-gradle-plugin:1.5.6.RELEASE' } } apply plugin: 'java' apply plugin: 'org.springframework.boot' sourceCompatibility = '1.8'
5.6 任意の属性に値を設定(デフォルト属性プロセッサー) Thymeleafにはデフォルト属性プロセッサーがあり、どんな属性の値でも設定できます。その属性がスタンダードダイアレクトのth:*プロセッサーに定義されていなくても大丈夫なのです。 こんな風に書くと: <span th:whatever="${user.name}">...</span> このような結果になります: <span whatever="John Apricot">...</span> 5.7 HTML5フレンドリーな属性や要素名のサポート よりHTML5フレンドリーな書き方もできます。これは全く異なる構文になります。 <table> <tr data-th-each="user : ${users}"> <td data-th-text="${user.login}">...</td> <td data-th-tex
概要 2015年に投稿したThymeleafを使用した入力フォームのサンプルコードという記事の改定版です。 Spring Bootが標準サポートするテンプレートエンジンのThymeleafを使用した入力フォームのサンプルコードになります。 ソースコードはrubytomato/demo-bootstrap4-thymeleaf-spring2にあります。 環境 Windows 10 professional Java 1.8.0_162 Thymeleaf 3.0.9 Spring Boot 2.0.1 Bootstrap 4.1 参考 Tutorial: Using Thymeleaf Tutorial: Thymeleaf + Spring Thymeleaf - GitHub Introduction Bootstrap Components Utilities サンプルコード 入力画
はじめに Thymeleafで、バカの一つ覚えみたいにただただth:fieldを多用していたのですが、最近その理解レベルから脱却できたような気がするので、その内容についてまとめたいと思います。 概要としては、Spring Frameworkで値の受け渡しを担っているFormクラスにフォーカスした話になります。最終的にはFormクラスを一切使わないで値の受け渡しを行います。 狙いは以下の通りです。 Spring Frameworkの値の受け渡しの仕組みを知る。 Spring Frameworkの実装をより柔軟に考えられるようになる。 理解の仕方の話なので、あんまり実用的ではないです。 前提 Spring Frameworkで作成されたWebプロジェクトが必要です。 テンプレートエンジンはThymeleafを前提とした話になります。 一般的な実装 まずはFormを利用した一般的な実装を考えてみ
i18nと呼ばれる多言語化の対応を行います。 今回はsrc/main/resourcesの配下にi18nフォルダを作成し、その中に翻訳ファイルを配置します。 SpringBootへ設定 SringBootはデフォルト設定で、src/main/resourcesの配下にあるmessages.propertiesファイルを見ます。 そのため、翻訳ファイルの配置先をapplication.ymlに設定します。 翻訳ファイルの配置 先ほど設定したフォルダに翻訳ファイルを配置します。 翻訳ファイルはmessages_言語.propertiesです。 例) messages_ja.properties この時、対象の言語ファイルがない場合用にデフォルト( messages.properties )を配置する必要があります。 画面へ設定 翻訳ファイルのプロパティ値を画面へ埋め込みます。 以下のように埋め
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く