teratail
回答率
85.48%
質問するログイン新規登録
トップSpring MVCに関する質問-電卓- 数字ボタン Spring Boot Thymeleaf

編集履歴

質問編集履歴

2

修正

2022/10/23 02:04

投稿

zundamon
zundamon

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,9 @@
1
1
  ### 前提
2
2
  初心者です。
3
+ 【未解決】
3
- 現在、Spring Bootを用いて、電卓(画面上の数字ボタンを押して数字を入力、演算子ボタンを押して四則演算を行う）を作成しているのですが、「画面(HTML)上の数字ボタンを押下後、画面に数字が入力する方法」及び「"=(イコール)ボタン"を押下後に、結果(Total)を算出する方法」が調べてもわからなかったので、ご教授お願いいたします。
4
+ 現在、Spring Bootを用いて、電卓(画面上の数字ボタンを押して数字を入力、演算子ボタンを押して四則演算を行う）を作成しているのですが、「画面(HTML)上の数字ボタンを押下後、画面に数字が入力する方法」
5
+ 【未解決】
6
+ 「"=(イコール)ボタン"を押下後に、結果(Total)を算出する方法」が調べてもわからなかったので、ご教授お願いいたします。
4
7
  > 引用テキスト~~### 実現したいこと
5
8
  ・【電卓の流れ】：数字ボタン押下で数字を入力(calculator.htmlのname="display"に表示)
6
9
  →演算子ボタン押下で四則演算子入力
@@ -40,38 +43,38 @@
40
43
  return "calculator";
41
44
  }
42
45
 
46
+ //「数字ボタン押下」時、
43
- @RequestMapping(value = "/calculator", params = "add", method = RequestMethod.POST)
47
+ if (req.getParameter("num") != null) {
48
+ //「初期フラグ(initialFlag)がtrue」かつ「今入力値(num1)がnull」の場合、
44
- public String add(@ModelAttribute("operationModel") OperationModel operationModel, Model model) {
49
+ if (operationModel.getInitialFlag() && operationModel.getNum1() == null) {
50
+ System.out.println(operationModel.getInitialFlag());
51
+ System.out.println(operationModel.getNum1());
52
+ //今入力値に数字ボタン値("num")を代入する。
53
+ operationModel.setNum1(Integer.parseInt(req.getParameter("num")));
54
+ System.out.println(operationModel.getNum1());
55
+ //初期フラグをfalseにする。
56
+ operationModel.setInitialFlag(false);
57
+ System.out.println(operationModel.getInitialFlag());
45
- model.addAttribute("result", calculatorService.add(operationModel));
58
+ model.addAttribute("inputNum1", operationModel.getNum1());
59
+
60
+ //「初期フラグがfalse」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、
61
+ } else if (!operationModel.getInitialFlag() && operationModel.getNum1() != null) {
62
+ //押下した数字ボタン値を今入力値の後に追加して、画面に表示
63
+ model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num")));
64
+
65
+ //「初期フラグがtrue」かつ「今入力値に数字ボタン値が既に代入されている(nullではない)」場合、
66
+ } else if (operationModel.getInitialFlag() && operationModel.getNum1() != null) {
67
+ //押下した数字ボタン値を今入力値の後に追加して、画面に表示
68
+ model.addAttribute("inputNum1", String.valueOf(operationModel.getNum1() + req.getParameter("num")));
69
+ }
70
+
71
+ //「イコールボタン("=")押下」時、
72
+ } else if (req.getParameter("equal") != null) {
73
+ operationModel.setInitialFlag(true); //<イコールボタン(=)押下時の命令>
74
+ }
75
+
46
76
  return "calculator";
47
- }
48
-
49
- @RequestMapping(value = "/calculator", params = "subtract", method = RequestMethod.POST)
50
- public String subtract(@ModelAttribute("operationModel") OperationModel operationModel, Model model) {
51
- model.addAttribute("result", calculatorService.subtract(operationModel));
52
- return "calculator";
77
+ }*/
53
- }
54
-
55
- @RequestMapping(value = "/calculator", params = "multiply", method = RequestMethod.POST)
56
- public String multiply(@ModelAttribute("operationModel") OperationModel operationModel, Model model) {
57
- model.addAttribute("result", calculatorService.multiply(operationModel));
58
- return "calculator";
59
- }
60
-
61
- @RequestMapping(value = "/calculator", params = "divide", method = RequestMethod.POST)
62
- public String divide(@ModelAttribute("operationModel") OperationModel operationModel, Model model) {
63
- model.addAttribute("result", calculatorService.divide(operationModel));
64
- return "calculator";
65
- }
66
-
67
- @RequestMapping(value = "/calculator", params = "clear", method = RequestMethod.POST)
68
- public String clear(@ModelAttribute("operationModel") OperationModel operationModel, Model model) {
69
- model.addAttribute("operationModel", calculatorService.clear(operationModel));
70
- model.addAttribute("result", 0);
71
- return "calculator";
72
- }
73
-
74
- }
75
78
  ```
76
79
  ```CalculatorService.java
