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

从零打造个人博客静态页面与TodoList应用：前端开发实战指南

news 来源：原创 2025/8/12 16:18:01

前言

在当今数字时代，拥有个人博客和高效的任务管理工具已成为开发者展示自我和提升生产力的标配。本文将带你从零开始，通过纯前端技术实现一个兼具个人博客静态页面和TodoList任务管理功能的综合应用。无论你是前端新手还是希望巩固基础的中级开发者，这个项目都将为你提供宝贵的实战经验。

一、项目概述与设计

1.1 为什么选择这个组合项目？

博客页面和TodoList看似是两个独立的功能，但它们的组合能带来以下优势：

展示与实用结合：博客展示你的技术思考，TodoList管理你的创作任务
技术覆盖面广：涵盖HTML结构设计、CSS布局美化、JavaScript交互逻辑
可扩展性强：为后续添加后端功能（如用户认证、数据持久化）奠定基础

1.2 技术选型

我们选择纯前端实现方案，确保项目轻量且易于部署：

核心三件套：HTML5 + CSS3 + JavaScript (ES6+)
CSS框架：使用Tailwind CSS实现快速样式开发（可选）
图标库：Font Awesome或Remix Icon
部署方案：GitHub Pages/Vercel/Netlify

二、博客静态页面开发

2.1 HTML结构设计

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>技术博客 | 开发者姓名</title><link rel="stylesheet" href="styles.css">
</head>
<body><header class="blog-header"><nav><div class="logo">我的技术博客</div><ul class="nav-links"><li><a href="#home">首页</a></li><li><a href="#articles">文章</a></li><li><a href="#projects">项目</a></li><li><a href="#about">关于我</a></li><li><a href="#todo">TodoList</a></li></ul></nav></header><main class="blog-container"><section id="home" class="hero-section"><h1>欢迎来到我的技术博客</h1><p>分享前端开发、算法设计与技术思考</p></section><section id="articles" class="articles-section"><h2>最新文章</h2><div class="article-card"><h3>React Hooks深度解析</h3><p class="meta">发布于2023年5月15日 · 8分钟阅读</p><p>本文将深入探讨React Hooks的工作原理和最佳实践...</p><a href="#" class="read-more">阅读全文</a></div><!-- 更多文章卡片 --></section><section id="projects" class="projects-section"><!-- 项目展示区 --></section></main><footer class="blog-footer"><p>© 2023 我的技术博客. 保留所有权利.</p></footer><script src="script.js"></script>
</body>
</html>

2.2 CSS样式美化

/* 基础样式 */
:root {--primary-color: #3498db;--secondary-color: #2ecc71;--dark-color: #2c3e50;--light-color: #ecf0f1;--danger-color: #e74c3c;
}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;margin: 0;padding: 0;
}.blog-header {background-color: var(--dark-color);color: white;padding: 1rem 2rem;position: sticky;top: 0;z-index: 100;
}nav {display: flex;justify-content: space-between;align-items: center;
}.logo {font-size: 1.5rem;font-weight: bold;
}.nav-links {display: flex;list-style: none;gap: 2rem;
}.nav-links a {color: white;text-decoration: none;transition: color 0.3s;
}.nav-links a:hover {color: var(--primary-color);
}/* 响应式设计 */
@media (max-width: 768px) {nav {flex-direction: column;}.nav-links {margin-top: 1rem;gap: 1rem;}
}/* 文章卡片样式 */
.article-card {background: white;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);padding: 1.5rem;margin-bottom: 1.5rem;transition: transform 0.3s, box-shadow 0.3s;
}.article-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}.meta {color: #7f8c8d;font-size: 0.9rem;
}.read-more {display: inline-block;color: var(--primary-color);text-decoration: none;font-weight: bold;margin-top: 0.5rem;
}.read-more:hover {text-decoration: underline;
}

三、TodoList应用实现

3.1 HTML结构

在博客页面中添加TodoList部分：

