当前位置：首页 > news >正文

邪修实战系列（5）

news 2025/9/16 8:21:40

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，所以直接打开就行。
这个时候我们就可以看到我们的页面了，如下图所示：
我们也可以在表单中填写数据，再点击提交，注意格式。提交后页面会显示”添加成功“，并且表格会自动清空我们填写的表单，表格中也会自动显示出我们刚才添加的数据。

总结

“基于库”的模式

我们没有深入学习前端的框架，而是采用“基于库（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是如何被消费的。