个人博客｜近半月代码编程学习实战记录（完整复盘）

时间：2026年9月20日 - 10月4日

前言：
过去半个月没有进行碎片化的无效学习，全部聚焦实战落地、项目复用、问题排错为主，摒弃了纯理论背诵，所有知识点均为亲手编写代码、调试踩坑、上线验证后总结所得。本篇完整记录近半月我的所有代码编写、功能开发、BUG修复、技术沉淀内容，方便后续复盘复用。

一、前端代码实战学习（手写原生+适配优化）

近半月重点深耕原生代码手写能力，不再依赖框架模板，从零编写多个实用页面模块，锻炼代码功底。

1. 原生HTML+CSS手写静态页面

亲手从零编写3套完整静态页面，全程无套用模板，纯手写标签与样式：

• 个人技术博客首页：完成导航栏、轮播布局、文章卡片、侧边栏、页脚全套结构，实现响应式适配，手机/电脑端自动适配布局。
• 项目展示落地页：模块化划分作品展示区、功能介绍区、关于我板块，使用 Flex + Grid 混合布局，解决传统浮动布局错位、高度塌陷问题。
• 简洁日志记录页：极简留白设计，优化字体层级、行高、间距，掌握了前端基础排版规范。

2. JavaScript 原生功能手写开发

放弃插件依赖，纯JS手写多个高频实用功能，全部代码逐行调试运行成功：

• 页面动态时间渲染：实时更新年月日、星期、时分秒，自动补零，适配页面展示。
• 回到顶部功能：监听滚动条高度，滚动超过阈值显示按钮，点击平滑滚动至顶部，优化滚动卡顿问题。
• 文章折叠/展开功能：通过点击事件切换class类名，实现内容隐藏、展开动态效果。
• 本地存储备忘录：利用 localStorage 实现数据本地保存，刷新页面数据不丢失，支持新增、删除记录。

踩坑记录

• 初始编写定时器时，未做定时器清除，页面切换导致时间叠加卡顿，最终通过页面卸载清除定时器解决。
• 本地存储数组数据无法直接保存，学会使用 JSON.stringify / JSON.parse 完成数据转换存储。

二、后端&脚本编程实战（重点突破）

这半个月核心突破自动化脚本、接口简易调试、数据处理，手写大量功能性代码，实现自动化办公与数据监控。

1. Python 脚本手写实战

独立编写多个实用小脚本，全部本地运行调试成功：

• 批量文件重命名脚本：遍历指定文件夹，批量修改文件名称、后缀，解决手动改名低效问题，适配日常文件整理。
• 简单数据筛选统计脚本：读取本地文本数据，筛选有效数据、剔除空值与重复数据，自动统计数量并输出结果。
• 接口简易请求脚本：手写GET/POST请求代码，模拟接口请求、接收返回数据，学会解析JSON格式返回内容。

2. 简易接口与数据处理

手写基础数据处理逻辑，学会对接口返回的结构化数据进行提取、筛选、遍历、打印，不再依赖工具可视化查看数据，具备基础的后端数据处理思维。

三、服务器&运维代码/配置实操（重点落地）

这是近半月落地最多、实用性最强的学习内容，所有配置均为亲手操作、手写配置、调试上线，无一键部署。

1. 宝塔面板运维配置实操

亲手完成多项服务器安全与站点运维配置，全程记录配置代码与操作逻辑：

• IP黑名单拦截配置：手动编写拦截规则，配置宝塔防火墙，屏蔽恶意访问IP、高频扫描IP，提升服务器安全性。
• 站点环境配置：手动配置PHP版本、伪静态规则、运行目录，解决网站访问404、页面打不开、资源加载失败问题。
• 服务器重启&异常排查：熟练掌握云端服务器重启、进程查看、日志查看方法，能够快速定位网站无法访问的基础问题。

2. 域名跳转&路由配置

手写配置域名301永久跳转规则，实现二级域名统一跳转主域名，解决权重分散、访问混乱问题。

四、半月学习总结

不再只看视频学理论，坚持写代码、踩坑、修复、复盘。前端原生基础更加扎实，能够独立完成静态页面与简单交互；学会Python脚本简化重复工作；服务器运维的基础配置、排错能力得到锻炼。

下一阶段计划：继续练习接口开发，尝试写简单后端服务，学习日志采集，搭建简易监控页面。