【JavaScript】二十三、M端事件 + 轮播图Swiper插件
文章目录
- 1、M端事件
- 2、swiper插件
- 2.1 插件
- 2.2 轮播图插件Swiper的使用
- 3、案例：学生信息表
1、M端事件
移动端有一个独有的事件：触屏事件 touch(也称触摸事件)，Android 和 IOS 都有，touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指(或触控笔 )对屏幕或者触控板操作，相关事件：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 1. 触摸div.addEventListener('touchstart', function () {console.log('开始摸我了')})// 2. 离开div.addEventListener('touchend', function () {console.log('离开了')})// 3. 移动div.addEventListener('touchmove', function () {console.log('一直摸，移动')})</script>
</body></html>
F12切换工具栏，用鼠标滑动，体验下触屏：
2、swiper插件
2.1 插件
对每一个新的插件，了解步骤如下，以swiper为例：
- 看官网
https://www.swiper.com.cn/
- 看需要功能的在线演示demo
https://www.swiper.com.cn/demo/index.html
- 查看基本使用流程
https://www.swiper.com.cn/usage/index.html
- 查看API文档，配置自己的插件
https://www.swiper.com.cn/api/index.html
2.2 轮播图插件Swiper的使用
- 根据使用方法，下载对应版本的swiper并解压，复制这个scc和js文件到自己的项目中
- 引入这个文件，假设你有一个box样式的div盒子，这里面将来要放轮播图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./swiper-bundle.min.css"><style>.box {width: 800px;height: 300px;background-color: greenyellow;}</style>
</head><body><!-- 实际这里将来要放轮播图 --><div class="box"></div><script src="./swiper-bundle.min.js"></script></body></html>
- 在Demo里找你想要的轮播图效果，点击在新窗口打开
- F12，复制这个Demo的CSS样式、html、以及JS代码到自己的项目中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./swiper-bundle.min.css"><style>.box {width: 800px;height: 300px;background-color: greenyellow;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}html,body {position: relative;height: 100%;}body {display: flex;justify-content: center;align-items: center;}.swiper {width: 240px;height: 320px;}.swiper-slide {display: flex;align-items: center;justify-content: center;border-radius: 18px;font-size: 22px;font-weight: bold;color: #fff;}.swiper-slide:nth-child(1n) {background-color: rgb(206, 17, 17);}.swiper-slide:nth-child(2n) {background-color: rgb(0, 140, 255);}.swiper-slide:nth-child(3n) {background-color: rgb(10, 184, 111);}.swiper-slide:nth-child(4n) {background-color: rgb(211, 122, 7);}.swiper-slide:nth-child(5n) {background-color: rgb(118, 163, 12);}.swiper-slide:nth-child(6n) {background-color: rgb(180, 10, 47);}.swiper-slide:nth-child(7n) {background-color: rgb(35, 99, 19);}.swiper-slide:nth-child(8n) {background-color: rgb(0, 68, 255);}.swiper-slide:nth-child(9n) {background-color: rgb(218, 12, 218);}.swiper-slide:nth-child(10n) {background-color: rgb(54, 94, 77);}</style>
</head><body><div class="box"><div class="swiper mySwiper swiper-cards swiper-3d swiper-initialized swiper-horizontal swiper-watch-progress"><div class="swiper-wrapper" id="swiper-wrapper-643108d9a8fd441b5" aria-live="polite" style="cursor: grab;"><div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 9"style="width: 240px; z-index: 9; transform: translate3d(0px, 0px, 0px) rotateZ(0deg) scale(1);">Slide 1<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 0;"></div></div><div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9"style="width: 240px; z-index: 8; transform: translate3d(calc(7.25% - 240px), 0px, -100px) rotateZ(2deg) scale(1);">Slide 2<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="3 / 9"style="width: 240px; z-index: 7; transform: translate3d(calc(13% - 480px), 0px, -200px) rotateZ(4deg) scale(1);">Slide 3<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="4 / 9"style="width: 240px; z-index: 6; transform: translate3d(calc(17.25% - 720px), 0px, -300px) rotateZ(6deg) scale(1);">Slide 4<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="5 / 9"style="width: 240px; z-index: 5; transform: translate3d(calc(20% - 960px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 5<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="6 / 9"style="width: 240px; z-index: 4; transform: translate3d(calc(20% - 1200px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 6<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="7 / 9"style="width: 240px; z-index: 3; transform: translate3d(calc(20% - 1440px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 7<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="8 / 9"style="width: 240px; z-index: 2; transform: translate3d(calc(20% - 1680px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 8<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="9 / 9"style="width: 240px; z-index: 1; transform: translate3d(calc(20% - 1920px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 9<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div></div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div></div><script src="./swiper-bundle.min.js"></script><script>var swiper = new Swiper(".mySwiper", {effect: "cards",grabCursor: true,autoplay: {delay: 1000, //1000毫秒切换一次，即一秒切换1次disableOnInteraction: false, //鼠标拉动后默认停止轮播，这里根据api文档选false，让继续轮播}});</script>
</body></html>
- 根据API文档的说明，补充或修改做自己定制化的效果，比如每隔一秒就自动播放
效果：
3、案例：学生信息表
需求：点击录入，新增一条数据，点击操作，删除对应的数据
实现思路：
- 声明一个空数组，用于装录入的数据
- 点击录入，写到数组里
- 根据数组渲染就业榜表格
- 点击删除，删除数组中的数据，并根据数组数据重新渲染表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><!-- autocomplete="off"即不显示你之前填过的信息，比如之前录入过张三，下次再录入名字，不给你显示张三让你选 --><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 增删都是基于这个数组的const arr = []const tbody = document.querySelector('tbody')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')// 是表单的提交事件，不是button按钮的点击事件const form = document.querySelector('.info')// 获取所有带有name属性的元素const items = document.querySelectorAll('[name]')form.addEventListener('submit', function (e) {// 阻止表单元素的默认行为，不让表单跳转e.preventDefault()// 校验数据合法性for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('必填项为空')}}const obj = {// 用数组索引来当作序号stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}//录入的数据放入数组arr.push(obj)// 数据录入后要清空重置表单中刚填的数据this.reset()// 重新渲染render()})// 根据数据渲染页面function render() {// 渲染之前，先清空tbody，不然会重复渲染一遍之前的数据tbody.innerHTML = ''for (let i = 0; i < arr.length; i++) {const tr = document.createElement('tr')// a标签加自定义属性，方便后面删除数据时知道要删哪条tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a> </td>`tbody.appendChild(tr)}}// 点击删除数据，表中每一行都有一个删除，那考虑事件委托，给唯一的tbodytbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {arr.splice(e.target.dataset.id, 1)}// 重新渲染render()})</script></body></html>
效果：
关键思路整理：
1）页面数据渲染的实现：
不要第一反应就是纯DOM操作，借助一个数组，增删改查都基于数组，且新增或者删除后，会触发重新渲染，document.createElement创建元素对象并插入到对应的位置，完成渲染
2）校验所有表单项的实现：
想获取所有必填的表单项，发现只有他们有一个name属性，那就document.querySelectorAll('[name]')，然后遍历它们，校验其内容是否为空
1）实现精确删除：
删除数据时，想要确定从数组中删除哪一条，现有的代码无法实现，考虑加一个自定义属性，data-id，其值等于数据在数组中的索引
相关文章：
【JavaScript】二十三、M端事件 + 轮播图Swiper插件
文章目录 1、M端事件2、swiper插件2.1 插件2.2 轮播图插件Swiper的使用 3、案例：学生信息表 1、M端事件 移动端有一个独有的事件：触屏事件 touch(也称触摸事件)，Android 和 IOS 都有，touch 对象代表一个触摸点。触摸点可能是一根…...
【Spring】DI（依赖注入）详解：属性注入@Autowired（超详细）、构造方法注入、Setter注入
1.DI（依赖注入）介绍 1.1DI是什么？ DI（Dependency Injection，依赖注入） 是 Spring 框架中实现 IoC（控制反转）的一种核心机制。如果说 IoC 是一种设计思想，告诉我们“把控…...
Spring Boot 中配置 Redis 连接池的详细
目录 一、添加依赖二、配置 Redis 连接池（一）通过 Java 配置类（二）通过 application.properties 文件 三、测试 Redis 操作四、总结 一、添加依赖 在 pom.xml 文件中添加以下依赖： <dependencies><dependen…...
系统架构设计师：系统架构概述案例分析与简答题、详细解析与评分要点
10道系统架构概述知识体系案例分析与简答题，涵盖架构设计原则、质量属性、演化过程、评估方法等核心考点，并附详细解析与评分要点： 一、案例分析题（5题） 1. 电商系统高并发场景下的架构设计 背景：某电商平…...
关于系统架构思考，如何设计实现系统的高可用？
绪论、系统高可用的必要性 系统高可用为了保持业务连续性保障，以及停机成本量化，比如在以前的双十一当天如果出现宕机，那将会损失多少钱？比如最近几年Amazon 2021年30分钟宕机损失$5.6M。当然也有成功的案例，比如异地…...
阿里云短信服务与ASP.NET对接实例
准备工作 注册阿里云账号并开通阿里大于(现称"阿里云短信服务")服务 获取AccessKey ID和AccessKey Secret 申请短信签名和短信模板并审核通过 ASP.NET Web项目集成步骤 1. 安装阿里云SDK 通过NuGet包管理器安装阿里云短信服务SDK： Install-Package…...
【含文档+PPT+源码】基于微信小程序健康管理之健身房管理系统的设计与实现
课程目标： 教你从零开始部署运行项目，学习环境搭建、项目导入及部署，含项目源码、文档、数据库、软件等资料 课程简介： 本课程演示的是一款基于微信小程序健康管理之健身房管理系统的设计与实现，主要针对计算机相关…...
微信小程序转为App实践篇 FinClip
参考下面链接先 开始实践 微信小程序转为App并上架应用市场_微信小程序生成app-CSDN博客 首先在FinClip 官网上下载应用 小程序开发工具下载_小程序sdk下载资源-FinClip资源下载|泰坪小程序开放平台 下载到本地安装 打开导入自己的小程序项目；导入时会解析自己的…...
Qt/C++学习系列之QTreeWidget的简单使用记录
Qt/C学习系列之QTreeWidget的简单使用记录 前言1布局1.1布局要求1.2布局代码 2代码设计2.1整体勾选2.2勾选项确认 总结 前言 自己练手的项目中，需要对多个不同层级的选项进行勾选操作，而想到简洁点的操作方式就是使用QTreeWidget进行布局与应用。这里简…...
标易行项目redis内存中放哪些数据
结合你的项目经验，以下是 标易行投标服务平台 中 Redis 内存存储的核心数据类型及具体应用场景分析： 1. 用户订阅配置与实时推送 场景需求：用户订阅招标商机后，系统需实时推送符合订阅条件（如行业、区域、关键词）的标讯。Redis 存储数据： 订阅规则缓存：以 Hash 存储用户…...
redis 放置序列化的对象，如果修改对象，需要修改版本号吗？
在 Redis 中存储序列化对象时，如果修改了对象的类结构（例如增删字段、修改字段类型或顺序），是否需要修改版本号取决于序列化协议的兼容性策略和业务场景的容错需求。以下是详细分析： 1. 为什么需要考虑版本号？ 序列化兼容性问题： 当对象的类结构发生变化时，旧版本的序列…...
MySQL——流程控制
一、IF条件语句 语法 IF condition THENstatements; ELSEIF condition THENstatements; ELSEstatements; END IF; 判断成绩等级 # 判断成绩等级 # 输入学生的编号,取出学生的第一门课，然后判断当前的课程的等级 drop procedure if exists p2; delimiter $$ crea…...
蓝桥杯 1.路径之谜
1.路径之谜 原题目链接 问题描述 小明冒充 X 星球 的骑士，进入了一个奇怪的城堡。城堡里边什么都没有，只有方形石头铺成的地面。假设城堡的地面是 n n 的方格，如下图所示： 骑士要从西北角走到东南角。可以横向或纵向移动&…...
学习笔记十二——Rust 高阶函数彻底入门（超详细过程解析 + 每步数值追踪）
💡 彻底搞懂 Rust 高阶函数！新手最容易卡住的语法 调用流程全讲透（含逐步拆解） Rust 函数式编程中有一个常见却经常让人懵的概念：高阶函数（Higher-Order Function） 一看到 fn(i32) -> i32、…...
)
Spring Cache(笔记)
简介： 常用注解：...
MySQL入门：数据表的创建
今天我们来介绍一下除HTML外的另一种语言：MySQL语言； MySQL：即一种用于管理和处理关系数据库的标准语言。要用于执行查询、更新、管理数据库中的数据以及定义和操作数据库结构。 接下来我会逐一介绍它的作用以及其中数据表，数据…...
深度调优：架构裂变与性能突围)
Vue3服务端渲染(SSR)深度调优：架构裂变与性能突围
一、全链路渲染管控系统 1.1 智能DNS路由策略 1.2 区域化渲染成本矩阵 区域计算成本($/h)网络成本($/GB)命中率QoS保障等级北美东部0.240.0892%SLA-99.9亚太东南0.280.1285%SLA-99.5欧洲西部0.310.1588%SLA-99.7南美圣保罗0.350.1878%SLA-99.0 二、多维度缓存治理策略 2.1 量…...
Python基础语法2
目录 1、顺序语句 2、条件语句 2.1、语法格式 2.2、缩进和代码块 3、空语句 4、循环语句 4.1、while循环 4.2、for循环 4.3、continue 4.4、break 5、综合案例 1、顺序语句 默认情况下，Python 的代码执行顺序是按照从上到下的顺序，依次执行的…...
部署LLaMA Factory，及快速使用
什么是LLaMA Factory LLaMA Factory 是一个围绕 Meta 的 LLaMA（Large Language Model Meta AI）模型设计的工具或代码结构，主要用于简化模型的创建、管理和部署。以下是其关键点解析： 1. 核心概念 LLaMA 模型&a…...
11.第二阶段x64游戏实战-框架代码细节优化
免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给 内容参考于：微尘网络安全 上一个内容：10.第二阶段x64游戏实战-添加计时器 首先是这个GameData类，我们要让…...
Spring Boot 中使用 Netty
2025/4/15 向 一、什么是Netty Netty 是 Java 中一个非常高性能的网络通信框架，用来开发服务器和客户端程序，主要用于处理 TCP/UDP 的网络连接，比如： 聊天服务 实时推送 高并发网络通信（比如游戏、IoT、金融系统&a…...
【Leetcode-Hot100】最大子数组和
题目 解答 class Solution(object):def maxSubArray(self, nums):""":type nums: List[int]:rtype: int"""len_nums len(nums)result -1e5left_fit, right_fit 0, len_nums-1if len_nums 1:return nums[0]sum_left, sum_right 0, 0while r…...
Android 项目 Camera 问题：Fail to connect to camera service
问题与处理策略 问题描述 在 Android 项目中，使用相机时，报如下错误 java.lang.RuntimeException: Fail to connect to camera service# 翻译无法连接到相机服务问题原因 通常情况是应用没有获取到相机权限，导致连接相机服务失败 Android…...
Java二叉树深度解析：结构、算法与应用实践指南
一、二叉树核心概念体系 1. 二叉树基础定义 graph TBA((根节点)) --> B((左子节点))A --> C((右子节点))B --> D((叶子节点))B --> E((叶子节点))C --> F[null]C --> G((叶子节点)) 2. 二叉树类型对比 类型结构特性典型应用场景普通二叉树任意节点最多两…...
阿里FPGA XCKU3P开箱- 25G 光纤
阿里FPGA XCKU3P开箱 - Hello-FPGA - 博客园 25G 光纤 板子有2个SFP的光纤接口，最大支持25G速率，使用ibert 进行验证，SFP在BANK227的GTY 接口。 ibert 配置如下： 测试 测试符合预期，确认了SFP的具体位置 和 支持的速…...
深度学习之微积分
2.4.1 导数和微分 2.4.2 偏导数 
Android系统通知机制深度解析：Framework至SystemUI全链路剖析
1. 前言 在Android 13的ROM定制化开发中，系统通知机制作为用户交互的核心组件，其实现涉及Framework层到SystemUI的复杂协作。本文将深入剖析从Notification发送到呈现的全链路流程，重点解析关键类的作用机制及系统服务间的交互逻辑ÿ…...
spatk-sql核心
在大数据处理领域，Apache Spark已成为不可或缺的工具，而Spark SQL作为其重要组件，以独特的设计与强大功能，在结构化数据处理中扮演着核心角色。 一、Spark SQL的架构基石 Spark SQL构建于Spark核心之上，充分利用了Sp…...
回调函数(3)C#)
高级语言调用C接口(二)回调函数(3)C#
原接口定义请参照高级语言调用C接口(二)回调函数(2) 我们直接来看C#的接口定义 [DllImport("XXX.dll")]public static extern IntPtr Init(string pcPayDeviceIP, int usTlsPort, OnPayResult onPayResult); 委托定义 [UnmanagedFunctionPointer(CallingConvention…...
ns-3中UDP饱和流发包时间间隔设置最合理值
ns3的官方手册很全，相关书籍也是有的，官网先贴在这里： ns-3 | a discrete-event network simulator for internet systemsa discrete-event network simulator for internet systemshttps://www.nsnam.org/相关的脚本介绍也都有一些…...
深度学习（第1章——神经网络原理和Pytorch入门）
前言： 本章将讲解神经网络原理，神经元如何处理输入并输出，什么是梯度，多层感知机中梯度的计算，Pytoch自动梯度效果，如何使用原生Python实现一个简单的神经网络，以及对应Pytorch实现。 神经网络原…...
使用DeepSeek AI高效降低论文重复率
一、论文查重原理与DeepSeek降重机制 1.1 主流查重系统工作原理 文本比对算法：连续字符匹配（通常13-15字符）语义识别技术：检测同义替换和结构调整参考文献识别：区分合理引用与不当抄袭跨语言检测：中英文互译内容识别1.2 DeepSeek降重核心技术 深度语义理解：分析句子核心…...
【3D文件】3D打印迪迦奥特曼，3D打印的迪迦圣像，M78遗迹管理局，5款不同的3D打印迪迦免费下载，总有一款适合你
【3D文件】3D打印迪迦奥特曼，3D打印的迪迦圣像，M78遗迹管理局，5款不同的3D打印迪迦免费下载，总有一款适合你 资源下载： 3D文件AI生成器，机器学习生成，AI生成3D文件，3D打印迪迦奥特…...
【未解决】Spring AI 1.0.0-M6 使用 Tool Calling 报错，请求破解之法
1.报错 2.Java 代码 2.1 pom.xml <dependencyManagement><dependencies><!-- Spring AI --><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>1.0.0-M6</ver…...
第 2 篇：快速上手 Framer Motion（实操入门）
1. 环境准备 在开始使用 Framer Motion 之前，你需要先确保你的开发环境中已经设置好了 React 项目。我们将使用 Next.js 作为示例，如果你是使用其他 React 框架，步骤也基本相同。 1.1 创建一个 Next.js 项目 如果你还没有创建 Next.js 项目…...
如何写好合同管理系统需求分析
引言 在当今企业数字化转型的浪潮中，合同管理系统作为企业法律合规和商业运营的重要支撑工具，其需求分析的准确性和完整性直接关系到系统建设的成败。本文基于Volere需求过程方法论，结合江铃汽车集团合同管理系统需求规格说明书实践案例&…...
C语言自定义类型详解一：结构体（内存对齐）
结构体的声明： 结构体是一些值的集合，这些值是成员变量，结构体的每个成员可以是不同类型的变量（包括其他结构体变量） 类如：描述一个学生 struct Stu {char name[200];int age;char sex[5];//性别char id…...
GitHub配置密钥
1.生成SSH密钥 1）检查 SSH 密钥是否存在 首先，确认是否已经在本地系统中生成了 SSH 密钥对。可以通过以下命令检查： ls -al ~/.ssh 在命令输出中，应该能看到类似 id_rsa 和 id_rsa.pub 这样一对文件。如果这些文件不存在&#…...
PyTorch逻辑回归总结
目录 PyTorch逻辑回归总结神经网络基础基本结构学习路径 线性回归简单线性回归多元线性回归 逻辑回归核心原理损失函数 梯度下降法基本思想关键公式学习率影响 PyTorch实现数据准备模型构建代码优化 核心概念对比 PyTorch逻辑回归总结 神经网络基础 基本结构 输入节点隐藏节…...
Browser-use 是连接你的AI代理与浏览器的最简单方式
AI MCP 系列 AgentGPT-01-入门介绍 Browser-use 是连接你的AI代理与浏览器的最简单方式 AI MCP(大模型上下文)-01-入门介绍 AI MCP(大模型上下文)-02-awesome-mcp-servers 精选的 MCP 服务器 AI MCP(大模型上下文)-03-open webui 介绍 是一个可扩展、功能丰富且用户友好的…...
nginx自编译重现gzip和chunked的现象
前言 最近做项目，发现一个比较好玩的事，nginx的module gzip模式默认支持1KB压缩，和chunked返回，本来现在的很多框架都很完善了，但是，一些新语言框架或者一些老旧框架会不能完整支持chunked，导致…...
RNN - 循环神经网络（概念介绍）
RNN 潜变量自回归模型 使用潜变量 h t h_t ht 总结过去信息 p ( h t ∣ h t − 1 , x t − 1 ) p(h_t | h_{t-1}, x_{t-1}) p(ht∣ht−1,xt−1) p ( x t ∣ h t , x t − 1 ) p(x_t | h_t, x_{t-1}) p(xt∣ht,xt−1) 循环神经网络 更新隐藏状态࿱…...
OpenCV的详细介绍与安装（一）
1.OpenCV概述 OpenCV是一个开源的计算机视觉和机器学习软件库， 它轻量级而且高效——由一系列 C 函数和少量 C 类构成，它支持多种编程语言（如C、Python、Java），并可在Windows、Linux、macOS、Android和iOS等平台上运行…...
50、Spring Boot 详细讲义（七） Spring Boot 与 NoSQL
七 Spring Boot 与 NoSQL 目录 MongoDB 集成Redis 集成Elasticsearch 集成1、 MongoDB 集成 1.1 MongoDB 概述 1.1.1 MongoDB 的基本概念 文档型数据库： 数据存储为类似 JSON 的文档结构（BSON 格式）。每个文档由字段和值对组成，类似于键值对。支持嵌入式文档和数组，灵活…...
微信小程序组件传参
微信小程序组件传参感觉和vue还是挺像的 父组件向子组件传参 在小程序中父组件子组件传参，主要使用properties属性。演示下： 创建组件文件夹component，创建组件demoComponent，记得创建的时候选择组件，不是page页面 …...
C++实用函数：bind
本篇来介绍了C++中bind功能。 1 std::bind 在 C++ 里，std::bind 是一个函数模板，其作用是创建一个可调用对象，该对象可绑定到一组参数上。std::bind 的函数原型如下： template< class F, class... Args > /*unspecified*/ bind( F&& f, Args&&...…...
C# 程序结构||C# 基本语法
原文：C# 程序结构_w3cschool （注：本文为教程文章，请勿标记为付费文章！特此声明） 本节我们将学习 C# 编程语言的结构，为了让大家能够对 C# 程序结构有个更好的理解，我们会先演示一个…...
分库分表-除了hash分片还有别的吗？
在分库分表的设计中，除了常见的 Hash 分片，还有多种策略根据业务场景灵活选择。以下是几种主流的分库分表策略及其应用场景、技术实现和优缺点分析，结合项目经验（如标易行投标服务平台的高并发场景）进行说明： 一、常见分库分表策略 1. 范围分片（Range Sharding） 原理：…...
单片机非耦合业务逻辑框架
在小型单片机项目开发初期，由于业务逻辑相对简单，我们往往较少关注程序架构层面的设计。 然而随着项目经验的积累，开发者会逐渐意识到模块间的耦合问题：当功能迭代时，一处修改可能引发连锁反应。 此时，构…...
WordPress - 此站点出现严重错误
本篇讲 当WordPress出现 此站点出现严重错误 时，该如何解决。 目录 1，现象 2， FAQ 3，管理Menu无法打开 下面是详细内容。 1，现象 此站点出现严重错误（このサイトで重大なエラーが発生しました&#x…...