<section id="todo" class="todo-section"><h2>任务管理</h2><div class="todo-container"><div class="todo-input"><input type="text" id="todoInput" placeholder="添加新任务..."><button id="addTodoBtn">添加</button></div><div class="todo-filters"><button class="filter-btn active" data-filter="all">全部</button><button class="filter-btn" data-filter="active">待完成</button><button class="filter-btn" data-filter="completed">已完成</button></div><ul id="todoList" class="todo-list"><!-- 任务将通过JavaScript动态添加 --></ul><div class="todo-stats"><span id="remainingCount">0</span> 个任务待完成<button id="clearCompleted" class="clear-btn">清除已完成</button></div></div>
</section>

3.2 JavaScript功能实现

document.addEventListener('DOMContentLoaded', function() {// DOM元素const todoInput = document.getElementById('todoInput');const addTodoBtn = document.getElementById('addTodoBtn');const todoList = document.getElementById('todoList');const filterBtns = document.querySelectorAll('.filter-btn');const remainingCount = document.getElementById('remainingCount');const clearCompletedBtn = document.getElementById('clearCompleted');// 状态管理let todos = JSON.parse(localStorage.getItem('todos')) || [];let currentFilter = 'all';// 初始化renderTodoList();updateRemainingCount();// 事件监听addTodoBtn.addEventListener('click', addTodo);todoInput.addEventListener('keypress', function(e) {if (e.key === 'Enter') addTodo();});clearCompletedBtn.addEventListener('click', clearCompleted);filterBtns.forEach(btn => {btn.addEventListener('click', function() {filterBtns.forEach(b => b.classList.remove('active'));this.classList.add('active');currentFilter = this.dataset.filter;renderTodoList();});});// 功能函数function addTodo() {const text = todoInput.value.trim();if (text) {const newTodo = {id: Date.now(),text,completed: false,createdAt: new Date().toISOString()};todos.unshift(newTodo);saveTodos();renderTodoList();updateRemainingCount();todoInput.value = '';}}function renderTodoList() {todoList.innerHTML = '';const filteredTodos = todos.filter(todo => {if (currentFilter === 'all') return true;if (currentFilter === 'active') return !todo.completed;if (currentFilter === 'completed') return todo.completed;return true;});if (filteredTodos.length === 0) {todoList.innerHTML = '<li class="empty-message">暂无任务</li>';return;}filteredTodos.forEach(todo => {const li = document.createElement('li');li.className = `todo-item ${todo.completed ? 'completed' : ''}`;li.dataset.id = todo.id;li.innerHTML = `<input type="checkbox" ${todo.completed ? 'checked' : ''}><span class="todo-text">${todo.text}</span><button class="delete-btn">×</button><small class="todo-date">${formatDate(todo.createdAt)}</small>`;const checkbox = li.querySelector('input[type="checkbox"]');const deleteBtn = li.querySelector('.delete-btn');checkbox.addEventListener('change', function() {toggleTodoComplete(todo.id);});deleteBtn.addEventListener('click', function() {deleteTodo(todo.id);});todoList.appendChild(li);});}function toggleTodoComplete(id) {todos = todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo);saveTodos();renderTodoList();updateRemainingCount();}function deleteTodo(id) {todos = todos.filter(todo => todo.id !== id);saveTodos();renderTodoList();updateRemainingCount();}function clearCompleted() {todos = todos.filter(todo => !todo.completed);saveTodos();renderTodoList();}function updateRemainingCount() {const count = todos.filter(todo => !todo.completed).length;remainingCount.textContent = count;}function saveTodos() {localStorage.setItem('todos', JSON.stringify(todos));}function formatDate(dateString) {const options = { year: 'numeric', month: 'short', day: 'numeric' };return new Date(dateString).toLocaleDateString('zh-CN', options);}
});

3.3 TodoList样式补充

