探索JavaScript前端开发:开启交互之门的神奇钥匙(二)

 

目录

 引言

四、事件处理

4.1 事件类型

4.2 事件监听器

五、实战案例:打造简易待办事项列表

5.1 HTML 结构搭建

5.2 JavaScript 功能实现

六、进阶拓展:异步编程与 Ajax

6.1 异步编程概念

6.2 Ajax 原理与使用

七、前沿框架:Vue.js 入门窥探

7.1 Vue.js 简介

7.2 基础使用示例

八、总结与展望


 引言

在当今数字化时代,互联网已然成为人们生活不可或缺的一部分,而网页作为互联网的主要载体,其用户体验的优劣直接关乎着信息的有效传递与用户的留存。JavaScript,这门在前端开发领域占据核心地位的编程语言,犹如一位神奇的魔法师,为静态的网页注入灵动的生命力,使之蜕变成为交互性强、功能丰富的精彩世界。

四、事件处理

4.1 事件类型

在 JavaScript 的前端开发领域,事件处理犹如一座桥梁,紧密连接着用户与网页之间的交互。它能够精准捕捉用户在页面上的各类操作,诸如鼠标的轻轻点击、键盘的敲击输入、表单的提交确认等,并迅速触发相应的 JavaScript 代码来执行特定功能,为用户带来流畅且自然的交互体验。

鼠标事件堪称交互中的 “主力军”,涵盖了诸多常见类型。click 事件,作为最为常用的一种,当用户在某个元素上执行单击鼠标左键的操作时,便会如同触动了机关一般被触发,就像在网页上点击一个按钮提交表单,或是打开一个链接跳转页面。与之紧密相关的 dblclick 事件,则要求用户在极短时间内连续双击鼠标左键,常用于实现一些快速操作指令,比如在图片编辑场景下,双击图片快速进入编辑模式。mouseover 与 mouseenter 事件均在鼠标指针移至元素上方时触发,细微差别在于,mouseover 在鼠标经过元素及其子元素时都会触发,而 mouseenter 仅当鼠标初次进入元素自身范围时才触发,二者适用于不同的交互细节需求,如导航菜单的展开,mouseover 能让子菜单在鼠标滑过主菜单及子项时都灵活响应,mouseenter 则可确保仅在精准指向主菜单时才触发展开动作,避免误触。mouseout 与 mouseleave 事件则相反,对应鼠标离开元素的操作,其触发规则与上述类似,常用于收起菜单、隐藏提示信息等场景。mousedown 与 mouseup 事件分别对应鼠标按钮按下与松开的瞬间,这两个事件常与 mousemove 配合,用于实现诸如拖拽元素、绘制图形等复杂交互,像在一些图形设计软件的网页版中,用户按下鼠标并移动来绘制线条,松开鼠标完成绘制。

键盘事件同样不可或缺,keydown 事件在用户按下键盘上任意键的瞬间被触发,无论是字母、数字、符号还是功能键,它都能敏锐捕捉,通过监听此事件,开发者可实时获取用户的按键输入,常用于文本输入实时校验、快捷键响应等场景。例如在一些在线文档编辑页面,输入文字时实时检查拼写错误,或是按下 Ctrl + S 组合键触发保存操作。keyup 事件紧随 keydown 之后,在按键松开时触发,与 keydown 配合可精准判断用户完整的按键动作,确保交互逻辑的准确性。需注意的是,曾经的 keypress 事件在按下字符键时触发,但已逐渐被 keydown 取代,因其在处理功能键等方面存在局限。

表单事件聚焦于表单元素的交互处理。submit 事件在用户点击表单的提交按钮,或是在表单内按下回车键(前提是表单设置允许)时触发,此时通常会进行表单数据的校验与提交操作,如登录表单验证用户名和密码是否符合格式要求、是否非空等,若校验通过则向服务器发送数据。change 事件则针对表单元素状态的改变,当单选框、复选框被选中或取消选中,下拉列表选择了不同选项,文本框或 textarea 元素内容改变且失去焦点时,都会触发该事件,常用于实时更新相关联的显示内容或执行额外校验,比如电商购物选择商品规格后,实时更新商品总价;在文本框输入完信息,失去焦点时检查格式是否正确。input 事件与 change 类似,不过它更加 “实时”,只要表单元素的值发生变化,便会立即触发,对于实时反馈用户输入极为有用,如搜索框实时显示输入的关键词联想结果。

