1、第一階段邪修實戰總覽（9.1-9.30）
把第一階段（基礎夯實期）的學習計劃拆解成極具操作性的每日行動方案。這個計劃充分利用我“在職學習”的特殊優勢，強調“用輸出倒逼輸入”，確保每一分鐘的學習都直接服務于面試和實戰。
- 核心目標：構建起Java后端開發的知識樹主干，并能通過一個小型項目串聯起所有知識點。
- 核心策略：每天3小時雷打不動的高效學習（工作日可分散，周末集中攻堅）。
2、目標（9.1-9.14）
Java核心+Sprig Boot破冰，能獨立使用Spring搭建Web后端并提供RESTful接口。
3、分日目標與邪修技巧
3.1、Day 13-14：邪修前端速成
- 行動：創建一個index.html頁面，能通過表格展示廣告數據，并通過表單添加新數據。
- 邪修技巧：證明了深刻理解前后端分離架構的核心，后端只提供RESTful API（已實現），前端（無論是網頁、手機APP、小程序）只需要調用這些API即可。
3.1.1、學習分享
第一步：創建前端文件
- 在Spring Boot項目的
src/main/resources/static/目錄下，創建一個名為index.html的文件。
第二步：編寫基礎HTML骨架和表格（用戶展示數據） - 將以下代碼復制到
index.html中：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>廣告數據管理面板</title><!-- 引入Bootstrap CSS，用于快速美化頁面，無需自己寫CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4"><h1>廣告數據管理</h1>
<p>這是一個調用后端API的簡易管理界面。</p><!-- 數據展示表格 -->
<h2 class="mt-4">數據列表</h2>
<table class="table table-striped table-bordered" id="adTable"><thead><tr><th>ID</th><th>廣告日期</th><th>廣告花費</th><th>線索數量</th><th>私信數量</th></tr></thead><tbody><!-- 數據會通過JavaScript動態填充到這里 --></tbody>
</table><!-- 添加數據的表單 -->
<h2 class="mt-4">添加新廣告</h2>
<form id="adForm" class="mb-5"><div class="mb-3"><label class="form-label">廣告日期</label><input type="text" class="form-control" name="date" required></div><div class="mb-3"><label class="form-label">廣告花費</label><input type="number" class="form-control" name="cost" required></div><div class="mb-3"><label class="form-label">線索數量</label><input type="number" step="0.01" class="form-control" name="leadCount" required></div><div class="mb-3"><label class="form-label">私信數量</label><input type="number" step="0.01" class="form-control" name="messageCount" required></div><button type="submit" class="btn btn-primary">提交</button>
</form><!-- 引入jQuery（簡化JS操作）和自定義的JS腳本 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
- 這就是一個簡單的前端頁面，可以點擊IDEA的預覽看一下
第三步：編寫JavaScript邏輯（調用API的核心） - 在
scr/main/resources/static/目錄下，創建一個js文件夾。 - 在
js文件夾中，創建main.js文件。 - 將以下代碼復制到main.js中：
// 頁面加載完成后執行
$(document).ready(function() {// 1. 加載并顯示所有數據loadAds();// 2. 監聽表單提交事件$('#adForm').on('submit', function(event) {event.preventDefault(); // 阻止表單默認提交行為// 收集表單數據，并轉換成JSON對象const formData = {date: $('input[name="date"]').val(),cost: $('input[name="cost"]').val(),leadCount: parseInt($('input[name="leadCount"]').val()),messageCount: parseInt($('input[name="messageCount"]').val())};// 3. 發送POST請求到后端API$.ajax({type: 'POST',url: '/api/ads', // 這是你后端Controller的地址contentType: 'application/json', // 告訴后端發送的是JSONdata: JSON.stringify(formData), // 將JS對象轉換為JSON字符串success: function(data) {// 請求成功alert('添加成功！');$('#adForm')[0].reset(); // 清空表單loadAds(); // 重新加載表格數據},error: function() {// 請求失敗alert('添加失敗，請檢查控制臺日志！');}});});
});// 加載廣告數據的函數
function loadAds() {$.ajax({type: 'GET',url: '/api/ads', // 調用GET接口success: function(date) {// 清空表格現有數據$('#adTable tbody').empty();// 遍歷返回的數據數組$.each(date, function(index, ad) {// 將每條數據追加為表格的一行$('#adTable tbody').append('<tr>' +' <td>' + ad.id + '</td>' +' <td>' + ad.date + '</td>' +' <td>' + ad.cost + '</td>' +' <td>' + ad.leadCount + '</td>' +' <td>' + ad.messageCount + '</td>' +'</tr>');});},error: function() {alert('加載數據失敗！');}});
}
第四步：測試與驗證
-
啟動Spring Boot應用
-
打開瀏覽器，訪問
https://localhost:8080。注意，Spring Boot默認會自動定位到Static/index.html，所以直接打開就行。 -
這個時候我們就可以看到我們的頁面了，如下圖所示：
-
我們也可以在表單中填寫數據，再點擊提交，注意格式。提交后頁面會顯示”添加成功“，并且表格會自動清空我們填寫的表單，表格中也會自動顯示出我們剛才添加的數據。
-
這個前端頁面雖然簡單，但它將我們的項目從一個“只能用Postman測試的后端”升級為了一個“可視化的完整應用”，在我們的項目履歷上是畫龍點睛的一筆。全部代碼老規矩放到了Github上，點擊Data_Board_Maven_UI就可以看到啦~
總結
“基于庫”的模式
- 我們沒有深入學習前端的框架，而是采用“基于庫（Bootstrap+jQuery）”的模式，快速構建了一個用于演示和測試的后臺管理頁面。
- 我們的主要精力是打算主公后端的API開發，但是為了完整的演示項目，我們頁自學了一些jQury的Ajax技術來調用我們寫的接口，并使用了Bootstrap進行快速布局。這讓我們對前后端交互的全流程有了更深刻的理解。雖然前端不是我們的主攻方向，但是我們也已經具備了與前端工程師協同開發的能力。
- 接下來我們詳細拆解一下 “基于庫（Bootstrap + jQuery）”的模式。這是一種經典的前端開發方式，非常適合后端開發者快速構建界面和理解前端原理。
核心思想：與“框架模式”對比
要理解它，最好先對比一下現代的“框架模式”（如Vue，React，Angular）。
| 特性 | 基于庫的模式 (Bootstrap + jQuery) | 基于框架的模式 (Vue/React) |
|---|---|---|
| 核心 | 使用多個獨立的庫（Library），每個庫解決一個特定問題。你主導整個程序的流程。 | 使用一個全面的框架（Framework），它提供一套完整的規則和架構，你在它的規則下編寫代碼。 |
| 工作方式 | 命令式編程 (Imperative)：你需要“命令”瀏覽器一步步具體該怎么做。 例如：“找到那個按鈕，給它加個點擊監聽器，當點擊時，再去找到那個div，把它的內容改成XXX。” | 聲明式編程 (Declarative)：你聲明“界面應該是什么樣子”（UI = f(data)），框架會自動幫你完成DOM操作。 例如：你聲明數據 buttonText，在模板中寫 {{ buttonText }}，改變數據，視圖自動更新。 |
| DOM 操作 | 直接操作 DOM：你需要使用 jQuery 的方法 ($('#elementId')) 來查找、修改、刪除DOM元素。 | 虛擬 DOM (Virtual DOM)：你操作的是“數據”，框架會計算出數據變化后UI應有的樣子，然后高效地更新真實DOM。 |
| 組件化 | 弱組件化：頁面是由一個個獨立的HTML片段和JS邏輯拼湊而成的，復用性和組織性較差。 | 強組件化：頁面是由一個個組件（包含模板、邏輯、樣式）像搭積木一樣構建的，復用性、可維護性極高。 |
| 學習曲線 | 平緩：每個庫功能單一，上手快，可以立即看到效果。 | 陡峭：需要理解框架的核心概念（如狀態、生命周期、組件通信、路由、狀態管理等），入門門檻較高。 |
| 適用場景 | 快速開發內部工具、管理系統、簡單頁面、需要與傳統老項目兼容、后端開發者臨時需要寫前端界面。 | 開發復雜的單頁面應用 (SPA)、大型商業項目、需要高度交互和狀態管理的現代Web應用。 |
核心庫解析
Bootstrap（一個CSS/UI框架）
- 是什么：這個庫是一個預定義CSS樣式和現成UI組件的工具包。
- 能解決的問題：讓我們可以不用從頭設計按鈕、表格、表單、彈窗的樣式和響應式布局。
- 使用方法：我們可以通過給我們的HTML元素添加Bootstrap定義好的==類（Class）==來使用它。
<!-- 沒有Bootstrap -->
<button style="background-color: #007bff; color: white; padding: 6px 12px; border-radius: 4px; border: none;">一個按鈕</button><!-- 有Bootstrap -->
<button class="btn btn-primary">一個更好看、且自帶交互效果的按鈕</button>
-
- 優勢：極大地加快了界面構建速度，并且默認是響應式的，能自動適配手機和電腦屏幕。
jQuery（一個JavaScript庫）
- 是什么：一個為了簡化原生JavaScript操作而生的庫。在早期瀏覽器兼容性很差的年代，它是救世主。
- 解決的問題：
-
- 簡化DOM操作：讓查找、修改HTL元素變得極其簡單。
// 原生JS (冗長)
document.getElementById("myElement").style.color = "red";// jQuery (簡潔)
$('#myElement').css('color', 'red');
-
- 簡化事件處理：非常方便地給元素綁定點擊、鼠標移動等時間。
$('#myButton').on('click', function() {alert('按鈕被點擊了！');
});
-
- 簡化Ajax請求：用幾行代碼就能輕松地與后端API進行數據交互，這也是你當前項目中最核心的用途。
$.ajax({url: '/api/data',type: 'GET',success: function(data) {// 請求成功，處理數據console.log(data);}
});
-
- 優勢：API設計非常人性化，寫起來省時省力。其“Write less, do more”（寫得更少，做得更多）的理念深入人心。
選擇原因
- 在我們的個人學習項目中，為了快速實現一個用于演示和測試后端API的管理界面，我選擇了Bootstrap和jQuery的組合。這是一個非常高效實用的技術選型：
Bootstrap 讓我能毫不費力地構建出美觀且響應式的用戶界面，我不必在前端樣式上花費過多時間。
jQuery 則極大地簡化了DOM操作和Ajax調用，讓我能專注于前后端數據交互的邏輯實現。 - 這個選擇讓我在極短時間內就完成了全棧流程的閉環，雖然它們不是最前沿的技術，但完美地匹配了項目‘快速驗證、直觀演示’的目標。通過這個過程，我也深刻理解了前后端分離架構中，API是如何被消費的。
