邯郸网站建设代理,wordpress内存溢出,婚庆公司怎么找,网站防御怎么做1、第一阶段邪修实战总览#xff08;9.1-9.30#xff09;
把第一阶段#xff08;基础夯实期#xff09;的学习计划拆解成极具操作性的每日行动方案。这个计划充分利用我“在职学习”的特殊优势#xff0c;强调“用输出倒逼输入”#xff0c;确保每一分钟的学习都直接服务…
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 langzh-CN
headmeta charsetUTF-8title广告数据管理面板/title!-- 引入Bootstrap CSS用于快速美化页面无需自己写CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css relstylesheet
/head
body classcontainer mt-4h1广告数据管理/h1
p这是一个调用后端API的简易管理界面。/p!-- 数据展示表格 --
h2 classmt-4数据列表/h2
table classtable table-striped table-bordered idadTabletheadtrthID/thth广告日期/thth广告花费/thth线索数量/thth私信数量/th/tr/theadtbody!-- 数据会通过JavaScript动态填充到这里 --/tbody
/table!-- 添加数据的表单 --
h2 classmt-4添加新广告/h2
form idadForm classmb-5div classmb-3label classform-label广告日期/labelinput typetext classform-control namedate required/divdiv classmb-3label classform-label广告花费/labelinput typenumber classform-control namecost required/divdiv classmb-3label classform-label线索数量/labelinput typenumber step0.01 classform-control nameleadCount required/divdiv classmb-3label classform-label私信数量/labelinput typenumber step0.01 classform-control namemessageCount required/divbutton typesubmit classbtn btn-primary提交/button
/form!-- 引入jQuery简化JS操作和自定义的JS脚本 --
script srchttps://cdn.jsdelivr.net/npm/jquery3.6.0/dist/jquery.min.js/script
script srcjs/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[namedate]).val(),cost: $(input[namecost]).val(),leadCount: parseInt($(input[nameleadCount]).val()),messageCount: parseInt($(input[namemessageCount]).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就可以看到啦~ 总结
“基于库”的模式
我们没有深入学习前端的框架而是采用“基于库BootstrapjQuery”的模式快速构建了一个用于演示和测试的后台管理页面。我们的主要精力是打算主公后端的API开发但是为了完整的演示项目我们页自学了一些jQury的Ajax技术来调用我们写的接口并使用了Bootstrap进行快速布局。这让我们对前后端交互的全流程有了更深刻的理解。虽然前端不是我们的主攻方向但是我们也已经具备了与前端工程师协同开发的能力。接下来我们详细拆解一下 “基于库Bootstrap jQuery”的模式。这是一种经典的前端开发方式非常适合后端开发者快速构建界面和理解前端原理。
核心思想与“框架模式”对比
要理解它最好先对比一下现代的“框架模式”如VueReactAngular。
特性基于库的模式 (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 stylebackground-color: #007bff; color: white; padding: 6px 12px; border-radius: 4px; border: none;一个按钮/button!-- 有Bootstrap --
button classbtn 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是如何被消费的。
