Question

我正在使用Spring启动，Spring-data，ThymeLeaf。我有一些领域。 "Passenger Name", "Age", "Source", "Destination", "No of tickets", "Ticket Price", "Discount"。

以下HTML代码：

<div class="form-group has-error has-feedback" data-z="1b5278b0" id="passengerName1" data-th-classappend="${#fields.hasErrors('passengerName')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="passengerName" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_passengerName}">passengerName</label>
    <div class="col-md-3">
        <input id="passengerName" name="passengerName" data-th-value="*{{passengerName}}" type="text" class="form-control inputmask" placeholder="passengerName" data-th-placeholder="#{label_ticketbooking_passengerName}" data-toggle="tooltip" />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="age-field" data-th-classappend="${#fields.hasErrors('age')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="age" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_age}">age</label>
    <div class="col-md-3">
        <input id="age" name="age" data-th-value="*{{age}}" type="text" class="form-control inputmask" placeholder="age" data-th-placeholder="#{label_ticketbooking_age}" data-toggle="tooltip" data-inputmask-alias="numeric" data-inputmask-digits="0" min="1" />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="source1" data-th-classappend="${#fields.hasErrors('source')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="source" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_source}">source</label>
    <div class="col-md-3">
        <input id="source" name="source" data-th-value="*{{source}}" type="text" class="form-control inputmask" placeholder="source" data-th-placeholder="#{label_ticketbooking_source}" data-toggle="tooltip"  />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="destination1" data-th-classappend="${#fields.hasErrors('destination')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="destination" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_destination}">destination</label>
    <div class="col-md-3">
        <input id="destination" name="destination" data-th-value="*{{destination}}" type="text" class="form-control inputmask" placeholder="destination" data-th-placeholder="#{label_ticketbooking_destination}"  />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="1b5278b0" id="noOfTickets-field" data-th-classappend="${#fields.hasErrors('noOfTickets')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="noOfTickets" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_noOfTickets}">noOfTickets</label>
    <div class="col-md-3">
        <input id="noOfTickets" name="noOfTickets" data-th-value="*{{noOfTickets}}" type="text" class="form-control inputmask" placeholder="noOfTickets" data-th-placeholder="#{label_ticketbooking_noOfTickets}" data-toggle="tooltip" aria-describedby="noOfTicketsStatus" data-inputmask-alias="numeric" data-inputmask-digits="0" min="1" />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="ed99c550" id="ticketPrice-field" data-th-classappend="${#fields.hasErrors('ticketPrice')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="ticketPrice" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_ticketPrice}">ticketPrice</label>
    <div class="col-md-3">
        <input id="ticketPrice" name="ticketPrice" data-th-value="*{{ticketPrice}}" type="text" class="form-control inputmask" placeholder="ticketPrice" data-th-placeholder="#{label_ticketbooking_ticketPrice}" data-toggle="tooltip" />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="d1a1d590" id="ticketdiscount-field" data-th-classappend="${#fields.hasErrors('ticketDiscount')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="ticketDiscount" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_ticketdiscount}">ticketDiscount</label>
    <div class="col-md-3">
        <input id="ticketDiscount" name="ticketDiscount" data-th-value="*{{ticketDiscount}}" type="text" class="form-control inputmask" placeholder="ticketDiscount" data-th-placeholder="#{label_ticketbooking_ticketdiscount}" data-toggle="tooltip" data-inputmask-alias="numeric" data-inputmask-digits="0" />
    </div>
</div>
<div class="form-group has-error has-feedback" data-z="ed99c550" id="totalPrice-field" data-th-classappend="${#fields.hasErrors('totalPrice')}? 'has-error has-feedback'" data-th-class="form-group">
    <label for="totalPrice" class="col-md-3 control-label" data-th-text="#{label_ticketbooking_totalPrice}">totalPrice</label>
    <div class="col-md-3">
        <input id="totalPrice" name="totalPrice" data-th-value="*{{totalPrice}}" type="text" class="form-control inputmask" placeholder="totalPrice" data-th-placeholder="#{label_ticketbooking_totalPrice}" data-toggle="tooltip" />
    </div>
</div>

此处totalPrice应根据totalPrice = (noOfTickets * ticketPrice ) - ticketDiscount

计算

注意： ticketDiscount可能适用与否。如果适用，需要减去否则不需要减去它。

我怎样才能做到这一点？

Answer 1

在Spring中，您可以使用service.Example代码执行此操作：

服务类：

START_NOT_STICKY

Html文件：

@Component("calculateService")
public class CalculateService {

public Integer calculateTotalPrice(Integer noOfTickets ,Integer ticketPrice, Integer ticketDiscount ){

   return (noOfTickets * ticketPrice ) - ticketDiscount;

} 

}

Answer 2

尝试此计算：

