Web网页开发——水果忍者
1.介绍
复刻经典小游戏——水果忍者
2.预览
3.代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fruit Ninja Web Demo</title><style>body {margin: 0;padding: 0;overflow: hidden;background-color: #333;font-family: Arial, sans-serif;touch-action: none;}#gameCanvas {background-color: #87CEEB;display: block;margin: 0 auto;max-width: 100%;max-height: 100vh;}#gameContainer {position: relative;width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}#startScreen, #gameOverScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.7);color: white;z-index: 10;}#gameOverScreen {display: none;}button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 5px;}.scoreBoard {position: absolute;top: 10px;left: 10px;color: white;font-size: 24px;z-index: 5;text-shadow: 2px 2px 4px black;}.comboText {position: absolute;color: yellow;font-size: 36px;font-weight: bold;text-shadow: 2px 2px 4px black;opacity: 1;transition: opacity 1s, transform 1s;z-index: 5;}</style>
</head>
<body><div id="gameContainer"><div id="startScreen"><h1>Fruit Ninja Web Demo</h1><p>Slice fruits with your mouse or finger to score points!</p><p>Avoid bombs or you'll lose!</p><button id="startButton">Start Game</button></div><canvas id="gameCanvas"></canvas><div id="gameOverScreen"><h1>Game Over</h1><p>Your Score: <span id="finalScore">0</span></p><button id="restartButton">Play Again</button></div><div class="scoreBoard">Score: <span id="scoreDisplay">0</span></div></div><script>// Game variablesconst canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const startScreen = document.getElementById('startScreen');const gameOverScreen = document.getElementById('gameOverScreen');const startButton = document.getElementById('startButton');const restartButton = document.getElementById('restartButton');const scoreDisplay = document.getElementById('scoreDisplay');const finalScore = document.getElementById('finalScore');let score = 0;let gameActive = false;let gameObjects = [];let sliceTrail = [];let sliceActive = false;let lastTimestamp = 0;let spawnTimer = 0;let comboCount = 0;let comboTimer = 0;// Resize canvasfunction resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}// Initialize gamefunction initGame() {resizeCanvas();score = 0;gameObjects = [];sliceTrail = [];sliceActive = false;scoreDisplay.textContent = score;gameActive = true;lastTimestamp = 0;spawnTimer = 0;// Start animationrequestAnimationFrame(gameLoop);}// Game objects classesclass GameObject {constructor(x, y, type) {this.x = x;this.y = y;this.type = type;this.sliced = false;this.velocityX = Math.random() * 8 - 4;this.velocityY = -15 - Math.random() * 5;this.gravity = 0.5;this.rotation = 0;this.rotationSpeed = Math.random() * 0.1 - 0.05;this.size = 40 + Math.random() * 20;if (this.type === 'banana') {this.color = '#FFD700';} else if (this.type === 'bomb') {this.color = '#333';this.size = 30 + Math.random() * 10;} else if (this.type === 'pomegranate') {this.color = '#FF4500';this.size = 50 + Math.random() * 10;} else if (this.type === 'watermelon') {this.color = '#32CD32';this.size = 60 + Math.random() * 10;} else {// Default applethis.color = '#FF0000';}this.slicedColor1 = this.color;this.slicedColor2 = this.type === 'watermelon' ? '#FF6347' : this.color;// For slice animationthis.sliceAngle = 0;this.slicePart1 = { x: 0, y: 0, vx: 0, vy: 0, rotation: 0 };this.slicePart2 = { x: 0, y: 0, vx: 0, vy: 0, rotation: 0 };}update() {if (this.sliced) {// Update sliced partsthis.slicePart1.x += this.slicePart1.vx;this.slicePart1.y += this.slicePart1.vy;this.slicePart1.vy += this.gravity;this.slicePart1.rotation += 0.05;this.slicePart2.x += this.slicePart2.vx;this.slicePart2.y += this.slicePart2.vy;this.slicePart2.vy += this.gravity;this.slicePart2.rotation += 0.05;return this.slicePart1.y < canvas.height && this.slicePart2.y < canvas.height;} else {// Update normal objectthis.x += this.velocityX;this.y += this.velocityY;this.velocityY += this.gravity;this.rotation += this.rotationSpeed;return this.y < canvas.height + 100;}}draw() {ctx.save();if (this.sliced) {// Draw first slice partctx.save();ctx.translate(this.slicePart1.x, this.slicePart1.y);ctx.rotate(this.slicePart1.rotation);ctx.beginPath();ctx.arc(0, 0, this.size / 2, 0, Math.PI, false);ctx.fillStyle = this.slicedColor1;ctx.fill();if (this.type === 'watermelon') {ctx.beginPath();ctx.arc(0, 0, this.size / 2 - 5, 0, Math.PI, false);ctx.fillStyle = this.slicedColor2;ctx.fill();}ctx.restore();// Draw second slice partctx.save();ctx.translate(this.slicePart2.x, this.slicePart2.y);ctx.rotate(this.slicePart2.rotation);ctx.beginPath();ctx.arc(0, 0, this.size / 2, Math.PI, 2 * Math.PI, false);ctx.fillStyle = this.slicedColor1;ctx.fill();if (this.type === 'watermelon') {ctx.beginPath();ctx.arc(0, 0, this.size / 2 - 5, Math.PI, 2 * Math.PI, false);ctx.fillStyle = this.slicedColor2;ctx.fill();}ctx.restore();} else {// Draw normal objectctx.translate(this.x, this.y);ctx.rotate(this.rotation);if (this.type === 'bomb') {// Draw bombctx.beginPath();ctx.arc(0, 0, this.size / 2, 0, 2 * Math.PI);ctx.fillStyle = this.color;ctx.fill();// Draw fusectx.beginPath();ctx.moveTo(0, -this.size / 2);ctx.quadraticCurveTo(10, -this.size / 2 - 15, 20, -this.size / 2 - 10);ctx.lineWidth = 3;ctx.strokeStyle = '#8B4513';ctx.stroke();} else if (this.type === 'banana') {// Draw bananactx.beginPath();ctx.arc(0, 0, this.size / 2, 0.3 * Math.PI, 1.7 * Math.PI);ctx.lineWidth = this.size / 2;ctx.strokeStyle = this.color;ctx.stroke();} else if (this.type === 'watermelon') {// Draw watermelonctx.beginPath();ctx.arc(0, 0, this.size / 2, 0, 2 * Math.PI);ctx.fillStyle = '#32CD32';ctx.fill();// Inner partctx.beginPath();ctx.arc(0, 0, this.size / 2 - 5, 0, 2 * Math.PI);ctx.fillStyle = '#FF6347';ctx.fill();// Seedsctx.fillStyle = 'black';for (let i = 0; i < 8; i++) {const angle = i * (Math.PI / 4);const distance = this.size / 4;ctx.beginPath();ctx.ellipse(Math.cos(angle) * distance,Math.sin(angle) * distance,3, 5, angle, 0, 2 * Math.PI);ctx.fill();}} else if (this.type === 'pomegranate') {// Draw pomegranatectx.beginPath();ctx.arc(0, 0, this.size / 2, 0, 2 * Math.PI);ctx.fillStyle = this.color;ctx.fill();// Crownctx.beginPath();ctx.moveTo(-10, -this.size / 2);ctx.lineTo(10, -this.size / 2);ctx.lineTo(0, -this.size / 2 - 10);ctx.closePath();ctx.fillStyle = '#8B4513';ctx.fill();} else {// Draw applectx.beginPath();ctx.arc(0, 0, this.size / 2, 0, 2 * Math.PI);ctx.fillStyle = this.color;ctx.fill();// Stemctx.beginPath();ctx.moveTo(0, -this.size / 2);ctx.lineTo(0, -this.size / 2 - 7);ctx.lineWidth = 3;ctx.strokeStyle = '#8B4513';ctx.stroke();}}ctx.restore();}checkSlice(slicePath) {if (this.sliced) return false;// Check if the slice path intersects with the objectfor (let i = 1; i < slicePath.length; i++) {const x1 = slicePath[i-1].x;const y1 = slicePath[i-1].y;const x2 = slicePath[i].x;const y2 = slicePath[i].y;// Calculate distance from line segment to center of objectconst distance = distToSegment(this.x, this.y, x1, y1, x2, y2);if (distance < this.size / 2) {// Calculate slice anglethis.sliceAngle = Math.atan2(y2 - y1, x2 - x1);// Set the slice partsthis.slicePart1.x = this.x;this.slicePart1.y = this.y;this.slicePart1.vx = this.velocityX - 1 + Math.random() * 2;this.slicePart1.vy = this.velocityY - 2;this.slicePart2.x = this.x;this.slicePart2.y = this.y;this.slicePart2.vx = this.velocityX + 1 + Math.random() * 2;this.slicePart2.vy = this.velocityY - 2;this.sliced = true;// Handle special fruitsif (this.type === 'bomb') {return 'bomb';} else if (this.type === 'banana') {return 'banana';} else if (this.type === 'pomegranate') {return 'pomegranate';} else {return 'fruit';}}}return false;}}// Helper function to calculate distance from point to line segmentfunction sqr(x) { return x * x; }function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y); }function distToSegmentSquared(p, v, w) {const l2 = dist2(v, w);if (l2 === 0) return dist2(p, v);let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;t = Math.max(0, Math.min(1, t));return dist2(p, {x: v.x + t * (w.x - v.x),y: v.y + t * (w.y - v.y)});}function distToSegment(px, py, x1, y1, x2, y2) {return Math.sqrt(distToSegmentSquared({x: px, y: py}, {x: x1, y: y1}, {x: x2, y: y2}));}// Spawn new game objectsfunction spawnObjects() {const types = ['apple', 'watermelon', 'banana', 'pomegranate'];const x = Math.random() * canvas.width;const y = canvas.height + 20;// 20% chance to spawn a bombif (Math.random() < 0.2) {gameObjects.push(new GameObject(x, y, 'bomb'));} else {const type = types[Math.floor(Math.random() * types.length)];gameObjects.push(new GameObject(x, y, type));}}// Show combo text animationfunction showComboText(count) {const comboText = document.createElement('div');comboText.className = 'comboText';comboText.textContent = `COMBO x${count}!`;comboText.style.left = `${canvas.width / 2 - 100}px`;comboText.style.top = `${canvas.height / 2 - 50}px`;document.getElementById('gameContainer').appendChild(comboText);setTimeout(() => {comboText.style.opacity = '0';comboText.style.transform = 'translateY(-50px)';setTimeout(() => {comboText.remove();}, 1000);}, 10);}// Spawn small fruits (for pomegranate effect)function spawnSmallFruits(x, y) {const count = 5 + Math.floor(Math.random() * 5);for (let i = 0; i < count; i++) {const fruit = new GameObject(x, y, 'apple');fruit.size = 15 + Math.random() * 10;fruit.velocityX = Math.random() * 10 - 5;fruit.velocityY = -10 - Math.random() * 5;gameObjects.push(fruit);}}// Game loopfunction gameLoop(timestamp) {if (!gameActive) return;// Calculate delta timeconst deltaTime = timestamp - lastTimestamp;lastTimestamp = timestamp;// Clear canvasctx.clearRect(0, 0, canvas.width, canvas.height);// Spawn objectsspawnTimer += deltaTime;if (spawnTimer > 1000) {spawnObjects();spawnTimer = 0;}// Draw slice trailif (sliceActive && sliceTrail.length > 1) {ctx.beginPath();ctx.moveTo(sliceTrail[0].x, sliceTrail[0].y);for (let i = 1; i < sliceTrail.length; i++) {ctx.lineTo(sliceTrail[i].x, sliceTrail[i].y);}ctx.strokeStyle = 'white';ctx.lineWidth = 5;ctx.lineCap = 'round';ctx.lineJoin = 'round';ctx.stroke();// Trail glow effectctx.shadowColor = '#FFF';ctx.shadowBlur = 15;ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';ctx.lineWidth = 15;ctx.stroke();ctx.shadowBlur = 0;}// Update and draw game objectslet fruitSlicedThisFrame = 0;for (let i = gameObjects.length - 1; i >= 0; i--) {const obj = gameObjects[i];// Check for slicingif (sliceActive && sliceTrail.length > 3 && !obj.sliced) {const sliceResult = obj.checkSlice(sliceTrail);if (sliceResult) {if (sliceResult === 'bomb') {// Game over if bomb is slicedgameActive = false;finalScore.textContent = score;gameOverScreen.style.display = 'flex';return;} else {fruitSlicedThisFrame++;if (sliceResult === 'fruit') {score += 10;} else if (sliceResult === 'banana') {// Banana gives double points for a short timescore += 20;} else if (sliceResult === 'pomegranate') {score += 30;// Spawn small fruitsspawnSmallFruits(obj.x, obj.y);}scoreDisplay.textContent = score;}}}const isVisible = obj.update();if (isVisible) {obj.draw();} else {gameObjects.splice(i, 1);}}// Handle comboif (fruitSlicedThisFrame > 1) {comboCount = fruitSlicedThisFrame;comboTimer = 0;// Add combo bonusconst comboBonus = comboCount * 5;score += comboBonus;scoreDisplay.textContent = score;// Show combo textshowComboText(comboCount);} else if (fruitSlicedThisFrame === 1) {comboTimer += deltaTime;if (comboTimer > 500) {comboCount = 0;}}// Reduce slice trail graduallyif (sliceTrail.length > 0 && !sliceActive) {sliceTrail.shift();}// Continue animationrequestAnimationFrame(gameLoop);}// Event listeners for mouse/touchcanvas.addEventListener('mousedown', (e) => {sliceActive = true;sliceTrail = [];sliceTrail.push({x: e.clientX,y: e.clientY});});canvas.addEventListener('mousemove', (e) => {if (sliceActive) {sliceTrail.push({x: e.clientX,y: e.clientY});// Limit trail lengthif (sliceTrail.length > 20) {sliceTrail.shift();}}});canvas.addEventListener('mouseup', () => {sliceActive = false;});canvas.addEventListener('mouseleave', () => {sliceActive = false;});// Touch eventscanvas.addEventListener('touchstart', (e) => {e.preventDefault();sliceActive = true;sliceTrail = [];sliceTrail.push({x: e.touches[0].clientX,y: e.touches[0].clientY});});canvas.addEventListener('touchmove', (e) => {e.preventDefault();if (sliceActive) {sliceTrail.push({x: e.touches[0].clientX,y: e.touches[0].clientY});// Limit trail lengthif (sliceTrail.length > 20) {sliceTrail.shift();}}});canvas.addEventListener('touchend', (e) => {e.preventDefault();sliceActive = false;});// Button event listenersstartButton.addEventListener('click', () => {startScreen.style.display = 'none';initGame();});restartButton.addEventListener('click', () => {gameOverScreen.style.display = 'none';initGame();});// Handle window resizewindow.addEventListener('resize', resizeCanvas);// Initial setupresizeCanvas();</script>
</body>
</html>
相关文章：
Web网页开发——水果忍者
1.介绍 复刻经典小游戏——水果忍者 2.预览 3.代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&…...
信息安全访问控制、抗攻击技术、安全体系和评估（高软42）
系列文章目录 信息安全访问控制、抗攻击技术、安全体系和评估 文章目录 系列文章目录前言一、信息安全技术1.访问控制2.抗攻击技术 二、欺骗技术1.ARP欺骗2.DNS欺骗3.IP欺骗 三、抗攻击技术1.端口扫描2.强化TCP/IP堆栈 四、保证体系和评估1.保证体系2.安全风险管理 五、真题在…...
【算法】009、单双链表反转
【算法】009、单双链表反转 文章目录 一、单链表反转1.1 实现思路1.2 多语言解法 二、双链表反转2.1 实现思路2.2 多语言解法 一、单链表反转 1.1 实现思路 维护 pre 变量。 从前向后遍历 head，首先记录 next head.next，其次反转指针使 head.next pr…...
物联网设备接入系统后如何查看硬件实时数据?
要在软件中实时查看硬件设备的信息，通常需要结合前后端技术来实现。以下是设计思路和实现步骤： 1. 系统架构设计 实时查看硬件设备信息的系统通常采用以下架构： 数据采集层: 硬件设备通过传感器采集数据，发送到InfluxDB。数据存…...
【Linux系统编程】初识系统编程
目录 一、什么是系统编程1. 系统编程的定义2. 系统编程的特点3. 系统编程的应用领域4. 系统编程的核心概念5. 系统编程的工具和技术 二、操作系统四大基本功能1. 进程管理（Process Management）2. 内存管理（Memory Management）3. 文…...
解决stylelint对deep报错
报错如图 在.stylelintrc.json的rules中配置 "selector-pseudo-class-no-unknown": [true,{"ignorePseudoClasses": ["deep"]} ]...
React基础之useInperativehandlle
通过ref调用子组件内部的focus方法来实现聚焦 与forwardRef类似，但是forwardRef是通过暴露整个Ref来实现，而useInperativehandle是通过对外暴露一个方法来实现的 import { forwardRef, useImperativeHandle, useRef, useState } from "react";…...
使用joblib 多线程/多进程
文章目录 1. Joblib 并行计算的两种模式多进程（Multiprocessing，适用于 CPU 密集型任务）多线程（Multithreading，适用于 I/O 密集型任务）2. Joblib 的基本用法3. Joblib 多进程示例（适用于 CPU 密集型任务）示例：计算平方4. Joblib 多线程示例（适用于 I/O 密集型任务）…...
⭐算法OJ⭐N-皇后问题 II【回溯剪枝】（C++实现）N-Queens II
⭐算法OJ⭐N-皇后问题【回溯剪枝】（C实现）N-Queens 问题描述 The n-queens puzzle is the problem of placing n n n queens on an n n n \times n nn chessboard such that no two queens attack each other. Given an integer n, return the num…...
【数据结构初阶】---堆的实现、堆排序以及文件中的TopK问题
1.树的概念及结构 1.1树的概念 树是一种非线性的数据结构，它是由n（n>0）个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。 有一个特殊的结点&…...
ubuntu20系统下conda虚拟环境下安装文件存储位置
在 Conda 虚拟环境中执行 pip install 安装软件后，安装的文件会存储在该虚拟环境专属的 site-packages 目录中。具体路径取决于你激活的 Conda 环境路径。以下是定位步骤： 1. 确认 Conda 虚拟环境的安装路径 查看所有环境： conda info --env…...
鸿蒙开发：RelativeContainer 相对布局详解【全套华为认证学习资料分享（考试大纲、培训教材、实验手册等等）】
前言 在最新版本的 DevEco Studio 中，官方在创建新项目时，默认使用 RelativeContainer 组件作为根布局。这足以证明 RelativeContainer 的重要性。相比其他容器组件，它极大地简化了复杂 UI 布局中的元素对齐问题。 例如，在没有 R…...
基于SpringBoot实现旅游酒店平台功能一
一、前言介绍： 1.1 项目摘要 随着社会的快速发展和人民生活水平的不断提高，旅游已经成为人们休闲娱乐的重要方式之一。人们越来越注重生活的品质和精神文化的追求，旅游需求呈现出爆发式增长。这种增长不仅体现在旅游人数的增加上࿰…...
HttpServletRequest 和 HttpServletResponse 区别和作用
一、核心作用对比 对象HttpServletRequest（请求对象）HttpServletResponse（响应对象）本质客户端发给服务器的 HTTP 请求信息（输入）服务器返回客户端的 HTTP 响应信息（输出）生命周期一…...
树莓派学习（一）——3B+环境配置与多用户管理及编程实践
树莓派学习（一）——3B环境配置与多用户管理及编程实践 一、实验目的 掌握树莓派3B无显示器安装与配置方法。学习Linux系统下多用户账号的创建与管理。熟悉在树莓派上使用C语言和Python3编写简单程序的方法。 二、实验环境 硬件设备：树莓派…...
Mysql安装方式
方式一：安装包安装 下载安装包 官网直接下载：https://dev.mysql.com/downloads/ 安装配置 2.1、双击刚刚下载好的msi文件，开始安装MySQL。 2.2、选择自定义模式Custom安装 2.3、点击选择自己电脑对应的mysql安装目录 2.5、继续点击下一步&…...
Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)
目录 （1）Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接) （2）Vue3的基础语法学习与使用。 （1）"{{}}"绑定数据。 <1>ref()函数定义变量——绑定数据。 <2>reactive({...})…...
使用websocket，注入依赖service的bean为null
问题：依赖注入失败，service获取不到，提示null 这是参考代码 package com.shier.ws;import cn.hutool.core.date.DateUtil; import cn.hutool.json.JSONObject; import cn.hutool.json.JSONUtil; import com.google.gson.Gson; import com.s…...
批量在 Word 的指定位置插入页，如插入封面、末尾插入页面
我们经常会碰到需要在 Word 文档中插入新的页面的需求，比如在 Word 文档末尾插入一个广告页、给 Word 文档插入一个说明封面，在 Word 文档的中间位置插入新的页面等等。相信这个操作对于大部分小伙伴来说都不难，难的是同时给多个 Word 文档插…...
算法系列之滑动窗口
算法系列之滑动窗口 题目 给定一个字符串 s ，请你找出其中不含有重复字符的 最长 子串 的长度。 示例 1:输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。 示例 2:输入: s "bbbbb"…...
【C#】详解C#中的内存管理机制
文章目录 前言一、C#内存管理的基本机制（1）托管堆（Managed Heap）（2）垃圾回收（Garbage Collection）（3）栈内存 二、 开发者需要主动管理的场景（1&am…...
C/S架构与B/S架构
一、定义与核心区别 C/S架构（Client/Server，客户端/服务器） 客户端需安装专用软件（如QQ、企业ERP系统），直接与服务器通信。服务器端通常包括数据库和业务逻辑处理1。特点：客户端承担部分计算任务…...
《DeepSeek MoE架构下，动态专家路由优化全解析》
在人工智能飞速发展的当下，模型架构的创新与优化始终是推动技术进步的关键力量。DeepSeek的混合专家模型（MoE）架构，以其独特的设计理念和卓越的性能表现，在大模型领域崭露头角。而其中的动态专家路由优化技术ÿ…...
Android双亲委派
下面是一份 Android 类加载器双亲委派机制的时序图示例，描述了当应用调用 loadClass() 时，各个加载器之间的委派过程。 #mermaid-svg-rBdlhpD2uRjBPiG8 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mer…...
go语言因为前端跨域导致无法访问到后端解决方案
前端服务8080访问后端8081这端口显示跨域了 ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/A…...
Jmeter使用介绍
文章目录 前言Jmeter简介安装与配置JDK安装与配置JMeter安装与配置 打开JMeter方式一方式二 设置Jmeter语言为中文方法一（仅一次性）方法二(永久设置成中文) Jmeter文件常用目录 元件与组件元件组件元件的作用域元件的执行顺序第一个案例添加线程组添加 H…...
【商城实战(13)】购物车价格与数量的奥秘
【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配…...
Spring使用@Scheduled注解的参数详解
在现代Java开发中，定时任务是一个常见的需求。Spring框架提供了Scheduled注解，让我们能够以简单、直观的方式定义和管理这些定时任务。接下来，我们来深入探讨这个注解的使用，以及它的参数都有哪些含义和作用。 Scheduled注解可以…...
【网络】HTTP协议、HTTPS协议
HTTP与HTTPS HTTP协议概述 HTTP（超文本传输协议）：工作在OSI顶层应用层，用于客户端（浏览器）与服务器之间的通信,B/S模式 无状态：每次请求独立，服务器不保存客户端状态（通过Cookie/Session扩展状态管理）。基于TCP：默认端口80（HTTP）、443（HTTPS），保证可靠传输。请…...
【Windows下Gitbook快速入门使用】
Windows下Gitbook快速入门使用 1 工具安装1.1 Node.js下载安装1.1 环境变量1.2 npm配置1.3 安装gitbook 2 gitbook使用2.1 gitbook 无法执行2.2 gitbook常用命令 Gitbook是一个软件，使用Git和Markdown来编排书本； GitBook helps you pushlish beautiful …...