昨天颱風超大~
原來預定要去某補習班考證照
原來說可以延時間~
後來又說不是六點後開考~
考前一小時才說不能改
然後我就浪費一次考試錢了
修改前程式碼
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>";
}
}
修改程式碼
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>";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/raw",produces="text/plain")
public String helloWorldParam(String who) {
return who+" 您好";
}
}
這是一個更進一步的 Spring Boot RESTful Service，它包含了兩個 GET 端點，分別是 /api/hello/helloworld/rawdata 和 /api/hello/helloworld/raw。
/api/hello/helloworld/rawdata：
text/plain) 形式回傳。<font size='7' color='red'>您好</font>。/api/hello/helloworld/raw：
text/plain) 內容。who 的參數，它可以通過 Query String 來提供。根據 who 的值，它會返回一個以 who 為參數的 "您好" 訊息。這兩個端點提供了簡單的回應，其中一個是固定的訊息，另一個則會根據提供的 who 參數動態生成回應。
測試:http://localhost:8080/api/hello/helloworld/raw?who=eric
再修改程式碼:
package com.tzu.service;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
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>";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/raw",produces="text/plain")
public String helloWorldParam(String who) {
return who+" 您好";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/raw2",produces="text/plain")
public String helloWorldParam2(@RequestParam(name="w")String who) {
return who+" Hello World";
}
}
這個更新後的 Spring Boot RESTful Service 仍然包含了兩個 GET 端點，但現在我們改進了如何接收互動資訊：
/api/hello/helloworld/raw：
text/plain) 內容。who 參數，這次使用了 @RequestParam 注解。這意味著 who 參數現在需要透過 Query String 提供，例如 api/hello/helloworld/raw?who=John。who 的值，它會返回一個以 who 為參數的 "您好" 訊息。/api/hello/helloworld/raw2：
text/plain) 內容。w，同樣是透過 @RequestParam 注解。它的 Query String 會是 api/hello/helloworld/raw2?w=Alice。w 的值，它會返回一個以 w 為參數的 "Hello World" 訊息。這樣，你可以通過不同的 Query String 參數值來獲得不同的回應。這種方式更具彈性，因為它允許客戶端以不同方式互動。
顯示http://localhost:8080/api/hello/helloworld/raw2?w=sonia
再修改CODE
package com.tzu.service;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
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>";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/raw",produces="text/plain")
public String helloWorldParam(String who) {
return who+" 您好";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/raw2",produces="text/plain")
public String helloWorldParam2(@RequestParam(name="w")String who) {
return who+" Hello World";
}
//互動資訊採用QueryString
@GetMapping(path="/api/hello/helloworld/who/{who}/raw",produces="text/plain")
public String helloWorldParam3(@PathVariable(name="who")String who) {
return who+" 吃飽沒";
}
}
這個 Spring Boot RESTful Service 有了一個新的 GET 端點：
/api/hello/helloworld/who/{who}/raw：
text/plain) 內容。@PathVariable 注解，它會將 URL 中的 {who} 變數捕獲並傳遞給 who 參數。/api/hello/helloworld/who/John/raw 或 /api/hello/helloworld/who/Alice/raw，具體取決於你想要使用的名稱。{who} 參數的值形成 "吃飽沒" 訊息。這樣，你可以透過 URL 中的 {who} 部分，動態設定不同的名稱，並獲得不同的回應。這是 RESTful API 常見的做法，以支援更多互動方式。
測試http://localhost:8080/api/hello/helloworld/who/Bill/raw
再新增一個檔案:
package com.tzu.service;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CustomerService {
//傳遞一份Json進來 進行相對客戶更新作業
@PutMapping(path="/api/customers/update/rawdata")
public void customersUpdate() {
}
}
這個 Spring Boot RESTful Service 創建了一個 PUT 端點 /api/customers/update/rawdata 來處理客戶更新作業。但在你的代碼中，customersUpdate 方法是空的，並沒有實際的邏輯。通常，你會在這個方法中處理客戶更新的相關邏輯，包括接收 JSON 數據，解析它，然後執行更新操作。
再修改程式碼,使用到json:
package com.tzu.service;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.tzu.domain.Customers;
@RestController
public class CustomerService {
//傳遞一份Json進來 進行相對客戶更新作業
@PutMapping(path="/api/customers/update/rawdata",
consumes="application/json",produces="application/json")
public Customers customersUpdate(@RequestBody Customers customers) {
return customers;
}
}
Spring Boot RESTful Service 代碼看起來已經可以處理客戶更新的請求了。以下是你的代碼的概要：
@PutMapping 註釋表示該方法處理 HTTP PUT 請求。@RequestBody 註釋表示該方法將接收請求主體中的 JSON 數據並將其映射到 Customers 對象。consumes 屬性確保僅處理 application/json 媒體類型的請求。produces 屬性確保該方法的響應將以 application/json 媒體類型返回。最後，將客戶的更新操作實現在這個方法中，然後返回更新後的 Customers 對象。
總結， Spring Boot 服務現在已經可以接受 JSON 數據進行客戶更新操作。如果需要進一步的邏輯處理，你可以在 customersUpdate 方法中添加相關的代碼。
下載Postman:https://www.postman.com/downloads/
調整設定
關掉SSL
預設黑色
建立workspace
選Personal
選PUT
選Body>raw>JSON
打入資料
{
"customerid":"C0002",
"companyname":"中華電信",
"address":"台北市仁愛路",
"phone":"02-12345678",
"email":"cht@cht.com.tw",
"country":"中華民國"
}
注入成功顯示:
做資料修改:sql語法?就是可能改過
update customers set companyname=?,address=?,phone=?,email=?,country=? where customerid=?
看目前資料庫顯示:
修改程式碼:
package com.tzu.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.tzu.domain.Customers;
@RestController
public class CustomerService {
//Data Field注入JdbcTemplate
@Autowired
private JdbcTemplate jdbcTemplate;
//傳遞一份Json進來 進行相對客戶更新作業
//方法參數 採用參數注入Parameter Injection
@PutMapping(path="/api/customers/update/rawdata",
consumes="application/json",produces="application/json")
public Customers customersUpdate(@RequestBody Customers customers) {
//更新客戶資料
String sql="update customers set companyname=?,address=?,phone=?,email=?,country=? where customerid=?";
int affect=jdbcTemplate.update(sql,
//Lambda PreparedStatementSetter interface
(st)->{
//注入PreparedStatement物件，設定參數內容
st.setString(1, customers.getCompanyname());
st.setString(2, customers.getAddress());
st.setString(3, customers.getPhone());
st.setString(4, customers.getEmail());
st.setString(5, customers.getCountry());
st.setString(6, customers.getCustomerid());
}
);
return customers;
}
}
已成功將 JdbcTemplate 注入到 CustomerService 中，並使用它來執行 SQL 更新操作。你的 customersUpdate 方法接受一個 Customers 對象，然後使用 JdbcTemplate 執行 SQL 更新語句。
使用了 jdbcTemplate.update() 方法來執行 SQL 更新，並使用 lambda 表達式編寫 PreparedStatementSetter 接口的實現，設定 SQL 語句中的參數。這是一個良好的實踐，可以確保安全地處理 SQL 語句中的參數。
最後，將更新後的 Customers 對象返回作為響應。
這樣的設置應該允許進行客戶資料的更新操作。如果需要進一步的錯誤處理或其他邏輯，可以在 customersUpdate 方法中進一步擴展。
用POSTMAN填入要修改的資料看是否有改過:
看資料庫顯示有更改~
加入Message
package com.tzu.domain;
//服務處理之後回應訊息內容(Json)
public class Message implements java.io.Serializable {
private int code;
private String msg;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
這個 Message 類別看起來像是用於將服務處理之後的回應訊息轉為 JSON 格式的模型類別。它包括以下屬性：
code：一個整數，代表訊息的狀態碼。msg：一個字串，包含有關訊息的描述性信息。通常，這樣的類別用於定義 RESTful 服務的響應格式。根據你的程式碼，當你的服務處理完成後，你可以設定 code 和 msg 屬性以反映服務的結果，然後將 Message 物件轉換為 JSON 格式以返回給客戶端。
這是一個通用的方法，以在 RESTful 服務中傳遞結果和錯誤訊息。客戶端可以解析 JSON 以獲取訊息的狀態和詳細訊息。
修改程式碼:
package com.tzu2.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.tzu2.domain.Customers;
import com.tzu2.domain.Message;
@RestController
public class CustomerService {
//Data Field注入JdbcTemplate
@Autowired
private JdbcTemplate jdbcTemplate;
//傳遞一份Json進來 進行相對客戶更新作業
//方法參數 採用參數注入Parameter Injection
@PutMapping(path="/api/customers/update/rawdata",
consumes="application/json",produces="application/json")
public Message customersUpdate(@RequestBody Customers customers) {
Message message=new Message();
//更新客戶資料
String sql="update customers set companyname=?,address=?,phone=?,email=?,country=? where customerid=?";
try{
int affect=jdbcTemplate.update(sql,
//Lambda PreparedStatementSetter interface
(st)->{
//注入PreparedStatement物件，設定參數內容
st.setString(1, customers.getCompanyname());
st.setString(2, customers.getAddress());
st.setString(3, customers.getPhone());
st.setString(4, customers.getEmail());
st.setString(5, customers.getCountry());
st.setString(6, customers.getCustomerid());
}
);
if(affect>0) {
message.setCode(200);
message.setMsg("客戶資料更新成功");
}else{
message.setCode(200);
message.setMsg("查無客戶資料更新");
}
}catch(DataAccessException ex){
message.setCode(400);
message.setMsg("客戶資料更新失敗");
}
return message;
}
}
這段程式碼是使用Spring Boot實作RESTful API來更新資料庫客戶資料。
以下是部分解析:
@RestController註解聲明這是一个REST控制器。
@Autowired自動注入JdbcTemplate bean來訪問資料庫。
@PutMapping註解聲明這是一个PUT請求處理方法,path是API路徑。
@RequestBody注解將請求body解析到Customers對象。
使用JdbcTemplate執行更新語句更新客戶資料。
Lambda表达式實作PreparedStatementSetter介面來設定SQL參數。
捕獲DataAccessException異常。
返回一個Message對象來表示請求結果。
總結為:
這段代碼運用了Spring Boot的特性,展示了REST API開發的典型做法。
修改程式碼:
package com.tzu.controllers;
import java.util.List;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.tzu.domain.Customer;
import com.tzu.domain.Customers;
@Controller
@RequestMapping(path="/customers")
public class CustomersController {
//Attribute(Data Field) Field Injection
@Autowired
private JdbcTemplate jdbcTemplate; //DataSource會注入控制反轉
//查詢功能設計
@RequestMapping(path="/qry/country",
method= {RequestMethod.GET,RequestMethod.POST})
public String customersQry(String country,Model model) {
//是否第一次請求 沒有傳遞國家別
if(country==null) {
return "customersqrycountry"; //View Page名稱
}else {
System.out.println("查詢國家別:"+country);
DataSource ds=jdbcTemplate.getDataSource();
System.out.println(ds.toString());
//1.採用DAO設計模式(Spring Boot data jdbc)
String sql="SELECT ID,name,address,phone,country "
+ "FROM sakila.customer_list where country=?";
//2.進行國家別相關客戶查詢
List<Customer> result=jdbcTemplate.query(sql,
//傳遞一個程序當作參數(RowMapper/maprow 介面) 使用Lambda
//查詢符合每一筆 逐筆傳遞進來callback 自訂程序封裝結果
(rs,num)->{
//將相對紀錄封裝成自訂JavaBean-Customer
Customer customer=new Customer();
//注入相對記錄欄位於JavaBean物件中
customer.setId(rs.getShort("ID"));
customer.setName(rs.getString("name"));
customer.setAddress(rs.getString("address"));
customer.setPhone(rs.getString("phone"));
customer.setCountry(rs.getString("country"));
return customer;
},
country
);
System.out.println("查詢結果:"+result.size());
//透過注入Model持續查詢結果物件到View Page
model.addAttribute("result",result);
model.addAttribute("country",country);
//3.查詢結果狀態管理 調用View Page去進行查詢結果渲染(使用thymeleaf template engine)
//採用postback 回來 要進行查詢
return "customersqrycountry";
}
}
//查詢客戶所有資料，將查詢結果產生(後端List<>) to 前端的JavaScript 陣列(封裝每一筆資料物件)
//只要超連結方式點選到這裡 採用GET
@GetMapping(path="/allcustomers")
public String customesAll(Model model) {
//1.借助注入進來的JdbcTemplate 進行客戶資料customers所有記錄查詢
String sql="select customerid,companyname,address,phone,email,country from customers";
List<Customers> result=
jdbcTemplate.query(sql,
BeanPropertyRowMapper.newInstance(Customers.class));
System.out.println("記錄數:"+result.size());
//2.查詢結果是一個List集合物件 如何轉換成JavaScript 陣列???
model.addAttribute("data",result);
//3調用頁面
return "customersall";
}
}
這段程式碼是一個 Spring Boot 應用程式中的控制器 (CustomersController)，用於處理有關客戶資料的 HTTP 請求。以下是它的主要功能：
@Controller 和 @RequestMapping: 標示這是一個 Spring 控制器，並設定基本路徑 "/customers"。
@Autowired private JdbcTemplate jdbcTemplate: 通過 Spring 的依賴注入，注入了一個 JdbcTemplate 物件，這可用於執行 SQL 查詢。JdbcTemplate 是 Spring 提供的 JDBC 庫的一部分，簡化了 JDBC 操作。
customersQry 方法: 這是用於處理查詢客戶資料的 HTTP GET 或 POST 請求的方法。它檢查是否收到 "country" 參數，如果沒有，則返回 "customersqrycountry" 的視圖名稱以顯示查詢輸入頁面，否則進行實際的資料查詢。
customesAll 方法: 這是用於處理顯示所有客戶資料的 HTTP GET 請求的方法。它執行 SQL 查詢以檢索所有客戶資料，並將查詢結果存儲在 data 屬性中，然後返回 "customersall" 視圖名稱，以顯示客戶資料。
這些方法的主要功能是處理 HTTP 請求，執行 SQL 查詢，並將結果傳遞給視圖，以便將其顯示給使用者。
用POSTMAN測試
修改前端產生非同步處理，程式碼:
<!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>
<h3>{{message}}</h3>
</fieldset>
</fieldset>
<script>
//使用jquery selector挑選文件物件 .ready() 綁定聆聽已經完整下載之後引發事件
$(document).ready(
//事件程序
function(){
//alert('hi jquery');
}
);
//建構Vue物件
var app=new Vue(
{
//資料模組
data:{
customerList:[], //空陣列
rowIndex:-1, //挑選的相對順序
curCustomers:{}, //相對列 相對客戶物件
message:'' //異動資料回乎訊息
},
//設定Vue支援共用程序 或者事件程序綁定來源
methods:{
//聆聽編輯按鈕被觸發
editHandler:function(e){
//reset
this.message='';
//取出按鈕的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 進行非同步處理更新後端資料
//1建構一個XMLHttpRequest物件
let xhr=new XMLHttpRequest();
//2.設定開啟遠端服務位址
xhr.open('PUT','../api/customers/update/rawdata');
//沒有設定Request Header Content-Type:application/json
xhr.setRequestHeader("Content-Type","application/json")
//進行非同步 採用輪詢 必須設定callback程序進行處理
xhr.onreadystatechange=function(e){
if(xhr.readyState==4 && xhr.status==200){
//取出資料(JSON String)
let resultString=xhr.responseText;
//String反序列化成物件
let result=JSON.parse(resultString);
//使用app指定Vue物件成員
app.message=result.msg;//將訊息指派給Vue資料庫模組
console.log(resultString);
}
}
//JSON內容
let jsonString=JSON.stringify(app.curCustomers);
console.log(jsonString);
//正式送出去
xhr.send(jsonString);
}
},
{
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 頁面，主要用於顯示客戶清單，提供編輯客戶資料的功能。以下是一些關鍵部分：
頁面中使用了 Vue.js，jQuery，Bootstrap，以及其他相關的庫和樣式。
使用 Vue.js，你將資料 (data) 和事件處理 (methods) 與 HTML 頁面結合在一起。Vue.js 使你能夠建立一個動態的前端應用程序。
在 Vue 中，v-for 用於迭代客戶清單 (customerList) 中的每個客戶，並渲染到表格中。v-on:click 用於註冊 editHandler 函數，當編輯按鈕被點擊時，它會觸發 editHandler 函數。
editHandler 函數是一個 Vue 方法，它在編輯按鈕被點擊時被調用。它用於獲取所選客戶的資料，高亮所選行，並打開編輯對話框。
在編輯對話框中，當按下 "更新" 按鈕時，它會執行非同步的 PUT 請求到後端 API (/api/customers/update/rawdata)，將編輯後的客戶資料送到後端進行更新。
整體來說，這個頁面用於顯示客戶清單，以及允許編輯客戶資料。Vue.js 用於監聽事件和管理頁面的狀態，以實現這些功能。
用瀏覽器測試:http://localhost:8080/customers/allcustomers
謝謝大家收看
iThome鐵人賽
看影片追技術