iT邦幫忙

2023 iThome 鐵人賽
DAY 20
0
Modern Web

自己開發一個~?系列 第 20 篇

Springboot~放上jQuery

15th鐵人賽
593 瀏覽

  • 分享至 

  • xImage
    •  

颱風天大家出門注意安全
風真的有大的~
/images/emoticon/emoticon06.gif
methods做初始化~

目前前端程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script th:src="@{/js/vue.min.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>客戶清單與維護作業</title>
    <!--設定樣式-->
    <!--<style>
       body{
        background-color: lavenderblush;border: 2px;
       }
       #app{
        background-color: aqua;
        font-size: 16px;
        color:darkblue;
       }
       .btnEdit{
        background-color: black;
        color:white;
       }
       #data tr:nth-child(odd){
        background-color: coral;
        color:black;
       }
       #data tr:nth-child(even){
        background-color: rgb(220, 210, 156);
        color:black;
       }
    </style>-->
    <style>
        thead{
            background-color: lemonchiffon;
            color:black;
            font-size: 18px;
            font-style: unset;
        }
    </style>
</head>
<body id="body">
    <script th:inline="javascript">
        //定義變數 陣列內容???後端使用thymeleaf嵌入進來的[{,,,},{}]
        var list=/*[[${data}]]*/ [];
        //事件程序綁在標籤body標籤物件 onload事件上
        //window.alert(document.getElementById('body'));
        //標籤物件操作模組 DOM(Document Object Model)
        document.getElementById('body').onload=function(){
            //alert('我來了');
            //參照標籤物件label
            document.getElementById('counter').innerText='客戶記錄數:'+list.length;
        }
    </script>
    <fieldset id="app">
        <legend>客戶清單</legend>
        <div>
            <label id="counter"></label>
        </div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>客戶編號</td>
                    <td>公司行號</td>
                    <td>聯絡地址</td>
                    <td>連絡電話</td>
                    <td>EMAIL</td>
                    <td>國家別</td>
                </tr>
            </thead>
            <!--借助JS MVVM Framework -->
            <tbody id="data">
                <tr v-for="(item,index) in customerList">
                    <td>
                        <!--按鈕事件程序 給Vue進行綁定function來執行-->
                        <!--如何知道這一個按鈕被觸發相對列???-->
                        <button class="btn btn-primary" v-on:click="editHandler" v-bind:accessKey="index">編輯</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                    <td>{{item.customerid}}</td>
                    <td>{{item.companyname}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.country}}</td>
                </tr>
            </tbody>
        </table>
       
    </fieldset>
    <script>
        //建構Vue物件
        var app=new Vue(
            {
                //資料模組
                data:{
                    customerList:[] //空陣列
                },
                //設定Vue支援共用程序 或者事件程序綁定來源
                methods:{
                    //聆聽編輯按鈕被觸發
                    editHandler:function(e){
                       
                        //取出按鈕的accessKey屬性 在一開始渲染畫面就設定相對資料列順序
                        let index=e.target.accessKey;
                        //透過順序對應Vue customerList取出相對的客戶資料
                        let currentCustomers=this.customerList[index];
                        console.log(currentCustomers);
                        //進行編輯畫面的渲染
                    }

                }
                ,
                //當Vue完成掛載之後 引發事件..將JS變數list內容指派給Vue物件資料模組customerList
                mounted:function(){
                    //將list變數內容指派給Vue資料物件模組customerList
                    this.customerList=list;
                    console.log(this.customerList);
                }
            }
        );
        //掛載到特定id去
        app.$mount('#app');
    </script>
</body>
</html>

測試:http://localhost:8080/customers/allcustomers

用開發者工具來看後面顯示

前端程式碼:準備放上jQuery，使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件,依照自己下載的版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery-3.6.1.min.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>客戶清單與維護作業</title>
    <!--設定樣式-->
    <!--<style>
       body{
        background-color: lavenderblush;border: 2px;
       }
       #app{
        background-color: aqua;
        font-size: 16px;
        color:darkblue;
       }
       .btnEdit{
        background-color: black;
        color:white;
       }
       #data tr:nth-child(odd){
        background-color: coral;
        color:black;
       }
       #data tr:nth-child(even){
        background-color: rgb(220, 210, 156);
        color:black;
       }
    </style>-->
    <style>
        thead{
            background-color: lemonchiffon;
            color:black;
            font-size: 18px;
            font-style: unset;
        }
    </style>
</head>
<body id="body">
    <script th:inline="javascript">
        //定義變數 陣列內容???後端使用thymeleaf嵌入進來的[{,,,},{}]
        var list=/*[[${data}]]*/ [];
        //事件程序綁在標籤body標籤物件 onload事件上
        //window.alert(document.getElementById('body'));
        //標籤物件操作模組 DOM(Document Object Model)
        document.getElementById('body').onload=function(){
            //alert('我來了');
            //參照標籤物件label
            document.getElementById('counter').innerText='客戶記錄數:'+list.length;
        }
    </script>
    <fieldset id="app">
        <legend>客戶清單</legend>
        <div>
            <label id="counter"></label>
        </div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>客戶編號</td>
                    <td>公司行號</td>
                    <td>聯絡地址</td>
                    <td>連絡電話</td>
                    <td>EMAIL</td>
                    <td>國家別</td>
                </tr>
            </thead>
            <!--借助JS MVVM Framework -->
            <tbody id="data">
                <tr v-for="(item,index) in customerList">
                    <td>
                        <!--按鈕事件程序 給Vue進行綁定function來執行-->
                        <!--如何知道這一個按鈕被觸發相對列???-->
                        <button class="btn btn-primary" v-on:click="editHandler" v-bind:accessKey="index">編輯</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                    <td>{{item.customerid}}</td>
                    <td>{{item.companyname}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.country}}</td>
                </tr>
            </tbody>
        </table>
       
    </fieldset>
    <script>
       
        //使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件
        $(document).ready(
            //事件程序
            function(){
                alert('hi jquery');
            }
        );
        //建構Vue物件
        var app=new Vue(
            {
                //資料模組
                data:{
                    customerList:[] //空陣列
                },
                //設定Vue支援共用程序 或者事件程序綁定來源
                methods:{
                    //聆聽編輯按鈕被觸發
                    editHandler:function(e){
                       
                        //取出按鈕的accessKey屬性 在一開始渲染畫面就設定相對資料列順序
                        let index=e.target.accessKey;
                        //透過順序對應Vue customerList取出相對的客戶資料
                        let currentCustomers=this.customerList[index];
                        console.log(currentCustomers);
                        //進行編輯畫面的渲染
                    }

                }
                ,
                //當Vue完成掛載之後 引發事件..將JS變數list內容指派給Vue物件資料模組customerList
                mounted:function(){
                    //將list變數內容指派給Vue資料物件模組customerList
                    this.customerList=list;
                    console.log(this.customerList);
                }
            }
        );
        //掛載到特定id去
        app.$mount('#app');
    </script>
</body>
</html>

在這個更新的 HTML 代碼中，已經引入了 jQuery 函式庫，並在 $(document).ready 函數中設置了一個簡單的警告提示。此外，Vue.js 也是這個網頁的一部分，依然用來呈現客戶數據和處理編輯事件。

這是對更新的 HTML 代碼的說明：

  1. <script th:src="@{/js/jquery-3.6.1.min.js}"></script>：引入了 jQuery 函式庫。

  2. $(document).ready()：在 jQuery 中，這個函數用來確保當文檔已經下載完畢後，才執行包含的 JavaScript 代碼。在這裡，它用一個簡單的 alert 來展示警告。

  3. Vue.js 部分保持不變，仍然負責呈現和編輯客戶數據。

整體來說，這個 HTML 代碼包含 Vue.js 和 jQuery，分別處理不同的事務。Vue.js 負責客戶數據的呈現和編輯，而 jQuery 用於通用的 JavaScript 事件處理。在這個示例中，jQuery 並未與 Vue.js 進行交互，它僅作為通用的 JavaScript 函式庫引入到項目中。

測試http://localhost:8080/customers/allcustomers
https://ithelp.ithome.com.tw/upload/images/20231106/2011903556Abu2Z6K2.png

[VS Code]自動排版 Alt + Shift + F.

再編輯前端CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery-3.6.1.min.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>客戶清單與維護作業</title>
    <!--設定樣式-->
    <!--<style>
       body{
        background-color: lavenderblush;border: 2px;
       }
       #app{
        background-color: aqua;
        font-size: 16px;
        color:darkblue;
       }
       .btnEdit{
        background-color: black;
        color:white;
       }
       #data tr:nth-child(odd){
        background-color: coral;
        color:black;
       }
       #data tr:nth-child(even){
        background-color: rgb(220, 210, 156);
        color:black;
       }
    </style>-->
    <style>
        thead{
            background-color: lemonchiffon;
            color:black;
            font-size: 18px;
            font-style: unset;
        }
    </style>
</head>
<body id="body">
    <script th:inline="javascript">
        //定義變數 陣列內容???後端使用thymeleaf嵌入進來的[{,,,},{}]
        var list=/*[[${data}]]*/ [];
        //事件程序綁在標籤body標籤物件 onload事件上
        //window.alert(document.getElementById('body'));
        //標籤物件操作模組 DOM(Document Object Model)
        document.getElementById('body').onload=function(){
            //alert('我來了');
            //參照標籤物件label
            document.getElementById('counter').innerText='客戶記錄數:'+list.length;
        }
    </script>
    <fieldset id="app">
        <legend>客戶清單</legend>
        <div>
            <label id="counter"></label>
        </div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>客戶編號</td>
                    <td>公司行號</td>
                    <td>聯絡地址</td>
                    <td>連絡電話</td>
                    <td>EMAIL</td>
                    <td>國家別</td>
                </tr>
            </thead>
            <!--借助JS MVVM Framework -->
            <tbody id="data">
                <tr v-for="(item,index) in customerList">
                    <td>
                        <!--按鈕事件程序 給Vue進行綁定function來執行-->
                        <!--如何知道這一個按鈕被觸發相對列???-->
                        <button class="btn btn-primary" v-on:click="editHandler" v-bind:accessKey="index">編輯</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                    <td>{{item.customerid}}</td>
                    <td>{{item.companyname}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.country}}</td>
                </tr>
            </tbody>
        </table>
       
    </fieldset>
    <script>
       
        //使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件
        $(document).ready(
            //事件程序
            function(){
                alert('hi jquery');
            }
        );
        //建構Vue物件
        var app=new Vue(
            {
                //資料模組
                data:{
                    customerList:[] //空陣列
                },
                //設定Vue支援共用程序 或者事件程序綁定來源
                methods:{
                    //聆聽編輯按鈕被觸發
                    editHandler:function(e){
                       
                        //取出按鈕的accessKey屬性 在一開始渲染畫面就設定相對資料列順序
                        let index=e.target.accessKey;
                        //透過順序對應Vue customerList取出相對的客戶資料
                        let currentCustomers=this.customerList[index];
                        //console.log(currentCustomers);
                        //進行編輯畫面的渲染
                        //TODO 啟動對話盒 編輯相對列物件
                        let trs=$('tbody tr');

                        let curTr=trs.eq(index);
                        console.log(curTr);

                        //進行編輯畫面的渲染

                    }

                }
                ,
                //當Vue完成掛載之後 引發事件..將JS變數list內容指派給Vue物件資料模組customerList
                mounted:function(){
                    //將list變數內容指派給Vue資料物件模組customerList
                    this.customerList=list;
                    console.log(this.customerList);
                }
            }
        );
        //掛載到特定id去
        app.$mount('#app');
    </script>
</body>
</html>

將 jQuery 引入到 HTML 代碼中，並且在 $(document).ready 函數中設置了一個簡單的警告提示。

為了使 jQuery 與 Vue.js 配合，特別是在編輯按鈕被觸發時，您可以使用 jQuery 選擇器來找到相對的 HTML 元素，然後進行編輯畫面的渲染。您已經使用 $('tbody tr') 來選擇所有表格行，並且可以使用 eq(index) 來訪問特定行，這是一個有效的方法。

接下來，您可以在這個選定的表格行上進行編輯操作，可能是更新表格中的值或顯示一個編輯表單。

注意，這個簡單的示例只包括警告提示。要真正實現編輯功能，您需要進一步開發 JavaScript 代碼，以便在按下編輯按鈕時顯示編輯表單，讓用戶編輯客戶資料。

測試

使用開發者介面查看

