为了简单起见，我们只使用静态页面——HTML和JavaScript。我们构建SnackMachineView页面：

    1. <html lang="en">
    2. <head><title>snackMachine</title></head>
    3. <body>
    4. <table style="width:100%">
    5.     <tbody>
    6.     <tr>
    7.         <td>
    8.             <button id="btnBuy">Buy a Snack</button>
    9.         </td>
    10.     </tr>
    11.     <tr>
    12.     </tr>
    13.     </tbody>
    14. </table>
    15. <br>
    16. <br>
    17. <br>
    18. <span>Money inserted :$<span id="moneyInserted">0</span></span>
    19. <br>
    20. <table style="width:100%">
    21.     <tbody>
    22.     <tr>
    23.         <td>
    24.             <button id="btnInsertCent">Insert 1 cent coin</button>
    25.         </td>
    26.         <td>
    27.             <button id="btnInsertTenCent">Insert 10 cent coin</button>
    28.         </td>
    29.         <td>
    30.             <button id="btnInsertQuarter">Insert 25 cent coin</button>
    31.         </td>
    32.     </tr>
    33.     <tr>
    34.         <td>
    35.             <button id="btnInsertDollar">Insert 1 dollar note</button>
    36.         </td>
    37.         <td>
    38.             <button id="btnInsertFiveDollar">Insert 5 dollar note</button>
    39.         </td>
    40.         <td>
    41.             <button id="btnInsertTwentyDollar">Insert 20 dollar
    42.                 note
    43.             </button>
    44.         </td>
    45.     </tr>
    46.     </tbody>
    47. </table>
    48. <br>
    49. <br>
    50. <br>
    51. <button id="btnReturnMoney">Return Money</button>
    52. <br>
    53. <br>
    54. <br>
    55. <br>
    56. <br>
    57. <br>
    58. <br>
    59. <br>
    60. <br>
    61. Number of coins and Notes in SnackMachine
    62. <table style="width:100%">
    63.     <tbody>
    64.     <tr>
    65.         <td>No. of 1 cent coin : <span id="cent">0</span></td>
    66.         <td>No. of 10 cent coin : <span id="tenCent">0</span></td>
    67.         <td>No. of 25 cent coin : <span id="quarter">0</span></td>
    68.     </tr>
    69.     <tr>
    70.         <td>No. of 1 dollar note : <span id="dollar">0</span></td>
    71.         <td>No. of 5 dollar note : <span id="fiveDollar">2</span></td>
    72.         <td>No. of 20 dollar note : <span id="twentyDollar">0</span></td>
    73.     </tr>
    74.     </tbody>
    75. </table>
    76. <script src="../common/jquery-3.6.0.min.js"></script>
    77. <script src="snackMachine.js"></script>
    78. </body>
    79. </html>

    效果：
    image.png
    image.png
    同时我们增加Controller：

    1. package com.lugew.springbootddd;
    3. import com.lugew.springbootddd.snackmachine.SnackMachine;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5. import org.springframework.web.bind.annotation.RestController;
    7. /**
    8.  * @author 夏露桂
    9.  * @since 2021/6/10 11:55
    10.  */
    11. @RestController
    12. @RequestMapping("snackmachines")
    13. public class SnackMachineController {
    14.     static SnackMachine snackMachine = new SnackMachine();
    15. }

    我们以静态字段SnackMachine表示售货机对象，后期引入数据库之后我们将重构。同时为了将实体传输到页面UI，我们增加SnackMachineDto类：

    1. package com.lugew.springbootddd;
    3. import com.lugew.springbootddd.snackmachine.Money;
    4. import lombok.Getter;
    5. import lombok.Setter;
    7. /**
    8.  * @author 夏露桂
    9.  * @since 2021/6/10 12:00
    10.  */
    11. @Getter
    12. @Setter
    13. public class SnackMachineDto {
    14.     private Money moneyInside;
    15.     private Money moneyInTransaction;
    16.     private long id;
    17. }

    为SnackMachine添加转换方法：

    1. package com.lugew.springbootddd.snackmachine;
    3. import com.lugew.springbootddd.Entity;
    4. import com.lugew.springbootddd.SnackMachineDto;
    5. import lombok.Getter;
    6. import lombok.Setter;
    8. import java.util.Arrays;
    10. import static com.lugew.springbootddd.snackmachine.Money.None;
    12. @Getter
    13. @Setter
    14. public final class SnackMachine extends Entity {
    15.     private Money moneyInside;
    16.     private Money moneyInTransaction;
    18.     public SnackMachine() {
    19.         moneyInside = None;
    20.         moneyInTransaction = None;
    21.     }
    23.     public void insertMoney(Money money) {
    24.         Money[] coinsAndNotes = {Money.Cent, Money.TenCent, Money.Quarter,
    25.                 Money.Dollar, Money.FiveDollar,
    26.                 Money.TwentyDollar};
    27.         if (!Arrays.asList(coinsAndNotes).contains(money))
    28.             throw new IllegalStateException();
    30.         moneyInTransaction = Money.add(moneyInTransaction, money);
    32.     }
    34.     public void returnMoney() {
    35.         moneyInTransaction = None;
    36.     }
    38.     public void buySnack() {
    39.         moneyInside = Money.add(moneyInside, moneyInTransaction);
    40.         moneyInTransaction = None;
    41.     }
    43.     public SnackMachineDto convertToSnackMachineDto() {
    44.         SnackMachineDto snackMachineDto = new SnackMachineDto();
    45.         snackMachineDto.setId(getId());
    46.         snackMachineDto.setMoneyInside(getMoneyInside());
    47.         snackMachineDto.setMoneyInTransaction(getMoneyInTransaction());
    48.         return snackMachineDto;
    49.     }
    51. }

    SnackMachineContoller添加接口：

    1. package com.lugew.springbootddd;
    3. import com.lugew.springbootddd.snackmachine.SnackMachine;
    4. import org.springframework.web.bind.annotation.GetMapping;
    5. import org.springframework.web.bind.annotation.PathVariable;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7. import org.springframework.web.bind.annotation.RestController;
    9. /**
    10.  * @author 夏露桂
    11.  * @since 2021/6/10 11:55
    12.  */
    13. @RestController
    14. @RequestMapping("snackmachines")
    15. public class SnackMachineController {
    16.     static SnackMachine snackMachine = new SnackMachine();
    18.     @GetMapping("{id}")
    19.     public SnackMachineDto getSnackMachine(@PathVariable("id") long id) {
    20.         return snackMachine.convertToSnackMachineDto();
    21.     }
    22. }

    同时，snackMachine.js加入以下代码：

    1. const rootURI = "http://localhost:23333/snackmachines/1";
    2. getSnackMachine();
    4. function getSnackMachine() {
    5.     $.get(rootURI, function (data, status) {
    6.         $('#moneyInserted').html(data.moneyInTransaction.amount);
    7.         $('#cent').html(data.oneCentCount);
    8.         $('#tenCent').html(data.tenCentCount);
    9.         $('#quarter').html(data.quarterCount);
    10.         $('#dollar').html(data.oneDollarCount);
    11.         $('#fiveDollar').html(data.fiveDollarCount);
    12.         $('#twentyDollar').html(data.twentyDollarCount);
    13.     });
    14. }

    此时页面
    image.png
    image.png
    是可以正常接收到请求的，但是页面按钮无效，接下来为insert按钮增加事件：

    1. const rootURI = "http://localhost:23333/snackmachines/1";
    2. getSnackMachine();
    4. function getSnackMachine() {
    5.     $.get(rootURI, function (data, status) {
    6.         $('#moneyInserted').html(data.moneyInTransaction.amount);
    7.         $('#cent').html(data.oneCentCount);
    8.         $('#tenCent').html(data.tenCentCount);
    9.         $('#quarter').html(data.quarterCount);
    10.         $('#dollar').html(data.oneDollarCount);
    11.         $('#fiveDollar').html(data.fiveDollarCount);
    12.         $('#twentyDollar').html(data.twentyDollarCount);
    13.     });
    14. }
    16. $("button").click(function () {
    17.     switch (this.id) {
    18.         case "btnInsertCent" :
    19.             insert("Cent")
    20.             break;
    21.         case "btnInsertTenCent" :
    22.             insert("TenCent")
    23.             break;
    24.         case "btnInsertQuarter" :
    25.             insert("Quarter")
    26.             break;
    27.         case "btnInsertDollar" :
    28.             insert("Dollar")
    29.             break;
    30.         case "btnInsertFiveDollar" :
    31.             insert("FiveDollar")
    32.             break;
    33.         case "btnInsertTwentyDollar" :
    34.             insert("TwentyDollar")
    35.             break
    36.         default :
    37.             break;
    38.     }
    39. });
    41. function insert(coinOrNote) {
    42.     $.ajax({
    43.         url: rootURI + '/moneyInTransaction/' + coinOrNote,
    44.         type: 'PUT',
    45.         success: function (result) {
    46. // Do something with the result
    47.         }
    48.     });
    49.     location.reload();
    50. }
    1. package com.lugew.springbootddd;
    3. import com.lugew.springbootddd.snackmachine.SnackMachine;
    4. import org.springframework.web.bind.annotation.*;
    6. import static com.lugew.springbootddd.snackmachine.Money.*;
    8. /**
    9.  * @author 夏露桂
    10.  * @since 2021/6/10 11:55
    11.  */
    12. @RestController
    13. @RequestMapping("snackmachines")
    14. public class SnackMachineController {
    15.     static SnackMachine snackMachine = new SnackMachine();
    17.     @GetMapping("{id}")
    18.     public SnackMachineDto getSnackMachine(@PathVariable("id") long id) {
    19.         return snackMachine.convertToSnackMachineDto();
    20.     }
    22.     @PutMapping("{id}/moneyInTransaction/{coinOrNote}")
    23.     public void inserMoney(@PathVariable("id") long id, @PathVariable("coinOrNote") String coinOrNote) {
    24.         if (coinOrNote.equalsIgnoreCase("Cent")) snackMachine.insertMoney(Cent);
    25.         else if (coinOrNote.equalsIgnoreCase("TenCent"))
    26.             snackMachine.insertMoney(TenCent);
    27.         else if (coinOrNote.equalsIgnoreCase("Quarter"))
    28.             snackMachine.insertMoney(Quarter);
    29.         else if (coinOrNote.equalsIgnoreCase("Dollar"))
    30.             snackMachine.insertMoney(Dollar);
    31.         else if (coinOrNote.equalsIgnoreCase("FiveDollar"))
    32.             snackMachine.insertMoney(FiveDollar);
    33.         else if (coinOrNote.equalsIgnoreCase("TwentyDollar"))
    34.             snackMachine.insertMoney(TwentyDollar);
    35.     }
    37. }

    此时，我们可以在页面验证投币功能：
    image.png
    接下来我们完善退币和购买功能：

    1.     @PutMapping("/{id}/moneyInTransaction")
    2.     public void returnMoney(@PathVariable("id") long id) {
    3.         snackMachine.returnMoney();
    4.     }
    6.     @PutMapping("/{id}/{slotNumber}")
    7.     public void buySnack(@PathVariable("id") long id, @PathVariable("slotNumber")
    8.             int slotNumber) {
    9.         snackMachine.buySnack();
    10.     }
    1. const rootURI = "http://localhost:23333/snackmachines/1";
    2. getSnackMachine();
    4. function getSnackMachine() {
    5.     $.get(rootURI, function (data, status) {
    6.               $('#moneyInserted').html(data.moneyInTransaction.amount);
    7.         $('#cent').html(data.moneyInside.oneCentCount);
    8.         $('#tenCent').html(data.moneyInside.tenCentCount);
    9.         $('#quarter').html(data.moneyInside.quarterCount);
    10.         $('#dollar').html(data.moneyInside.oneDollarCount);
    11.         $('#fiveDollar').html(data.moneyInside.fiveDollarCount);
    12.         $('#twentyDollar').html(data.moneyInside.twentyDollarCount);
    13.     });
    14. }
    16. $("button").click(function () {
    17.     switch (this.id) {
    18.         case "btnInsertCent" :
    19.             insert("Cent")
    20.             break;
    21.         case "btnInsertTenCent" :
    22.             insert("TenCent")
    23.             break;
    24.         case "btnInsertQuarter" :
    25.             insert("Quarter")
    26.             break;
    27.         case "btnInsertDollar" :
    28.             insert("Dollar")
    29.             break;
    30.         case "btnInsertFiveDollar" :
    31.             insert("FiveDollar")
    32.             break;
    33.         case "btnInsertTwentyDollar" :
    34.             insert("TwentyDollar")
    35.             break;
    36.         case "btnReturnMoney" :
    37.             returnMoney()
    38.             break;
    39.         case "btnBuy" :
    40.             buy("1")
    41.             break;
    42.         default :
    43.             break;
    44.     }
    45. });
    47. function insert(coinOrNote) {
    48.     $.ajax({
    49.         url: rootURI + '/moneyInTransaction/' + coinOrNote,
    50.         type: 'PUT',
    51.         success: function (result) {
    52. // Do something with the result
    53.         }
    54.     });
    55.     location.reload();
    56. }
    58. function returnMoney() {
    59.     $.ajax({
    60.         url: rootURI + '/moneyInTransaction',
    61.         type: 'PUT',
    62.         success: function (result) {
    63. // Do something with the result
    64.         }
    65.     });
    66.     location.reload();
    67. }
    69. function buy(position) {
    70.     $.ajax({
    71.         url: rootURI + '/' + position,
    72.         type: 'PUT',
    73.         success: function (result) {
    74.         }
    75.     });
    76.     location.reload();
    77. }

    上述几个方法中一些参数目前是无效的，作为后期使用。insertMoney方法中的参数只能是标准币值，所以将之更名为insertCoinOrNote。