<div th: "${ticketDiscount !=null} ? result=${noOfTickets * totalPrice - ticketDiscount } : result=${noOfTickets * totalPrice}">
  <span th:text="${result}"></span>
</div>

我在检查ticketdiscount的值是否为null。

Answer 3

您应该考虑几件事情，并且可以使用几种方法。让我们稍微简化一下，假设你有

表格DTO

@Data
public class TestDto {
    private int ticketPrice;
    private int noOfTickets;
    private int ticketDiscount;
}

和控制器

@Controller
public class TestController {

    @RequestMapping(name = "/", method = RequestMethod.GET)
    public ModelAndView get()  {
        TestDto dto = new TestDto();
        dto.setNoOfTickets(10);
        dto.setTicketPrice(12);
        return new ModelAndView("main", "dto", dto);
    }

    @RequestMapping(name = "/", method = RequestMethod.POST)
    public String post(@ModelAttribute("dto") TestDto dto) {
        System.out.println(dto);// can process input values
        return "main";
    }
}

重要。我假设你的表格中有th:object="${dto}"。如果不这样做，那么只需使用dto.fieldName而不是dto.ticketPrice而不是ticketPrice而不是$而不是*

选项1.使用Thymeleaf语法。 totalPrice将在每个表单提交后发出更改（POST请求）

<form action="/" th:object="${dto}" method="post">
    <input type="number" th:id="ticketPrice" th:field="*{ticketPrice}"/>
    <input type="number" th:id="noOfTickets" th:field="*{noOfTickets}"/>
    <input type="number" th:id="ticketDiscount" th:field="*{ticketDiscount}"/>

    <span th:text="*{noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0)}"
      th:id="totalPrice"/>

    <input type="submit" value="Subscribe!"/>
</form>

选项2.计算java代码中的值更新总值还需要对服务器进行POST更改。简单的情况可以使用方法与您的DTO中的所有计算。仅当您拥有此DTO中计算的所有信息时，此选项才有效。

public class TestDto {
    // ... same code as before
    public int getTotalPrice() {
        return noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0);
    }
}

这很容易使用，就像你的dto中的任何其他字段一样

<span th:text="*{totalPrice}"></span>
<span th:text="${dto.totalPrice}"></span>
<span th:text="*{getTotalPrice()}"></span>

如果您需要一些额外的计算信息，您可以按照@mrtasln的建议使用服务。对于我们的简单案例，它看起来像：

@Service("myService")
public class MyServices {

    // Option 1
    public int calculateTotal(MyDto dto){
        return dto.getNoOfTickets() * dto.getTicketPrice() - (dto.getTicketDiscount() != 0 ? dto.getTicketDiscount(): 0);
    }
    // Option 2
    public int calculateTotal2(int noOfTickets, int ticketPrice, int ticketDiscount){
        return noOfTickets * ticketPrice - (ticketDiscount != 0 ? ticketDiscount: 0);
    }
}

xml部分可以是以下之一：

<span th:id="totalPriceFromService" 
      th:text="${@myService.calculateTotal(dto)}"></span>

<span th:id="totalPriceFromService2" 
      th:text="*{@myService.calculateTotal2(ticketPrice, noOfTickets, ticketDiscount)}"></span>

<span th:id="totalPriceFromService2" 
      th:with="tp=*{ticketPrice},nt=*{noOfTickets},td=*{ticketDiscount}"
      th:text="${@myService.calculateTotal2(tp, nt, td)}"></span>

选项3. Javascript方式是计算更改的唯一动态选项。无需执行POST来更新总值。您可以使用一些库来帮助您，但是应该使用简单的案例

定义一些JavaScript函数，例如calculateTotal()
在您要收听的每个输入字段上添加oninput="calculateTotal()"属性

这样的事情：

<form action="/" th:object="${dto}" method="post">
    <input type="number" th:id="ticketPrice" th:field="*{ticketPrice}" oninput="calculateTotal()"/>
    <input type="number" th:id="noOfTickets" th:field="*{noOfTickets}" oninput="calculateTotal()"/>
    <input type="number" th:id="ticketDiscount" th:field="*{ticketDiscount}" disabled="disabled"/>
    <span th:id="totalPriceJS"></span>
    <input type="submit" value="Subscribe!"/>
</form>

<script type="text/javascript">
    function calculateTotal() {
        var price = document.getElementById("ticketPrice").value;
        var quantity = document.getElementById("noOfTickets").value;
        var discount = document.getElementById("ticketDiscount").value;
        var totalInput = document.getElementById("totalPriceJS");

        //do all the calculations here
        var total = price * quantity
        if (discount) total -= discount;

        totalInput.innerHTML = total
    }
    calculateTotal(); // don't forget to call this function on the first run
</script>

如何根据百里香的其他领域进行计算？

3 个答案: