增加ATM的HTML页面：
    image.png

    1. package com.lugew.springbootddd.atm;
    3. import org.springframework.beans.factory.annotation.Autowired;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.web.bind.annotation.*;
    7. import java.util.ArrayList;
    8. import java.util.List;
    10. @Controller
    11. @RequestMapping(path = "/atms")
    12. public class AtmController {
    13.     @Autowired
    14.     private AtmRepository atmRepository;
    15.     @Autowired
    16.     private PaymentGateway paymentGateway;
    18.     @GetMapping()
    19.     @ResponseBody
    20.     public List<AtmDto> getAtms() {
    21.         List<AtmDto> list = new ArrayList<>();
    22.         atmRepository.findAll().forEach(list::add);
    23.         return list;
    24.     }
    26.     @GetMapping("/{id}")
    27.     @ResponseBody
    28.     public AtmDto getAtm(@PathVariable("id") long id) {
    29.         return atmRepository.findById(id).orElse(null);
    30.     }
    32.     @PutMapping("/{id}/{amount}")
    33.     @ResponseBody
    34.     public String takeMoney(@PathVariable("id") long id, @PathVariable("amount")
    35.             float amount) {
    36.         AtmDto atmDto = atmRepository.findById(id).orElse(null);
    37.         Atm atm = atmDto.convertToAtm();
    38.         if (!atm.canTakeMoney(amount).isEmpty()) return
    39.                 atm.canTakeMoney(amount);
    40.         float amountWithCommission =
    41.                 atm.calculateAmountWithCommission(amount);
    42.         paymentGateway.chargePayment(amountWithCommission);
    43.         atm.takeMoney(amount);
    44.         atmRepository.save(atm.convertToAtmDto());
    45.         return "You have withrawn amount : $" + amount;
    46.     }
    47. }
    1. package com.lugew.springbootddd.atm;
    3. import org.springframework.stereotype.Component;
    5. @Component
    6. public class PaymentGateway {
    7.     public void chargePayment(float amountWithCommission) {
    8.     }
    9. }

    ATM：

    1.     public AtmDto convertToAtmDto() {
    2.         AtmDto atmDto = new AtmDto();
    3.         atmDto.setId(id);
    4.         atmDto.setMoneyCharged(moneyCharged);
    5.         atmDto.setOneCentCount(moneyInside.getOneCentCount());
    6.         atmDto.setTenCentCount(moneyInside.getTenCentCount());
    7.         atmDto.setQuarterCount(moneyInside.getQuarterCount());
    8.         atmDto.setOneDollarCount(moneyInside.getOneDollarCount());
    9.         atmDto.setFiveDollarCount(moneyInside.getFiveDollarCount());
    10.         atmDto.setTwentyDollarCount(moneyInside.getTwentyDollarCount());
    11.         return atmDto;
    12.     }

    AtmView.html:

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <span>Money inside :$<span id="moneyInside"></span></span>
    5. </br>
    6. <span>Money charged :$<span id="moneyCharged"></span></span>
    7. </br>
    8. </br>
    9. </br>
    10. <input type="text" id="moneyToTake"><br>
    11. <button id="btnTakeMoney">Take Money</button>
    12. </br>
    13. </br>
    14. </br>
    15. <div>No of coins and notes in Atm :</div>
    16. <table style="width:100%">
    17.     </tr>
    18.     <td>No. of 1 cent coin : <span id="cent"></span></td>
    19.     <td>No. of 10 cent coin : <span id="tenCent"></span></td>
    20.     <td>No. of 25 cent coin : <span id="quarter"></span></td>
    21.     </tr>
    22.     </tr>
    23.     <td>No. of 1 dollar note : <span id="dollar"></span></td>
    24.     <td>No. of 5 dollar note : <span id="fiveDollar"></span></td>
    25.     <td>No. of 20 dollar note : <span id="twentyDollar"></span></td>
    26.     </tr>
    27. </table>
    28. <script src="../common/jquery-3.6.0.min.js"></script>
    29. <script src="atm.js"></script>
    30. </body>
    31. </html>
    1. let searchParams = new URLSearchParams(window.location.search)
    2. let param = '';
    3. if (searchParams.has('id')) {
    4.     param = searchParams.get('id')
    5. } else {
    6.     param = '1';
    7. }
    8. const rootURI = "http://localhost:23333/atms/" + param;
    9. getAtm();
    11. function getAtm() {
    12.     $.get(rootURI, function (data, status) {
    13.         $('#moneyInside').html(data.amount);
    14.         $('#moneyCharged').html(data.moneyCharged);
    15.         $('#cent').html(data.oneCentCount);
    16.         $('#tenCent').html(data.tenCentCount);
    17.         $('#quarter').html(data.quarterCount);
    18.         $('#dollar').html(data.oneDollarCount);
    19.         $('#fiveDollar').html(data.fiveDollarCount);
    20.         $('#twentyDollar').html(data.twentyDollarCount);
    21.     });
    22. }
    24. $("#btnTakeMoney").click(function () {
    25.     var moneyToTake = $('#moneyToTake').val();
    26.     $.ajax({
    27.         url: rootURI + '/' + moneyToTake,
    28.         type: 'PUT',
    29.         success: function (data) {
    30.             alert(data);
    31.             location.reload();
    32.         }
    33.     });
    34. });

    image.png我们可以看到Atm的基本情况，取1元时：
    image.png
    我们在此处引入了付款的代理类PaymentGateway。显然，它只是模拟了对应的方法并没有实现。