Spring Boot Ajax/JavaScript/API連携

Spring BootのWEB画面上でcssやjsファイルを読み込んでみた

業務用のアプリケーションを作成する際、画面のHTMLファイルから、cssファイルやjs(JavaScript)ファイルを読み込むことはよくあるが、そのパス指定の仕方が分からないと、スムーズに開発を進めることができない。

Thymeleafを利用したSpring BootのWEB画面の場合、staticフォルダを起点としたパスを指定することになる。今回は、Spring BootのWEB画面であるHTMLファイルから、cssファイルやjs(JavaScript)ファイルを読み込むサンプルプログラムを作成してみたので、共有する。

前提条件

以下の記事のSpring BootのWEB画面用アプリが作成済であること。

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...



画面上でcssやjsファイルを読み込むサンプルプログラム

今回作成したサンプルプログラムの構成は以下の通り。
cssとjsを読み込むサンプルプログラムの構成

また、読み込まれるcssファイル・jsファイルの内容は以下の通り。



フリーランスエンジニアのエージェントは就業中でも無料で登録できるITエンジニアには、フリーランスという働き方がある。 フリーランスとは、会社や団体などに所属せず、仕事に応じて自由に契約する人のこ...

さらに、cssファイル・jsファイルを読み込んでいるHTMLファイルの内容は以下の通り。cssファイルはlinkタグで、jsファイルはscriptタグで読み込みを行っている。
また、cssファイル・jsファイルはそれぞれstaticフォルダを起点としたパス指定となっている。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-web-readcssjs/demo

今回作成したサンプルプログラムの実行結果は以下の通り。Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすると、最初に以下の画面が初期表示され、divタグの背景色をdemo.cssから、divタグの文字色をdemo2.cssから読み込んだ内容になっている。
cssとjsを読み込むサンプルプログラムの実行結果1

次に、「JavaScript呼出_demo」ボタンを押下すると、demo.jsから読み込んだ、以下のダイアログが表示される。
cssとjsを読み込むサンプルプログラムの実行結果2

また、「JavaScript呼出_demo2」ボタンを押下すると、demo2.jsから読み込んだ、以下のダイアログが表示される。
cssとjsを読み込むサンプルプログラムの実行結果3

要点まとめ

  • cssファイルやjs(JavaScript)ファイルは、staticフォルダを起点としたパスを指定する。その際のパスは「”@{}”」で囲う。
  • cssファイルのパスはth:hrefタグで、jsファイルのパスはth:srcタグで指定する。