修改前端程式碼加入HighLight，先挑選移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery-3.6.1.min.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <title>客戶清單與維護作業</title>
    <!--設定樣式-->
    <!--<style>
       body{
        background-color: lavenderblush;border: 2px;
       }
       #app{
        background-color: aqua;
        font-size: 16px;
        color:darkblue;
       }
       .btnEdit{
        background-color: black;
        color:white;
       }
       #data tr:nth-child(odd){
        background-color: coral;
        color:black;
       }
       #data tr:nth-child(even){
        background-color: rgb(220, 210, 156);
        color:black;
       }
    </style>-->
    <style>
        thead{
            background-color: lemonchiffon;
            color:black;
            font-size: 18px;
            font-style: unset;
        }
        .rowHight{
            background-color: bisque;
            color:rgb(7, 1, 18);
        }
    </style>
</head>
<body id="body">
    <script th:inline="javascript">
        //定義變數 陣列內容???後端使用thymeleaf嵌入進來的[{,,,},{}]
        var list=/*[[${data}]]*/ [];
        //事件程序綁在標籤body標籤物件 onload事件上
        //window.alert(document.getElementById('body'));
        //標籤物件操作模組 DOM(Document Object Model)
        document.getElementById('body').onload=function(){
            //alert('我來了');
            //參照標籤物件label
            document.getElementById('counter').innerText='客戶記錄數:'+list.length;
        }
    </script>
    <fieldset id="app">
        <legend>客戶清單</legend>
        <div>
            <label id="counter"></label>
        </div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>客戶編號</td>
                    <td>公司行號</td>
                    <td>聯絡地址</td>
                    <td>連絡電話</td>
                    <td>EMAIL</td>
                    <td>國家別</td>
                </tr>
            </thead>
            <!--借助JS MVVM Framework -->
            <tbody id="data">
                <tr v-for="(item,index) in customerList">
                    <td>
                        <!--按鈕事件程序 給Vue進行綁定function來執行-->
                        <!--如何知道這一個按鈕被觸發相對列???-->
                        <button class="btn btn-primary" v-on:click="editHandler" v-bind:accessKey="index">編輯</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                    <td>{{item.customerid}}</td>
                    <td>{{item.companyname}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.country}}</td>
                </tr>
            </tbody>
        </table>
       
    </fieldset>
    <script>
       
        //使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件
        $(document).ready(
            //事件程序
            function(){
                alert('hi jquery');
            }
        );
        //建構Vue物件
        var app=new Vue(
            {
                //資料模組
                data:{
                    customerList:[] //空陣列
                },
                //設定Vue支援共用程序 或者事件程序綁定來源
                methods:{
                    //聆聽編輯按鈕被觸發
                  //聆聽編輯按鈕被觸發
                  editHandler:function(e){
                       
                       //取出按鈕的accessKey屬性 在一開始渲染畫面就設定相對資料列順序
                       let index=e.target.accessKey;
                       //透過順序對應Vue customerList取出相對的客戶資料
                       this.curCustomers=this.customerList[index];
                       //console.log(currentCustomers);
                       //HighLight資料的相對列
                       //先行移除原先挑選列的class
                       $('tbody tr').eq(app.rowIndex).removeClass('rowHight');
                       //使用選擇器挑選標籤 子標籤 eq(順序) 呼叫addClass Method動態加入class=""
                       $('tbody tr').eq(index).addClass('rowHight'); //選取tbody內所有的tr(所有列物件)
                       //將相對列進行管理
                       app.rowIndex=index;
                        //進行編輯畫面的渲染

                    }

                }
                ,
                //當Vue完成掛載之後 引發事件..將JS變數list內容指派給Vue物件資料模組customerList
                mounted:function(){
                    //將list變數內容指派給Vue資料物件模組customerList
                    this.customerList=list;
                    console.log(this.customerList);
                }
            }
        );
        //掛載到特定id去
        app.$mount('#app');
    </script>
</body>
</html>

HTML 中添加了高亮顯示行的樣式和 JavaScript 部分，以便在點擊編輯按鈕時高亮顯示相對的行。這是一個有效的方法。

使用 app.rowIndex 變數來追蹤當前高亮顯示的行。並使用 jQuery 的 removeClass 方法來刪除先前高亮顯示的行的樣式，然後使用 addClass 方法將樣式添加到新的高亮顯示行。

這樣，當點擊編輯按鈕時，將高亮顯示該行，並清除先前高亮顯示的行的樣式。這是達到您的目標的有效方法。