/* TodoList 样式 */
.todo-section {background-color: #f8f9fa;padding: 2rem;border-radius: 8px;margin-top: 2rem;
}.todo-container {max-width: 600px;margin: 0 auto;background: white;padding: 1.5rem;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}.todo-input {display: flex;margin-bottom: 1rem;gap: 0.5rem;
}.todo-input input {flex: 1;padding: 0.75rem;border: 1px solid #ddd;border-radius: 4px;font-size: 1rem;
}.todo-input button {padding: 0.75rem 1.5rem;background-color: var(--primary-color);color: white;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;
}.todo-input button:hover {background-color: #2980b9;
}.todo-filters {display: flex;gap: 0.5rem;margin-bottom: 1rem;
}.filter-btn {padding: 0.5rem 1rem;background: none;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;transition: all 0.3s;
}.filter-btn.active {background-color: var(--primary-color);color: white;border-color: var(--primary-color);
}.todo-list {list-style: none;padding: 0;margin: 0;
}.todo-item {display: flex;align-items: center;padding: 0.75rem;border-bottom: 1px solid #eee;gap: 0.75rem;
}.todo-item.completed .todo-text {text-decoration: line-through;color: #95a5a6;
}.todo-item input[type="checkbox"] {cursor: pointer;
}.todo-text {flex: 1;
}.delete-btn {background: none;border: none;color: var(--danger-color);font-size: 1.25rem;cursor: pointer;opacity: 0.7;transition: opacity 0.3s;
}.delete-btn:hover {opacity: 1;
}.todo-date {color: #95a5a6;font-size: 0.8rem;
}.empty-message {text-align: center;color: #95a5a6;padding: 1rem;
}.todo-stats {display: flex;justify-content: space-between;align-items: center;margin-top: 1rem;color: #7f8c8d;font-size: 0.9rem;
}.clear-btn {background: none;border: none;color: var(--danger-color);cursor: pointer;font-size: 0.9rem;
}.clear-btn:hover {text-decoration: underline;
}

四、项目优化与高级功能

4.1 性能优化建议

图片懒加载：对博客中的图片实现懒加载

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load">

// 实现懒加载
const lazyImages = document.querySelectorAll('.lazy-load');const imageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;img.classList.remove('lazy-load');observer.unobserve(img);}});
});lazyImages.forEach(img => imageObserver.observe(img));

2. 防抖处理：对搜索功能或频繁触发的事件添加防抖