77
80
  package com.example.demo.service;
@@ -116,8 +119,9 @@
116
119
 
117
120
  public class OperationModel {
118
121
  private String operation;
119
- private int num1;
122
+ private Integer num1 = null ;
120
123
  private int num2;
124
+ private boolean initialFlag = true;
121
125
 
122
126
  public OperationModel() {
123
127
  }
@@ -126,7 +130,7 @@
126
130
  this.operation = operation;
127
131
  }
128
132
 
129
- public OperationModel(int num1, int num2) {
133
+ public OperationModel(Integer num1, int num2) {
130
134
  this.num1 = num1;
131
135
  this.num2 = num2;
132
136
  }
@@ -139,11 +143,11 @@
139
143
  this.operation = operation;
140
144
  }
141
145
 
142
- public int getNum1() {
146
+ public Integer getNum1() {
143
147
  return num1;
144
148
  }
145
149
 
146
- public void setNum1(int num1) {
150
+ public void setNum1(Integer num1) {
147
151
  this.num1 = num1;
148
152
  }
149
153
 
@@ -155,68 +159,81 @@
155
159
  this.num2 = num2;
156
160
  }
157
161
 
162
+ public boolean isInitialFlag() {
163
+ return initialFlag;
164
+ }
165
+
166
+ public void setInitialFlag(boolean initialFlag) {
167
+ this.initialFlag = initialFlag;
168
+ }
169
+
158
170
  }
159
171
  ```
160
172
  ```calculator.html
161
173
  <!DOCTYPE html>
162
- <html lang="ja" xmlns:th="http://www.thymeleaf.org">
174
+ <html xmlns:th="http://www.thymeleaf.org">
163
175
  <head>
164
- <title>calculator</title>
165
176
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
166
- <link href="style.css" rel="stylesheet">
177
+ <link href="style.css" th:href="@{style.css}" rel="stylesheet">
167
178
  </head>
168
-
169
179
  <body>