測試http://localhost:8080/customers/allcustomers

https://ithelp.ithome.com.tw/upload/images/20231106/20119035HAb2dGFrFN.png

參考jQuery的UI:https://jqueryui.com/dialog/按view source可以看到程式碼

也是用連結插入:

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

編輯相對客戶資料對話盒~:顯示同步

<!--編輯相對客戶資料對話盒-->
        <fieldset id="editDialog" style="display: none;">
            <legend>客戶資料編輯</legend>
            <table>
                <tr>
                    <td>客戶編號</td>
                    <td><input type="text" v-model:value="curCustomers.customerid" readonly></td>
                </tr>
                <tr>
                    <td>公司行號</td>
                    <td><input type="text" v-model.lazy:value="curCustomers.companyname"></td>
                </tr>
                <tr>
                    <td>聯絡地址</td>
                    <td><input type="text" v-model:value="curCustomers.address"></td>
                </tr>
                <tr>
                    <td>連絡電話</td>
                    <td><input type="text" v-model:value="curCustomers.phone"></td>
                </tr>
                <tr>
                    <td>EMAIL</td>
                    <td><input type="text" v-model:value="curCustomers.email"></td>
                </tr>
                <tr>
                    <td>國家別</td>
                    <td><input type="text" v-model:value="curCustomers.country"></td>
                </tr>
            </table>
        </fieldset>

客戶編號不能修改要做唯讀

<tr>
                    <td>客戶編號</td>
                    <td><input type="text" v-model:value="curCustomers.customerid" readonly></td>
                </tr>

插入前端語法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery-3.6.1.min.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <title>客戶清單與維護作業</title>
    <!--設定樣式-->
    <!--<style>
       body{
        background-color: lavenderblush;border: 2px;
       }
       #app{
        background-color: aqua;
        font-size: 16px;
        color:darkblue;
       }
       .btnEdit{
        background-color: black;
        color:white;
       }
       #data tr:nth-child(odd){
        background-color: coral;
        color:black;
       }
       #data tr:nth-child(even){
        background-color: rgb(220, 210, 156);
        color:black;
       }
    </style>-->
    <style>
        thead{
            background-color: lemonchiffon;
            color:black;
            font-size: 18px;
            font-style: unset;
        }
        .rowHight{
            background-color: bisque;
            color:rgb(7, 1, 18);
        }
    </style>