不妨以一个简单实例来深入理解事件驱动机制。在网页上有一个按钮,当用户点击它时,弹出一个提示框显示 “按钮被点击了”:

<button id="myButton">点击我</button>
<script>document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击了');});
</script>

在此例中,按钮是事件源,click 是事件类型,而函数 function() { alert('按钮被点击了'); } 便是事件处理程序。当用户执行点击操作这一 “导火索” 时,便迅速激活事件处理程序,进而弹出提示框,完成一次流畅的交互。

4.2 事件监听器

在 JavaScript 前端开发中,事件监听器是实现高效、灵活事件处理的关键所在。它宛如一位忠诚且机智的 “守护者”,时刻监听着特定 DOM 元素上的各种事件,一旦捕捉到目标事件的发生,便会立即触发与之绑定的相应函数,执行预设的交互逻辑。

addEventListener 方法无疑是其中的 “核心利器”,它以一种极为灵活且强大的方式,将事件与处理函数紧密关联起来。其语法结构如下:

target.addEventListener(type, listener, useCapture);

其中,target 代表目标 DOM 元素,通过诸如 document.getElementById、querySelector 等方法精准获取;type 即为要监听的事件类型,如前文提及的 click、keydown、submit 等;listener 则是对应的事件处理函数,它可以是具名函数,也可以是匿名函数,这个函数承载着当事件触发时需要执行的具体代码逻辑;useCapture 是一个可选参数,用于指定事件冒泡或捕获阶段,默认为 false,即处于冒泡阶段,后续会详细讲解冒泡与捕获机制。

以一个为按钮添加点击监听器的实例来深入剖析:

<button id="actionButton">执行操作</button>
<script>const button = document.getElementById('actionButton');button.addEventListener('click', function() {console.log('按钮被点击,即将执行重要操作...');// 此处可添加具体业务逻辑代码,如发送AJAX请求、更新页面数据等});
</script>

在上述代码中,首先通过 document.getElementById 精准定位到 id 为 'actionButton' 的按钮元素,将其赋值给 button 变量。接着,使用 addEventListener 方法为该按钮监听 'click' 事件,当用户点击按钮时,匿名函数内的代码便会立即执行,控制台输出相应提示信息,并且可依需求在此处拓展更为复杂的业务逻辑,如向服务器提交表单数据、动态更新页面 UI 等。

与传统的内联事件处理属性相比,addEventListener 具有显著优势。传统的内联方式,如在 HTML 标签内直接使用 onclick="function ()",虽然简单直接,但却将 JavaScript 代码与 HTML 结构紧密耦合在一起,使得代码的维护性与可扩展性大打折扣。一旦业务逻辑复杂起来,需要修改或新增功能,在 HTML 标签内嵌入的大量代码将变得混乱不堪,难以管理。而 addEventListener 将事件绑定逻辑统一放置在 JavaScript 脚本中,实现了 HTML 结构与 JavaScript 行为的分离,遵循了良好的代码解耦原则,使得代码结构更加清晰、易于维护与拓展。

在实际应用场景中,比如一个网页表单包含多个按钮,分别用于提交表单、重置表单、保存草稿等不同操作,便可利用 addEventListener 为每个按钮绑定各自专属的点击处理函数:

<form id="myForm"><input type="text" placeholder="请输入内容"><button id="submitButton">提交</button><button id="resetButton">重置</button><button id="saveButton">保存草稿</button>
</form>
<script>const submitBtn = document.getElementById('submitButton');const resetBtn = document.getElementById('resetButton');const saveBtn = document.getElementById('saveButton');submitBtn.addEventListener('click', function() {// 执行表单提交逻辑,如校验数据、发送请求console.log('表单提交中...');});resetBtn.addEventListener('click', function() {// 重置表单数据,恢复初始状态console.log('表单已重置');});saveBtn.addEventListener('click', function() {// 保存草稿逻辑,如将数据暂存本地console.log('草稿已保存');});
</script>

如此一来,各个按钮各司其职,通过独立的事件监听器实现了多样化的交互响应,极大提升了用户体验与代码的灵活性。

五、实战案例:打造简易待办事项列表

5.1 HTML 结构搭建

在着手构建简易待办事项列表时,精心搭建 HTML 结构是基础且关键的第一步。它犹如搭建房屋的骨架,为后续功能的添砖加瓦提供稳固支撑。以下是一段基础的 HTML 代码示例:

<!DOCTYPE html>
<html lang="en"><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><h1>待办事项列表</h1><div id="todo-app"><input type="text" id="new-todo" placeholder="添加新任务..."><button id="add-todo">添加</button><ul id="todo-list"></ul></div><script src="script.js"></script>
</body></html>

在这段代码中,<h1> 标签醒目地展示了应用的标题,让用户一眼便能知晓此页面的用途。<div id="todo-app"> 作为核心容器,将整个待办事项的操作区域进行了整合,使之在页面布局上更为规整。其中,<input type="text" id="new-todo"> 是用户输入待办任务的入口,placeholder 属性友好地提示用户应在此处输入内容;<button id="add-todo"> 则是触发添加任务动作的按钮,简洁直观。而 <ul id="todo-list"> 如同一个空白的任务收纳盒,后续通过 JavaScript 动态生成的任务列表项(<li> 元素)都将被有序地放置其中,为用户呈现清晰的任务清单。合理且简洁的 HTML 结构设计,不仅提升了代码的可读性,更为后续 JavaScript 功能的实现铺就了顺畅之路。

5.2 JavaScript 功能实现

有了 HTML 结构作为基石,接下来借助 JavaScript 赋予待办事项列表鲜活的交互能力。以下是实现添加任务、删除任务以及标记任务完成功能的 JavaScript 代码示例,并附有详细注释:

// 等待页面DOM加载完成后再执行后续代码,确保DOM元素已存在
document.addEventListener('DOMContentLoaded', function () {const todoInput = document.getElementById('new-todo');const addButton = document.getElementById('add-todo');const todoList = document.getElementById('todo-list');// 为添加按钮添加点击事件监听器addButton.addEventListener('click', function () {const taskText = todoInput.value.trim();if (taskText!== '') {// 创建新的列表项元素const listItem = document.createElement('li');listItem.textContent = taskText;// 创建删除按钮const deleteButton = document.createElement('button');deleteButton.textContent = '删除';// 为删除按钮添加点击事件监听器,点击时移除对应的列表项deleteButton.addEventListener('click', function () {todoList.removeChild(listItem);});// 将删除按钮添加到列表项中listItem.appendChild(deleteButton);// 将新的列表项添加到待办事项列表todoList.appendChild(listItem);// 清空输入框,以便用户输入下一个任务todoInput.value = '';}});// 为待办事项列表添加点击事件监听器,用于标记任务完成todoList.addEventListener('click', function (e) {if (e.target.tagName === 'LI') {e.target.classList.toggle('completed');}});
});

在上述代码中,首先使用 document.addEventListener('DOMContentLoaded', function () {...}) 确保整个 HTML 页面的 DOM 结构加载完毕后,才开始执行后续的 JavaScript 代码。这一步骤至关重要,因为若过早执行,可能会因 DOM 元素未完全加载而导致无法获取到相应元素,引发错误。

接着,通过 document.getElementById 精准获取到输入框、添加按钮以及待办事项列表的 DOM 元素引用,并分别存储在 todoInput、addButton 和 todoList 变量中,方便后续操作。

当用户在输入框输入任务文本并点击添加按钮时,addButton.addEventListener('click', function () {...}) 中的代码被触发。首先,获取输入框中的文本并去除首尾空格,若文本不为空,则开启创建新任务列表项的流程。使用 document.createElement('li') 生成一个新的 <li> 元素,并将输入的任务文本赋值给它的 textContent 属性,使其显示在页面上。同时,创建一个用于删除任务的按钮,同样为其添加点击事件监听器,当点击删除按钮时,执行 todoList.removeChild(listItem),直接从 DOM 树中移除对应的列表项,实现任务删除功能。最后,将新创建的列表项添加到待办事项列表中,并清空输入框,等待用户输入下一个任务。

为了实现标记任务完成的功能,利用 todoList.addEventListener('click', function (e) {...}) 为整个待办事项列表添加点击事件监听器。当用户点击列表中的某个任务项(<li> 元素)时,通过判断 e.target.tagName === 'LI',确认点击的是任务项本身,随后使用 e.target.classList.toggle('completed'),动态切换任务项的 completed 类名。在 CSS 样式表中,可预先定义 .completed 类的样式,如添加删除线、改变字体颜色等,以此直观地呈现任务的完成状态,为用户提供清晰的视觉反馈,让待办事项管理更加便捷高效。

六、进阶拓展:异步编程与 Ajax

6.1 异步编程概念

在 JavaScript 的编程世界里,同步与异步犹如两条截然不同的执行路径,深刻影响着程序的运行逻辑与用户体验。

同步编程,恰似一位按部就班的 “执行者”,每一行代码都必须严格遵循顺序依次执行,犹如工厂流水线上的一道道工序,前一个任务未完成,后续任务只能默默等待。以读取本地文件为例,若使用同步方式,程序会在发出读取指令后,如同被定格一般,死死 “卡住”,直至文件完整读取并返回结果,才肯继续执行下一行代码。这种 “死等” 模式,在处理耗时较短的任务时,或许尚可接受;但一旦遭遇如大规模数据读取、复杂网络请求等耗时漫长的操作,问题便会接踵而至。整个程序仿佛陷入泥沼,界面冻结,用户的任何操作都得不到即时响应,极大地损害了用户体验。

而异步编程,则像是一位高效的 “多面手”,当遇到诸如网络请求、文件读取这类耗时操作时,它不会傻傻等待,而是迅速开启新的任务分支,将后续代码的执行权交予主线程,让程序得以继续流畅运行。以网页加载图片为例,当浏览器发起图片加载请求后,并不会停滞不前,而是立即着手处理其他页面元素的渲染、脚本的执行等任务。待图片数据从服务器慢悠悠地传输回来,再由专门的回调函数或异步处理机制,将图片巧妙地安置到对应的位置。如此一来,用户便能在图片加载的间隙,正常进行页面滚动、点击链接等操作,页面始终保持着鲜活的响应能力,极大提升了交互的流畅性。

再看一个从服务器获取数据来更新页面内容的场景。在同步模式下,页面会在数据请求发出后陷入僵局,直到数据完整抵达,才一次性更新页面,这期间用户面对的是毫无变化的 “白板”,极易产生焦虑与不耐烦。而采用异步编程,数据请求悄然在后台运作,主线程继续渲染页面骨架、设置基础样式,待数据到手,再通过 DOM 操作逐步、动态地填充内容,用户看到的是一个逐步鲜活起来的页面,交互体验天差地别。异步编程的核心优势,就在于巧妙地利用等待时间,让程序的各个部分并行推进,避免因个别耗时操作拖垮整个系统的响应速度,为用户带来丝滑流畅的浏览与操作体验。

6.2 Ajax 原理与使用

Ajax(Asynchronous JavaScript and XML),作为前端开发领域的一项关键技术,犹如一座隐形的桥梁,无缝连接着前端页面与后端服务器,实现了数据的异步交互与页面的局部更新,为用户带来流畅、高效的浏览体验。

其核心原理依托于 XMLHttpRequest 对象(在现代浏览器中,也常使用更为简洁的 Fetch API),这一对象恰似一位 “幕后信使”,能够在不刷新整个页面的前提下,悄然向服务器发送 HTTP 请求,并机智地接收、处理服务器返回的数据。以一个常见的网页场景为例,当用户在搜索框输入关键词,期望实时获取搜索建议时,Ajax 便开始大展身手。

使用 XMLHttpRequest 对象发起请求,代码大致如下:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/search?q=' + encodeURIComponent(keyword), true);
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {const response = JSON.parse(xhr.responseText);// 处理搜索建议数据,如更新下拉列表展示}
};
xhr.send();

这里,首先创建了 XMLHttpRequest 实例,通过 open 方法精心配置请求的类型(GET)、目标 URL(包含搜索关键词)以及异步模式(true)。接着,为 onreadystatechange 事件绑定回调函数,宛如设置了一个敏锐的 “瞭望哨”,时刻紧盯请求状态的变化。当 readyState 达到 4(意味着请求已完成,数据接收完毕)且状态码为 200(表示请求成功)时,便迅速对返回的 JSON 数据进行解析,并依据数据内容更新页面的搜索建议区域,整个过程页面纹丝不动,用户却能实时获取反馈。

Fetch API 则以一种更加现代化、简洁的语法实现类似功能:

fetch('https://example.com/api/search?q=' + encodeURIComponent(keyword)).then(response => response.json()).then(data => {// 处理搜索建议数据}).catch(error => {console.error('搜索请求出错:', error);});

Fetch API 采用链式调用的 Promise 风格,通过 then 方法依次处理请求成功后的响应解析、数据处理步骤,若途中出现错误,catch 方法便能精准捕获并处理,让异步数据交互的代码逻辑更加清晰、易读。

不妨再看一个完整的示例,从服务器获取待办事项列表数据并实时更新页面展示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax待办事项示例</title><style>#todo-list {list-style-type: none;padding: 0;}#todo-list li {border: 1px solid #ccc;margin: 5px;padding: 5px;}</style>
</head><body><h1>待办事项列表</h1><ul id="todo-list"></ul><script>document.addEventListener('DOMContentLoaded', function () {const todoList = document.getElementById('todo-list');// 使用Fetch API获取待办事项数据fetch('https://example.com/api/todos').then(response => response.json()).then(todos => {todos.forEach(todo => {const listItem = document.createElement('li');listItem.textContent = todo.task;todoList.appendChild(listItem);});}).catch(error => {console.error('获取待办事项出错:', error);});});</script>
</body></html>

在上述代码中,页面加载完成后,通过 Fetch API 向指定服务器接口发送请求,成功获取数据后,循环遍历待办事项数组,动态创建 DOM 元素并添加到页面列表中,瞬间为用户呈现出最新的待办任务清单,全程无刷新,交互体验流畅自然。Ajax 技术的应用,让网页告别了频繁整页刷新的笨拙,实现了数据与页面展示的精妙同步,极大提升了用户体验与应用的响应效率。

七、前沿框架:Vue.js 入门窥探

7.1 Vue.js 简介

在当今蓬勃发展的前端开发领域,Vue.js 宛如一颗璀璨夺目的新星,以其卓越的特性迅速赢得了广大开发者的青睐,成为构建现代用户界面的得力工具。

Vue.js 最为突出的优势之一便是其精妙绝伦的响应式数据绑定机制。传统的 JavaScript 开发模式下,当数据发生变化时,开发者需手动编写冗长繁杂的代码来精准定位并更新对应的 DOM 元素,这一过程极易出错且效率低下,犹如在错综复杂的迷宫中艰难寻路。而 Vue.js 通过其内部强大的响应式系统,能够自动 “感知” 数据的细微变化,宛如一位时刻警觉的守护者,一旦数据有所异动,便立即高效且智能地更新与之关联的 DOM 内容,确保视图与数据始终保持高度一致,实现无缝同步。

组件化开发则是 Vue.js 的另一大 “杀手锏”。它倡导将复杂的用户界面拆解为一个个独立、可复用的小型组件,恰似将一座宏伟的大厦拆分为众多标准化的积木模块。每个组件都拥有自己独立的 HTML 模板、JavaScript 逻辑以及 CSS 样式,它们既能在不同场景下被重复调用,又能依据需求灵活组合,极大地提升了开发效率与代码的可维护性。例如,在构建一个大型电商网站时,头部导航栏、商品列表、购物车等功能模块均可封装为独立组件,开发团队可并行推进各组件的开发,后续若需优化某个组件,也只需聚焦于该组件内部代码,避免牵一发而动全身,让项目开发与维护变得井井有条。

对比原生 JavaScript 开发,Vue.js 的高效性体现得淋漓尽致。以构建一个具有动态数据展示与交互功能的页面为例,原生 JavaScript 需要耗费大量精力处理 DOM 操作、事件绑定以及数据更新的复杂逻辑,代码往往冗长且晦涩难懂,如同杂乱无章的线缆交织在一起;而 Vue.js 凭借简洁优雅的模板语法、高效的数据绑定以及组件化架构,能够以更少的代码量、更清晰的逻辑结构实现同样甚至更为强大的功能,宛如一位技艺精湛的魔法师,用简洁的咒语变出绚丽的魔法,让开发者从繁琐的底层操作中解脱出来,将更多精力投入到业务逻辑与用户体验的优化上,快速打造出高性能、交互性强的优质网页应用。

7.2 基础使用示例

下面通过一个简单的计数器示例,来初步领略 Vue.js 的魅力与便捷。

首先,引入 Vue.js 库。可以通过在 HTML 页面的<head>标签内使用<script>标签引入 CDN 链接,如下:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

接着,在 HTML 的<body>标签内创建一个 DOM 元素作为 Vue 实例的挂载点,例如:

<div id="app"></div>

然后,编写 JavaScript 代码创建 Vue 实例并进行数据绑定:

var app = new Vue({el: '#app',data: {count: 0}
});

这里,el属性指定了 Vue 实例挂载的 DOM 元素选择器,data对象则包含了应用所需的数据,此处仅有一个count属性,初始值为 0。

在 HTML 中,使用 Vue.js 的模板语法将数据绑定到 DOM 元素上:

<div id="app"><p>当前计数:{{ count }}</p><button @click="count++">点击增加</button>
</div>

在上述代码中,双大括号{ { count }}便是 Vue.js 的文本插值语法,它能够实时将count的数据渲染到 DOM 中,让用户直观看到当前计数。而@click="count++"则是 Vue.js 的事件绑定语法,它监听按钮的点击事件,每次点击时,count的值便会自动加 1,由于 Vue.js 的响应式特性,与之绑定的 DOM 内容也会瞬间更新,完美展现数据双向绑定的效果。

不妨设想一下,如果使用原生 JavaScript 来实现相同功能,需要手动获取 DOM 元素、监听按钮点击事件、更新数据并操作 DOM 来修改显示文本,代码复杂度大幅提升,且易出现诸如事件绑定错误、DOM 更新不及时等问题。而 Vue.js 通过简洁的语法糖,将复杂的交互逻辑封装得优雅而高效,让开发者能轻松构建动态交互界面,开启便捷开发之旅。

八、总结与展望

至此,我们已一同穿越了 JavaScript 前端开发的核心地带,领略了其从基础语法、DOM 操作、事件处理,到实战应用、异步编程以及前沿框架 Vue.js 入门的独特魅力。在这个过程中,我们明晰了变量与数据类型的精妙差异,熟练掌握了条件循环语句与函数的灵活运用,学会了运用 DOM 操作精准掌控网页元素,巧用事件处理搭建起用户与网页交互的坚实桥梁,通过实战打造出实用的待办事项列表,深入理解异步编程提升页面性能,并初探 Vue.js 感受现代框架的高效便捷。

然而,JavaScript 的世界广袤无垠,始终处于蓬勃发展之中。新的特性、框架、工具如繁星般不断涌现。作为前端开发者,持续学习是我们前行的不二法则。需时刻关注 ECMAScript 的最新标准,探索如 React、Angular 等其他前沿框架的独特优势,深入钻研 WebAssembly、PWA 等新兴技术,将其巧妙融入项目,创造更为精彩卓越的用户交互体验。愿大家在 JavaScript 前端开发的征程中,不断探索、砥砺奋进,书写属于自己的精彩篇章,让互联网世界因我们的代码而绽放更加绚烂的光彩。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/6259.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DeepSeek-R1:性能对标 OpenAI,开源助力 AI 生态发展

DeepSeek-R1&#xff1a;性能对标 OpenAI&#xff0c;开源助力 AI 生态发展 在人工智能领域&#xff0c;大模型的竞争一直备受关注。最近&#xff0c;DeepSeek 团队发布了 DeepSeek-R1 模型&#xff0c;并开源了模型权重&#xff0c;这一举动无疑为 AI 领域带来了新的活力。今…

假期day1

第一天&#xff1a;请使用消息队列实现2个终端之间互相聊天 singal1.c #include <stdio.h>#include <string.h>#include <unistd.h>#include <stdlib.h>#include <sys/types.h>#include <sys/stat.h>#include <fcntl.h>#include &l…

go-zero框架基本配置和错误码封装

文章目录 加载配置信息配置 env加载.env文件配置servicecontext 查询数据生成model文件执行查询操作 错误码封装配置拦截器错误码封装 接上一篇&#xff1a;《go-zero框架快速入门》 加载配置信息 配置 env 在项目根目录下新增 .env 文件&#xff0c;可以配置当前读取哪个环…

考研机试:买房子

描述 某程序员开始工作&#xff0c;年薪 N万&#xff0c;他希望在中关村公馆买一套 60平米的房子&#xff0c;现在价格是 200 万&#xff0c;假设房子价格以每年百分之 K 增长&#xff0c;并且该程序员未来年薪不变&#xff0c;且不吃不喝&#xff0c;不用交税&#xff0c;每年…

Ansible fetch模块详解:轻松从远程主机抓取文件

在自动化运维的过程中&#xff0c;我们经常需要从远程主机下载文件到本地&#xff0c;以便进行分析或备份。Ansible的fetch模块正是为了满足这一需求而设计的&#xff0c;它可以帮助我们轻松地从远程主机获取文件&#xff0c;并将其保存到本地指定的位置。在这篇文章中&#xf…

前端开发中的模拟后端与MVVM架构实践[特殊字符][特殊字符][特殊字符]

平时&#xff0c;后端可能不能及时给接口给前端进行数据调用和读取。这时候&#xff0c;前端想到进行模拟后端接口。本文将介绍如何通过vite-plugin-mock插件模拟后端接口&#xff0c;并探讨MVVM架构在前端开发中的应用。此外&#xff0c;我们还将讨论Vue2与Vue3的区别&#xf…

JAVA毕业设计210—基于Java+Springboot+vue3的中国历史文化街区管理系统(源代码+数据库)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootvue3的中国历史文化街区管理系统(源代码数据库)210 一、系统介绍 本项目前后端分离(可以改为ssm版本)&#xff0c;分为用户、工作人员、管理员三种角色 1、用户…

docker的前世今生

docker来自哪里&#xff1f; 从我们运维部署的历史来看&#xff0c;宿主机从最初的物理机到虚拟机&#xff0c;再到docker&#xff0c;一步步演进到现在。技术演进其实是为了解决当前技术的痛点&#xff0c;那我们来看看有哪些痛点以及如何克服痛点的。 物理机 一般来说&…

电脑办公技巧之如何在 Word 文档中添加文字或图片水印

Microsoft Word是全球最广泛使用的文字处理软件之一&#xff0c;它为用户提供了丰富的编辑功能来美化和保护文档。其中&#xff0c;“水印”是一种特别有用的功能&#xff0c;它可以用于标识文档状态&#xff08;如“草稿”或“机密”&#xff09;、公司标志或是版权信息等。本…

【机器学习案列】探索各因素对睡眠时间影响的回归分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

2024年度总结

迟来的2024年度总结&#xff0c;本文主要包括创作经历的回顾、个人成长与突破、以及职业与生活的平衡。 文章目录 1、 创作经历回顾2、 成长回顾3、 职业与生活的平衡4、 展望未来 1、 创作经历回顾 从高中开始就喜欢给别人解答疑问&#xff0c;大学学习模电、数电时&#xff…

vim在命令模式下的查找功能

/ab 从上往下 n 下一个 N 上一个 示例&#xff1a; 在命令模式下直接点击键盘上的/就可以进行查找&#xff0c;比如我要查找a&#xff0c;输入a后再回车&#xff0c;就可以检索出文件中所有和a有关的内容。 ?ab 从下往上 N 下一个 n 上一个 示例&#xff1a;和上图相同…

机器学习-使用梯度下降最小化均方误差

前面有一篇文章《机器学习-常用的三种梯度下降法》&#xff0c;这篇文章中对于均方误差的求偏导是错误的&#xff0c;为了澄清这个问题&#xff0c;我再写一篇文章来纠正一下&#xff0c;避免误导大家。 一、批量梯度下降法 我们用 批量梯度下降法 来求解一个简单的 线性回归…

基于quartz,刷新定时器的cron表达式

文章目录 前言基于quartz&#xff0c;刷新定时器的cron表达式1. 先看一下测试效果2. 实现代码 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&…

LabVIEW智能胎压监测

汽车行车安全是社会关注焦点&#xff0c;轮胎压力异常易引发交通事故&#xff0c;开发胎压监测系统可保障行车安全、降低事故发生率。 系统组成与特点 &#xff08;一&#xff09;硬件组成 BMP - 280 气体压力传感器&#xff1a;高精度、稳定性好、能耗低&#xff0c;适合车载…

C语言教程——文件处理(1)

目录 前言 二、什么是文件 2.1文件的概念 2.2程序文件 2.3数据文件 2.4文件名 2.5二进制文件和文本文件 三、文件操作 3.1文件指针 3.2文件的打开与关闭 四、文件的顺序读写 4.1fgetc 4.2fputc 4.3fputs 4.4fgets 总结 前言 我们知道电脑上有许许多多的文件&a…

【橘子ES】Kibana的分析能力Analytics简易分析

一、kibana是啥&#xff0c;能干嘛 我们经常会用es来实现一些关于检索&#xff0c;关于分析的业务。但是es本身并没有UI,我们只能通过调用api来完成一些能力。而kibana就是他的一个外置UI&#xff0c;你完全可以这么理解。 当我们进入kibana的主页的时候你可以看到这样的布局。…

c#的tabControl控件实现自定义标签颜色

最近项目需要自定义tabControl控件颜色&#xff0c;而默认这个控件是不支持自定义标签颜色的&#xff0c;于是想办法实现了这个功能&#xff0c;效果如下图所示&#xff1a; 直接上代码&#xff1a; using System; using System.Collections.Generic; using System.ComponentM…

从零到一:Spring Boot 与 RocketMQ 的完美集成指南

1.Rocket的概念与原理 RocketMQ 是一款由阿里巴巴开源的分布式消息中间件&#xff0c;最初用于支持阿里巴巴的海量业务。它基于发布-订阅模型&#xff0c;具备高吞吐、低延迟、高可用和强一致性的特点&#xff0c;适用于消息队列、大规模数据流处理等场景。以下是对 RocketMQ …

Odoo免费开源ERP最佳业务实践:生产管理

文 / 开源智造&#xff08;OSCG&#xff09; Odoo亚太金牌服务 概述 Odoo是全球排名第一的免费开源ERP系统&#xff0c;以其强大的功能和模块化设计著称&#xff0c;适用于各种规模及类型的企业。Odoo集成了生产、采购、销售、库存、财务、人力资源、市场营销、电子商务等多个…