function debounce(func, delay) {let timeoutId;return function(...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}// 使用示例
searchInput.addEventListener('input', debounce(function() {// 搜索逻辑
}, 300));

4.2 可添加的高级功能

Markdown支持：让博客支持Markdown格式

// 使用marked.js库
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>// 转换Markdown为HTML
document.getElementById('markdown-content').innerHTML = marked.parse(markdownText);

2. 主题切换：实现暗黑/明亮模式切换

/* 在:root中添加CSS变量 */
:root {--bg-color: #ffffff;--text-color: #333333;/* 其他变量 */
}/* 暗黑模式 */
[data-theme="dark"] {--bg-color: #1a1a1a;--text-color: #f0f0f0;/* 其他变量 */
}

// 切换主题
function toggleTheme() {const currentTheme = document.documentElement.getAttribute('data-theme');const newTheme = currentTheme === 'dark' ? 'light' : 'dark';document.documentElement.setAttribute('data-theme', newTheme);localStorage.setItem('theme', newTheme);
}// 初始化主题
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

3. PWA支持：让应用可离线使用

创建manifest.json文件
注册Service Worker

五、项目部署指南

5.1 GitHub Pages部署

在GitHub创建新仓库
将项目代码推送到仓库
进入仓库Settings > Pages
选择部署分支（通常是main或master）
等待几分钟，访问提供的URL

5.2 Vercel部署（更推荐）

注册Vercel账号（可使用GitHub账号登录）
点击"New Project"
导入你的GitHub仓库
配置项目（保持默认即可）
点击"Deploy"
部署完成后会自动获得一个vercel.app的域名

六、总结与扩展方向

通过本项目，你已经掌握了：

响应式博客页面的设计与实现
功能完整的TodoList应用开发
本地存储(localStorage)的使用
前端状态管理的基本概念
项目部署的基本流程

扩展方向建议：

添加后端支持：使用Node.js + Express或Python Flask为项目添加后端API
数据库集成：使用MongoDB或Firebase存储博客文章和任务数据
用户认证：实现登录注册功能，让TodoList可以多用户使用
博客管理系统：开发一个简易的CMS用于管理博客内容
评论系统：为博客添加

从零打造个人博客静态页面与TodoList应用：前端开发实战指南

前言在当今数字时代，拥有个人博客和高效的任务管理工具已成为开发者展示自我和提升生产力的标配。本文将带你从零开始，通过纯前端技术实现一个兼具个人博客静态页面和TodoList任务管理功能的综合应用。无论你是前端新手还是希望巩固基础的中级开发者&a…...

编程日记 2025/8/12 16:18:01

开发者如何优雅应对HTTPS抓包难题

开发者如何优雅应对HTTPS抓包难题：工具实战深度解析调试HTTPS接口这件事，真是程序员永远的痛。特别是在移动端、或者遇到客户端集成了第三方安全SDK的项目时，网络调试的门槛几乎成倍提升。你可能也遇到过：Charles不识别证书、…...

编程日记 2025/8/7 22:07:23

Ubuntu 安装远程桌面连接RDP方式

1. 安装 XFCE4 桌面环境如果你的 Ubuntu 系统默认使用 GNOME 或其它桌面环境，可以安装轻量级的 XFCE4： sudo apt update sudo apt install xfce4 xfce4-goodies 说明：xfce4-goodies 包含额外的插件和工具（如面板插件、终端等&a…...

编程日记 2025/8/7 22:07:21

Ubuntu 22.04 出现 ‘Temporary failure resolving‘ 解决方案

a、使用apt 安装 resolvconf sudo apt-get install resolvconf b、使用 cd /etc/resolvconf/resolv.conf.d/ 进入文件夹，使用 ls 查看目录，会显示 base head tail c、使用 sudo vim base 编辑base文件， 进入时为空，添加 name…...

编程日记 2025/8/12 9:36:10

ubuntu 22.04 换源

参考：清华大学开源软件镜像站 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror...

编程日记 2025/8/7 22:07:17

Java并发编程几个问题的解答

目录 1、以前你编写的Java程序同时能做几件事情？有几个执行流程？main方法执行完，整个程序一定会退出吗？2、早期的电脑一般是单核CPU，但那时我们就可以在编写程序的同时听歌，你觉得其CPU可以同时执行两个程序…...

编程日记 2025/8/7 22:07:14

JavaScript中数组和对象不同遍历方法的顺序规则

在JavaScript中，不同遍历方法的顺序规则和适用场景存在显著差异。以下是主要方法的遍历顺序总结： 一、数组遍历方法 for循环 • 严格按数组索引顺序遍历（0 → length-1） • 支持break和continue中断循环 • 性能最优，…...

编程日记 2025/8/7 22:07:13

C++ STL入门：set 集合容器

C STL入门：set 集合容器一、核心特性与适用场景 set 是 C STL 提供的关联式容器，基于红黑树实现，具有两大核心特性： 特性表现形式底层原理元素唯一性重复值自动去重插入时进行二叉树键比对自动排序元素默认升序排列红黑树中序遍…...

编程日记 2025/8/7 22:07:11

[论文笔记] 超详细解读DeepSeek v3全论文技术报告

DeepSeek-V3是一个强大的专家混合（Mixture-of-Experts，MoE）语言模型，总共671B参数，每个token激活37B参数（可以理解为有多个专家，但每个token只会选择一部分专家进行推理，所以一个token的预测，只会用到37B参数），DeepSeek-V3 使用了多头潜在注意力（...

编程日记 2025/8/7 22:07:09

JS 问号（？）运算符避免中间报错

一、场景在前端开发过程中，有一些情况比如某些属性可能由于渲染数据的时机不同，一开始是null 或者undifine, 这样访问下面的属性的时候就会报错，我们可以给每个层级后面加个? 就可以避免这个错误。 let data {user: {profile: {name: &q…...

编程日记 2025/8/11 8:42:46

1.点云去噪 dev_clear_window ()dev_open_window(0, 0, 560, 560, black, WindowHandle)GenParamNames : [lut,intensity,light_position,disp_pose,alpha]GenParamValues : [color1,coord_z,0.0 0.0 -0.3 1.0,true,1]DispPose : [0,-0.0005,717.04,280,0,20,0]Instructions[0]…...

编程日记 2025/8/7 17:16:01

机器学习实操第二部分神经网路和深度学习第17章编码器、生成对抗网络和扩散模型

机器学习实操第二部分神经网路和深度学习第17章编码器、生成对抗网络和扩散模型内容概要第17章深入探讨了自编码器（Autoencoders）、生成对抗网络（GANs）和扩散模型（Diffusion Models）。这些模型能够…...

编程日记 2025/8/7 22:07:02

【今日三题】ISBN号码(模拟) / kotori和迷宫(BFS最短路) / 矩阵最长递增路径(dfs)

⭐️个人主页：小羊 ⭐️所属专栏：每日两三题很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 ISBN号码(模拟)kotori和迷宫(BFS最短路)矩阵最长递增路径(dfs) ISBN号码(模拟) ISBN号码 #include <iostream> #incl…...

编程日记 2025/8/7 22:07:00

【记录】HunyuanVideo 文生视频工作流

HunyuanVideo 文生视频工作流指南概述本指南详细介绍如何在ComfyUI中使用腾讯混元HunyuanVideo模型进行文本到视频生成的全流程操作，包含环境配置、模型安装和工作流使用说明。参考：https://comfyui-wiki.com/zh/install/install-comfyui/install-c…...

编程日记 2025/8/7 22:06:59

DevExpressWinForms-布局之TablePanel

布局之TablePanel 在 DevExpress 的控件库中，TablePanel 是一个功能强大且灵活的布局控件，它能够以表格形式组织和排列其他控件，让界面布局更加规整、有序。无论是开发复杂的企业级应用程序，还是设计简洁美观的用户界面&#xff…...

编程日记 2025/8/7 22:06:57

MySQL 数据库初体验

目录 1.1 数据库简介 1.1.1 使用数据库的必要性 1.1.2 数据库的基本概念 1.数据 2.数据库和数据库表 3.数据库管理系统和数据库系统 1.1.3 数据库发展史 1.数据库系统发展史 （1）初级阶段——第一代数据库 （2）中级阶段—…...

编程日记 2025/8/7 22:06:55

flink超时未揽收单量统计

应用场景： 双十一大屏统计 - - 订单超时汇总项目指标概况： 应用背景：晚点超时指标，例如：出库超6小时未揽收订单量难点：flink消息触发式计算，没有消息到达则无法计算，而这类指标…...

编程日记 2025/8/12 7:36:28

【造包工具】【Xcap】精讲Xcap构造分片包（IPv4、ipv6、4G\5G等pcap均可），图解超赞超详细！！！

目录前言 1. XCap工具概念介绍 2. Xcap环境说明 2.1 新建报文组 2.2 导入数据包 2.3 查看报文组 2.4 复制删除报文组 3. 构造分片包 3.1 造普通/外层分片步骤： 3.2 造内层分片步骤 3.2.1 建立一个新报文 3.2.2 将组装的新报文分片 3.2.3 替换原始包内层…...

编程日记 2025/8/10 18:33:43

RabbitMQ学习（第二天）

文章目录 1、生产者可靠性①、生产者重连②、生产者确认 2、MQ可靠性①、数据持久化②、LazyQueue(惰性队列) 3、消费者可靠性①、消费者确认②、失败重试机制③、保证业务幂等性总结之前的学习中，熟悉了java中搭建和操作RabbitMQ发送接收消息，熟悉使用…...

编程日记 2025/8/9 15:27:10

旧版 Flutter 写的项目, 想要在新的环境上运行?

DeepSeek 给出的最佳实践以下是针对拷贝 Flutter 项目到新环境运行的完整检查清单和最佳实践，覆盖了环境配置、版本兼容性、依赖管理等多个关键点： 📋 完整检查清单检查项操作方式/命令重要性1. Flutter SDK 版本flutter --version 对比…...

编程日记 2025/8/12 10:51:03

Flutter接入ProtoBuff和原生Android通信【性能最优】

Protocol Buffers（简称Protobuf）是由 Google 开发的一种结构化数据序列化框架，旨在实现高效的数据交换与存储。其核心特性及优势如下： 一、核心特性 ‌跨语言与跨平台‌ 支持多种编程语言（如 C、Java、Python、Dart …...

编程日记 2025/8/7 20:33:52

【MySQL】（10）用户和权限管理

一、应用场景通常一个应用对应一个数据库，我们希望某个数据库只能被相关人员操纵，就需要创建用户并指定权限。只有登录该用户，才能在权限范围内操纵数据库。root 是权限最高的用户，它拥有所有的权限。二、查询用户在 mysql 数…...

编程日记 2025/8/12 8:46:14

学成在线之缓存

一：缓存把白名单可以看到的信息和学生用户下的我的学习，我的选课等这些信息，存到缓存中，因为这些查询量比较大。当查询时，先去检查缓存中是否有这个数据，如果有，就直接返回如果没有&#…...

编程日记 2025/8/7 22:06:47

视频编解码学习8之视频历史

视频技术的发展历史可以追溯到19世纪，至今已跨越近200年。以下是视频技术发展的主要阶段和里程碑： 1. 早期探索阶段（19世纪-1920年代） 1832年：约瑟夫普拉托（Joseph Plateau）发明"费纳奇镜&…...

编程日记 2025/8/11 16:51:22

从装饰器出发，优雅处理 UI 自动化中的异常

二、装饰器核心原理：函数式编程的“语法糖” 在 UI 自动化测试的实际场景中，页面加载超时、元素定位失败、网络波动等异常问题频繁出现。传统的try-except嵌套方式虽然能捕获异常，但会导致业务代码与处理逻辑高度耦合，造成代码冗…...

编程日记 2025/8/11 20:39:24

华为首款鸿蒙电脑正式亮相

在2025年5月8日的鸿蒙电脑技术与生态沟通会上，华为终端BG平板与PC产品线总裁朱懂东发表演讲。鸿蒙办公将支持无缝协同（统一账户 / 多端同步）、智慧体验（鸿蒙 AI / 智慧交互）、融合生态（桌面生态 / 移动生态…...

编程日记 2025/8/7 22:06:41

森林生态学研究深度解析：R语言入门、生物多样性分析、机器学习建模与群落稳定性评估

在生态学研究中，森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性，还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…...

编程日记 2025/8/7 22:06:39

需求分析阶段测试工程师主要做哪些事情

在软件测试需求分析阶段，主要围绕确定测试范围、明确测试目标、细化测试内容等方面开展工作，为后续测试计划的制定、测试用例的设计以及测试执行提供清晰、准确的依据。以下是该阶段具体要做的事情： 1. 需求收集与整理收集需求文档&#x…...

编程日记 2025/8/8 0:13:55

IBM BAW（原BPM升级版）使用教程第五讲

结前篇！ 一、服务：外部服务在 IBM Business Automation Workflow (BAW) 中，外部服务（External Services）是指在流程中调用和集成外部系统或服务的组件。外部服务允许IBM BAW与其他业务系统、应用程序或第三方服务进行…...

编程日记 2025/8/12 8:26:02

一个用C#开发的记事本Notepads开源编辑器

从零学习构建一个完整的系统推荐一个用C#开发的，模仿Nodepad的记事本编辑器。项目简介这是一个国人开发的，采用Fluent Design风格，支持Markdown语法及其预览，可以用于替代Windows自带记事本功能。虽然它没有Nodepad、VS C…...

编程日记 2025/8/8 0:13:51

Office宏病毒钓鱼-打点突破

Office宏钓鱼 [攻击路径] / [利用流程] - 详细步骤：制作一个简单的Word宏钓鱼文档步骤一：规划恶意宏功能 (Payload Design) 目的： 决定宏执行后要达成的目标。为教学演示，我们设定一个简单的目标：弹出一个消息框&…...

编程日记 2025/8/8 0:13:49

神经网络—感知器、多层感知器

文章目录前言一、生物神经元与感知器的类比二、感知器1、简单感知器2、多层感知器（1）多层感知机结构 3、神经网络结构总结1、感知器的局限性如何突破感知器的局限性？ 2、感知器的应用前言感知器（Perceptron）是神经…...

编程日记 2025/8/9 22:25:21

美化IDEA注释：Idea 中快捷键 Ctrl + / 自动注释的缩进（避免添加注释自动到行首）以及 Ctrl + Alt + l 全局格式化代码的注释缩进

打开 Settings 界面，依次选择 Editor -> Code Style -> Java，选择 Code Generation， 取消 Line comment at first column 和 Block comment at first column 的勾选即可， 1、Line comment at first column (行注释在第一列…...

编程日记 2025/8/8 0:13:45

基于大型语言模型的高效时间序列预测模型选择

时间序列预测在金融、医疗、能源等多个领域具有重要意义，其结果对于决策和规划起到关键作用。然而，选择合适的预测模型往往需要丰富的领域知识和大量计算资源。Abdallah等（2022）的研究表明，没有单一算法能在所有预测任…...

编程日记 2025/8/8 0:13:43

2025 EAU UTUC指南学习笔记③：诊断策略精读——从症状到活检，如何科学判断治疗路径？

👋 欢迎关注我的学习专栏~ 如果觉得文章有帮助，别忘了点赞、关注、评论，一起学习本文聚焦UTUC的诊断策略，全面梳理影像学检查、尿液学检测、内镜评估与活检手段，并结合指南推荐等级，提出科研视角的思考。 …...

编程日记 2025/8/11 22:37:24

【Ubuntu】Netplan静态网络配置

1.配置文件 # 默认配置文件：/etc/netplan/*.yaml# 本机 rootubuntu-server:~# vim /etc/netplan/50-cloud-init.yaml 2.DHCP network: ethernets:ens33:dhcp4: trueversion: 2 3.静态IP设置注意：netplan 说明文件格式存储在下列路径下…...

编程日记 2025/8/9 16:23:22

【SQLSERVER】Ubuntu 连接远程 SQL Server（MSSQL）

Ubuntu 连接远程 SQL Server（MSSQL） 引言在企业级开发环境中，跨平台的数据库连接是常见需求。虽然 SQL Server 通常在 Windows 服务器上运行，但在 Ubuntu 上连接远程 SQL Server 也非常重要。本文将详细介绍如何在 Ubuntu 上通…...

编程日记 2025/8/9 15:26:36

GuPPy-v1.2.0安装与使用-生信工具52

GuPPy：Python中用于光纤光度数据分析的免费开源工具 01 背景 Basecalling 是将原始测序信号转换为碱基序列的过程，通俗地说，就是“把碱基识别出来”。这一过程在不同代测序技术中各不相同： 一代测序是通过解析峰图实现&#xff1…...

编程日记 2025/8/8 0:13:32

Mysql-OCP PPT课程讲解并翻译

#跳过介绍，直接从干货开始记录第一章安装mysql...

编程日记 2025/8/10 13:03:28

maven 依赖冲突异常分析

异常如下 Description:An attempt was made to call a method that does not exist. The attempt was made from the following location:com.google.common.cache.CacheBuilder.initialCapacity(CacheBuilder.java:353)The following method did not exist:com.google.common…...

编程日记 2025/8/10 17:30:55

前言