</head>
<body id="body">
    <script th:inline="javascript">
        //定義變數 陣列內容???後端使用thymeleaf嵌入進來的[{,,,},{}]
        var list=/*[[${data}]]*/ [];
        //事件程序綁在標籤body標籤物件 onload事件上
        //window.alert(document.getElementById('body'));
        //標籤物件操作模組 DOM(Document Object Model)
        document.getElementById('body').onload=function(){
            //alert('我來了');
            //參照標籤物件label
            document.getElementById('counter').innerText='客戶記錄數:'+list.length;
        }
    </script>
    <fieldset id="app">
        <legend>客戶清單</legend>
        <div>
            <label id="counter"></label>
        </div>
        <table class="table table-dark table-hover">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>客戶編號</td>
                    <td>公司行號</td>
                    <td>聯絡地址</td>
                    <td>連絡電話</td>
                    <td>EMAIL</td>
                    <td>國家別</td>
                </tr>
            </thead>
            <!--借助JS MVVM Framework -->
            <tbody id="data">
                <tr v-for="(item,index) in customerList">
                    <td>
                        <!--按鈕事件程序 給Vue進行綁定function來執行-->
                        <!--如何知道這一個按鈕被觸發相對列???-->
                        <button class="btn btn-primary" v-on:click="editHandler" v-bind:accessKey="index">編輯</button>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                    <td>{{item.customerid}}</td>
                    <td>{{item.companyname}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.country}}</td>
                </tr>
            </tbody>
        </table>

        <!--編輯相對客戶資料對話盒-->
        <fieldset id="editDialog" style="display: none;">
            <legend>客戶資料編輯</legend>
            <table>
                <tr>
                    <td>客戶編號</td>
                    <td><input type="text" v-model:value="curCustomers.customerid" readonly></td>
                </tr>
                <tr>
                    <td>公司行號</td>
                    <td><input type="text" v-model.lazy:value="curCustomers.companyname"></td>
                </tr>
                <tr>
                    <td>聯絡地址</td>
                    <td><input type="text" v-model:value="curCustomers.address"></td>
                </tr>
                <tr>
                    <td>連絡電話</td>
                    <td><input type="text" v-model:value="curCustomers.phone"></td>
                </tr>
                <tr>
                    <td>EMAIL</td>
                    <td><input type="text" v-model:value="curCustomers.email"></td>
                </tr>
                <tr>
                    <td>國家別</td>
                    <td><input type="text" v-model:value="curCustomers.country"></td>
                </tr>
            </table>
        </fieldset>
       
    </fieldset>

    <script>
        //使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件
        $(document).ready(
            //事件程序
            function(){
                //alert('hi jquery');
            }
        );
        //建構Vue物件
        var app=new Vue(
            {
                //資料模組
                data:{
                    customerList:[], //空陣列
                    rowIndex:-1, //挑選的相對順序
                    curCustomers:{} //相對列 相對客戶物件
                },
                //設定Vue支援共用程序 或者事件程序綁定來源
                methods:{
                    //聆聽編輯按鈕被觸發
                    editHandler:function(e){
                       
                        //取出按鈕的accessKey屬性 在一開始渲染畫面就設定相對資料列順序
                        let index=e.target.accessKey;
                        //透過順序對應Vue customerList取出相對的客戶資料
                        this.curCustomers=this.customerList[index];
                        //console.log(currentCustomers);
                        //HighLight資料的相對列
                        //先行移除原先挑選列的class
                        $('tbody tr').eq(app.rowIndex).removeClass('rowHight');
                        //使用選擇器挑選標籤 子標籤 eq(順序) 呼叫addClass Method動態加入class=""
                        $('tbody tr').eq(index).addClass('rowHight'); //選取tbody內所有的tr(所有列物件)
                        //將相對列進行管理
                        app.rowIndex=index;
                        //TODO 啟動對話盒 編輯相對列物件
                        $('#editDialog').dialog(
                            //初始化物件設定(抬頭/寬度/按鈕(s)/強佔式對話盒)
                            {
                                title:'客戶資料編輯',
                                modal:true,
                                width:360, //按鈕設計
                                buttons:[
                                    {
                                        text:'更新',
                                        class:'btn btn-primary',
                                        click:function(){
                                            //TODO 進行非同步處理更新後端資料
                                        }
                                    },
                                    {
                                        text:'關閉',
                                        class:'btn btn-danger',
                                        click:function(){
                                            //關閉對話盒
                                            $('#editDialog').dialog('close');
                                        }
                                    }
                                ]
                            }
                        );
                        //進行編輯畫面的渲染
                    }

                }
                ,
                //當Vue完成掛載之後 引發事件..將JS變數list內容指派給Vue物件資料模組customerList
                mounted:function(){
                    //將list變數內容指派給Vue資料物件模組customerList
                    this.customerList=list;
                    console.log(this.customerList);
                }
            }
        );
        //掛載到特定id去
        app.$mount('#app');
    </script>
</body>
</html>

已經成功在您的 HTML 中添加了一個編輯對話盒，使您能夠編輯客戶資料。您使用了 jQuery UI 的 dialog 方法來創建這個對話盒。這是一個很好的方法，可以讓您輕鬆編輯客戶資料。

JavaScript 代碼中有一個更新按鈕，但目前它尚未連接到後端以進行實際的數據更新。當用戶單擊更新按鈕時，您可以添加一個 AJAX 請求，將修改後的客戶資料發送給後端，然後在後端處理該數據，執行相應的數據更新操作。確保後端 API 可以處理此類請求。

測試http://localhost:8080/customers/allcustomers

https://ithelp.ithome.com.tw/upload/images/20231106/20119035ZoOKf1rP0K.png

按關閉顯示紅色按鈕
https://ithelp.ithome.com.tw/upload/images/20231106/20119035vKShvIZKkO.png

修改看看:有顯示同步

REST架構風格:

新增一個Package

顯示

新增一個檔案

顯示

新增的CODE

package com.tzu.service;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

//設計一個RESTful Service
@RestController
public class HelloService {
	
	//提供一個回應字串訊息 查詢作業(GET)
	//produces 決定Http Response Header Content-Type 
	@GetMapping(path="/api/hello/helloworld/rawdata")
	public String helloWorld() {
		return "<font size='7' color='red'>您好</font>";
	}

}

