前提・実現したいこと
第二階層でもcssを適用させたい
前提
spring boot 3.9.4
htmlレスポンス thymelmeaf
css bootstrap
発生している問題・エラーメッセージ
localhost:8080/loginの場合だと
cssは適用するが
localhost:8080/login/Homeだと
homeのページでは適用してくれない
該当のソースコード
java
1//mainメゾット 2package com.main; 3 4import org.springframework.boot.SpringApplication; 5import org.springframework.boot.autoconfigure.SpringBootApplication; 6 7 8/* 9 * mainメゾット 10 * 読み込み先をcontrollerパッケージへ指定する。 11 */ 12@SpringBootApplication( 13 //読み込むパッケージ 14 scanBasePackages ={"com.login.controller","com.home"}) 15 16public class Application{ 17 18 public static void main(String[] args) { 19 SpringApplication.run(Application.class, args); 20 } 21 22}
java
1/home呼び出し 2package com.home.controller; 3 4import org.springframework.stereotype.Controller; 5import org.springframework.web.bind.annotation.RequestMapping; 6import org.springframework.web.bind.annotation.RequestMethod; 7import org.springframework.web.servlet.ModelAndView; 8 9/* 10 * ThirdCore ver1.0 11 * ホーム画面 12 */ 13@Controller 14public class HomeController { 15 16 ModelAndView model = new ModelAndView(); 17 18 @RequestMapping(value = "/login/home", method = RequestMethod.GET) 19 public Object login() { 20 model.setViewName("Home.html"); 21 return model; 22 } 23}
java
1//login呼び出し 2package com.login.controller; 3 4import org.springframework.beans.factory.annotation.Autowired; 5import org.springframework.beans.propertyeditors.StringTrimmerEditor; 6import org.springframework.context.annotation.ComponentScan; 7import org.springframework.stereotype.Controller; 8import org.springframework.web.bind.WebDataBinder; 9import org.springframework.web.bind.annotation.InitBinder; 10import org.springframework.web.bind.annotation.ModelAttribute; 11import org.springframework.web.bind.annotation.RequestMapping; 12import org.springframework.web.bind.annotation.RequestMethod; 13import org.springframework.web.servlet.ModelAndView; 14import com.form.FormLogin; 15import com.login.service.LoginInterface; 16 17@Controller 18@ComponentScan("com.login.service") 19@ComponentScan("com.form") 20public class LoginController { 21 22 //ModelAndViewの統一化 23 ModelAndView model = new ModelAndView(); 24 25 /* 26 * フォームにnullの投入 27 */ 28 @InitBinder 29 public void initbinder(WebDataBinder binder) { 30 binder.registerCustomEditor(String.class, new StringTrimmerEditor(true)); 31 } 32 33 /* 34 *ログイン画面(初期) 35 *@return model 36 */ 37 @RequestMapping(value = "/login", method = RequestMethod.GET) 38 public Object login() { 39 model.setViewName("LoginOrNew.html"); 40 return model; 41 }
html
1//Home.htmlとLoginOrNew.htmlは同じhtmlソースです 2 3<!DOCTYPE html> 4<html xmlns:th="http://www.thymeleaf.org"> 5<head> 6 7 8<meta charset="utf-8"> 9<title>login </title> 10 11<link href="css/bootstrap.css" rel="stylesheet"> 12<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 13<script src="js/bootstrap.min.js"></script> 14 15<link href="css/bootstrap.css" th:href="@{css/bootstrap.css}" rel="stylesheet"> 16<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" th:src="@{https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js}"></script> 17<script src="js/bootstrap.js" th:src="@{js/bootstrap.js}"></script> 18</head> 19<body> 20 21 <!-- header --> 22 <div class="row" style="background-color:black;"> 23 <div class="col-xl-3"> 24 <h3 style="font-family:'arial unicode ms'; margin:20px 0px 0px 15px;"><font color="white">Third Core Login Page</font></h3> 25 <br> 26 </div> 27 <div class="col-xl-8"> 28 <button type="button" style="margin: 17.5px 0px 0px 1250px;" class="btn btn-outline-primary">Create Account</button> 29 </div> 30 </div> 31 32<!-- content --> 33 <div class="container"> 34 35 <div class="row"> 36 37 38 <div class="col-xl-3"> 39 40 </div> 41 42 43 <div class="col-xl-6"> 44 <div class="row" style="background-color:white;"> 45 46 <div class="col-xl-3"> 47 48 </div> 49 50 <div class="col-xl-6"> 51 <center> 52 <img src="image/thirdcoremark.png" alt="thirdcore" width="150" height="300" style="margin-top:60px;"> 53 54 <form action="#" th:action="@{login}" method="POST" class="form-horizontal" style="margin-top:25px;"> 55 56 <input type="text" name="name" autocomplete="off" class="form-control" placeholder="ID" style="margin:0px 0px 15px 0px;"> 57 <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password" style="margin:15px 0px 15px 0px;"> 58 <div class="form-check mb-2 mr-sm-2"> 59 <input class="form-check-input" type="checkbox" id="inlineFormCheck"> 60 <label class="form-check-label" for="inlineFormCheck">ログイン情報を保持する</label> 61 </div> 62 <button type="submit" class="btn btn-primary" style="margin:15px 0px 0px 0px;">ログイン</button> 63 <div th:if="${isEven}"> 64 <font color="red"><p style="margin-top:20px;"th:text="${result}"></p></font> 65 </div> 66 <div th:unless="${isEven}"> 67 <p style="margin-top:20px;"> </p> 68 </div> 69 </form> 70 </center> 71 </div> 72 73 <div class="col-xl-3" > 74 </div> 75 76 </div> 77 <dir style="margin-top:20px;margin-left:95px;"> 78 パスワードを忘れちゃった?そんな方は<a href="http://www.kyutech.ac.jp/examination/gs-transfer.html"><u>こちら</u></a>へ 79 </dir> 80 </div> 81 82 83 <div class="col-xl-3"> 84 </div> 85 86 87 </div> 88 89 </div> 90 91<!-- footer --> 92 <div class="row" style="background-color:black; margin-top:95px;"> 93 94 <div class="col-xl-3"> 95 </div> 96 97 <div class="col-xl-6" style="margin-top:17px;"> 98 <center> 99 <img src="image/twittermark.png" alt="twitter" width="30" height="30" > 100 <a href="http://www.kyutech.ac.jp/examination/gs-transfer.html">@third_core_tr</a> 101 <img src="image/facebookmark.png" alt="facebook" width="20" height="20" style="margin-top:0px;"> 102 <a style="padding-left:5px;" href="http://www.kyutech.ac.jp/examination/gs-transfer.html">@third_core_fk</a> 103 </center> 104 </div> 105 106 <div class="col-xl-3" style="margin-top:40px;padding-left:260px;"> 107 108 <h6>@Third Core.inc from 2018</h6> 109 110 111 </div> 112 113 </div> 114 115 116</body> 117</html>
application.properties
spring.datasource.url=jdbc:mysql://localhost:3306?autoReconnect=true&useSSL=false
spring.datasource.username=admin
spring.datasource.password=admin
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
debug=true
spring.thymeleaf.mode=HTML
試したこと
上記に記載
表示ができるhtmlソースを貼り付けてみたがうまくいかなかった
みるからにcssが適用されていない
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/08/14 08:04
2018/08/14 21:16