170
- <form action="#" th:action="@{/calculator}" th:object="${operationModel}" method="POST">
171
- <table>
172
- <!-- 液晶画面部分 -->
173
- <tr>
174
- <td colspan="4"><input type="text" class="display"
175
- name="display" value="" disabled></td>
176
- </tr>
177
-
178
- <!-- 上から1段目（7~9＋÷） -->
179
- <tr>
180
- <td><input type="button" value="7"></td>
181
- <td><input type="button" value="8"></td>
182
- <td><input type="button" value="9"></td>
183
- <td><input type="button" value="÷" class="operator" name="divide"></td>
184
- </tr>
185
-
186
- <!-- 上から2段目（4~6＋×） -->
187
- <tr>
188
- <td><input type="button" value="4"></td>
189
- <td><input type="button" value="5"></td>
190
- <td><input type="button" value="6"></td>
191
- <td><input type="button" value="×" class="operator" name="multiply"></td>
192
- </tr>
193
-
194
- <!-- 上から3段目（1~3＋-） -->
195
- <tr>
196
- <td><input type="button" value="1"></td>
197
- <td><input type="button" value="2"></td>
198
- <td><input type="button" value="3"></td>
199
- <td><input type="button" value="-" class="operator" name="subtract"></td>
200
- </tr>
201
-
202
- <!-- 上から4段目（0/./=/+) -->
203
- <tr>
204
- <td><input type="button" value="0"></td>
205
- <td><input type="button" value="C" class="operator" name="clear"></td>
206
- <td><input type="button" value="=" class="equal" name="equal"></td>
207
- <td><input type="button" value="+" class="operator" name="add"></td>
208
- </tr>
209
-
210
- </table>
211
-
212
- <!-- <input type="text" th:field="*{Num1}" />
213
- <input type="text" th:field="*{Num2}" />
214
-
215
- <h1>
216
- <p th:text="'result: ' + ${result}" />
217
- </h1> -->
218
-
219
- </form>
180
+ <form action="#" th:action="@{/calculator}" th:object="${operationModel}" method="POST">
181
+ <table>
182
+ <!-- 液晶画面部分 --><!-- ・colspan：セルの結合 ・disabled：入力不可 -->
183
+ <tr>
184
+ <td colspan="4">
185
+ <input type="text" class="display" name="display" th:value="${inputNum1}" disabled>
186
+
187
+ <!-- <input type="hidden" th:field="*{前入力数値}" class="display" name="display" value="" >
188
+ <input type="hidden" th:field="*{前入力演算子}" class="display" name="display" value="" >
189
+ <input type="hidden" th:field="*{今入力演算子}" class="display" name="display" value="" >
190
+ <input type="hidden" th:field="*{初期入力フラグ}" class="display" name="display" value="" > -->
191
+ </td>
192
+ </tr>
193
+
194
+ <!-- 上から1段目（7~9＋÷） --><!-- ・value：入力フィールドの初期値設定 ・onclick：要素押下(クリック)時の起動処理-->
195
+ <tr>
196
+ <td><input type="submit" value="7" name="num" ></td>
197
+ <td><input type="submit" value="8" name="num" ></td>
198
+ <td><input type="submit" value="9" name="num" ></td>
199
+ <td><input type="submit" value="÷" class="operator" name="divide"></td>
200
+ </tr>
201
+
202
+ <!-- 上から2段目（4~6＋×） -->
203
+ <tr>
204
+ <td><input type="submit" value="4" name="num" ></td>
205
+ <td><input type="submit" value="5" name="num" ></td>
206
+ <td><input type="submit" value="6" name="num" ></td>
207
+ <td><input type="submit" value="×" class="operator" name="multiply"></td>
208
+ </tr>
209
+
210
+ <!-- 上から3段目（1~3＋-） -->
211
+ <tr>
212
+ <td><input type="submit" value="1" name="num" ></td>
213
+ <td><input type="submit" value="2" name="num" ></td>
214
+ <td><input type="submit" value="3" name="num" ></td>
215
+ <td><input type="submit" value="-" class="operator" name="subtract"></td>
216
+ </tr>
217
+
218
+ <!-- 上から4段目（0/C/=/+) -->
219
+ <tr>
220
+ <td><input type="submit" value="0" name="num" ></td>
221
+ <td><input type="submit" value="C" name="clearSimple" ></td>
222
+ <td><input type="submit" value="=" class="equal" ></td>
223
+ <td><input type="submit" value="+" class="operator" name="add"></td>
224
+ </tr>
225
+
226
+ </table>
227
+
228
+ <h1>
229
+ <p th:text="'inputNum: ' + ${inputNum}" />
230
+ </h1>
231
+
232
+ <h1>
233
+ <p th:text="'result: ' + ${result}" />
234
+ </h1>
235
+
236
+ </form>
220
237
  </body>
221
238
  </html>
222
239
  ```
Spring MVCJavaThymeleafHTMLSpring Boot

1

修正

2022/10/15 02:25

投稿

zundamon
zundamon

スコア0

test CHANGED
File without changes
test CHANGED
@@ -227,6 +227,7 @@
227
227
  <input type="text" th:field="*{Num1}" /> <input type="text" th:field="*{Num2}" />にテキスト形式で数字(Num1, Num2)を入力、演算子ボタンを押下後、<p th:text="'result: ' + ${result}" />に結果が表示
228
228
 
229
229
  ### 補足情報（FW/ツールのバージョンなど）
230
-
230
+ 開発環境：eclipse
231
- ここにより詳細な情報を記載してください。
231
+ javaVersion = 17
232
-
232
+ springBootVersion = 2.7.4
233
+
Spring MVCJavaThymeleafHTMLSpring Boot