使用 Spring Framework 的 RESTful 服務。這個服務定義了一個 GET 請求的接口，當你訪問 /api/hello/helloworld/rawdata 路徑時，它會回傳一個字串訊息。

具體來說，@RestController 標註用於將這個類別宣告為 RESTful 控制器，並 @GetMapping 標註定義了一個 GET 請求的處理方法，當訪問 /api/hello/helloworld/rawdata 時，它將回傳 <font size='7' color='red'>您好</font> 這個 HTML 字串。

你可以使用你的瀏覽器或 API 測試工具來訪問這個端點，並查看它的回應。

請確保你的應用程序已正確配置，以便能夠執行這個 RESTful 服務，包括 Spring 框架的配置、URL 映射等。

改後端CODE加入此Package

package com.tzu.myweb;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;

@SpringBootApplication
@ComponentScan(basePackages = {"com.tzu.controllers","com.tzu.config","com.tzu.service"})

public class MywebApplication {

	public static void main(String[] args) {
		SpringApplication.run(MywebApplication.class, args);
	}

}

這段程式碼是 Spring Boot 應用程式的主類別 MywebApplication。讓我們來解釋它的功能：

  1. @SpringBootApplication: 這是 Spring Boot 應用程式的入口點，它結合了多個標註，包括 @Configuration、@EnableAutoConfiguration 和 @ComponentScan。它表示這是一個 Spring Boot 應用程式，並且會掃描該類別所在的包及其子包以尋找 Spring Bean。

  2. @ComponentScan: 這個標註指定了要掃描的基礎包。在這個案例中，它會掃描 com.tzu.controllers、com.tzu.config 和 com.tzu.service 這些包，以尋找 Spring Bean，這些 Bean 將被管理和自動配置。

  3. public static void main(String[] args): 這是應用程式的進入點。當你執行這個應用程式時，它會啟動 Spring Boot 應用程式並初始化你的應用程式。

總的來說，這個主類別設定了 Spring Boot 應用程式，定義了要掃描的包，並啟動了 Spring Boot 應用程式。這是一個經典的 Spring Boot 應用程式的啟動點。

測試http://localhost:8080/api/hello/helloworld/rawdata

再改程式碼:

看API:https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/GetMapping.html

依照:MIME Type:https://metadata.teldap.tw/elearning/doc/MIME_Type.pdf

package com.tzu.service;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

//設計一個RESTful Service
@RestController
public class HelloService {
	
	//提供一個回應字串訊息 查詢作業(GET)
	//produces 決定Http Response Header Content-Type 
	@GetMapping(path="/api/hello/helloworld/rawdata",produces= "text/plain")
	public String helloWorld() {
		return "<font size='7' color='red'>您好</font>";
	}

}

這是一個簡單的 Spring Boot RESTful Service 的程式碼，它對外提供一個 GET 請求端點 /api/hello/helloworld/rawdata，並返回純文字內容 "您好"，Content-Type 被設定為 text/plain。

  • @RestController: 這個標註指示這是一個 RESTful 控制器，用於處理 HTTP 請求和回應。

  • @GetMapping: 這是一個簡單的 HTTP GET 方法的註釋。它將 /api/hello/helloworld/rawdata 映射到 helloWorld() 方法。

  • produces = "text/plain": 這個部分指定了 HTTP 響應的 Content-Type 為純文字 (text/plain)。這表示回傳的內容將被視為純文字。

  • helloWorld() 方法: 這個方法將回傳 "您好" 作為純文字內容。

簡單來說，當你對這個端點發送 GET 請求時，它將返回純文字 "您好"。這在 RESTful 服務中很常見，通常用於提供簡單的文本或資料。

測試顯示就是文字的設定:http://localhost:8080/api/hello/helloworld/rawdata

謝謝大家收看
/images/emoticon/emoticon41.gif


上一篇
Springboot~下載jQuery
下一篇
Springboot~跳出對話框
系列文
自己開發一個~? 共 30 篇
  1. 26
    Springboot~新增產生對話盒
  2. 27
    Springboot~安全性配置RESTful API
  3. 28
    Springboot~security
  4. 29
    Springboot~做RBAC
  5. 30
    Springboot~明年見
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