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

自己开发一个接口文档页面html

news 2026/2/8 0:32:02

 演示效果

 

具体代码如下 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>框架框架文档页面</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f2f2f2;}.container {display: flex;}.menu {width: 20%;background-color: #f2f2f2;padding: 20px;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}.menu ul {list-style: none;padding: 0;margin: 0;}.menu li {margin-bottom: 10px;}.menu li a {display: block;text-decoration: none;color: #333;}.menu .submenu {padding-left: 20px;}.content {width: 80%;padding: 20px;margin: 20px;background-color: #fff;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}.search {margin-bottom: 20px;}</style>
</head>
<body>
<div class="container"><div class="menu"><h3>菜单</h3><div class="search"><input type="text" id="searchInput" placeholder="搜索..."><button onclick="searchMenu()">搜索</button></div><ul id="menuList"><li><a href="#introduction">介绍</a></li><li><a href="#getting-started">入门</a></li><li><a href="#">数据库</a><ul class="submenu"><li><a href="#">介绍</a><ul class="submenu"><li><a href="#database-intro">概述</a></li><li><a href="#database-usage">用法</a></li></ul></li><li><a href="#database-setup">设置</a></li></ul></li><li><a href="#">路由</a><ul class="submenu"><li><a href="#routing-intro">介绍</a></li><li><a href="#routing-configuration">配置</a></li></ul></li><li><a href="#controllers">控制器</a></li><li><a href="#views">视图</a></li></ul></div><div class="content"><h2 id="introduction">介绍</h2><p>这是框架框架的文档页面。</p><h2 id="getting-started">入门</h2><p>要开始使用框架，您需要按照以下步骤进行操作：</p><ol><li>安装框架框架</li><li>创建一个新项目</li><li>配置数据库连接</li><li>开始编码！</li></ol><h2 id="database-intro">数据库介绍</h2><p>框架提供了一个强大的数据库抽象层，可以轻松地与数据库进行交互。</p><h2 id="database-usage">数据库用法</h2><p>要在框架中使用数据库，您需要掌握数据库的基本用法。</p><h2 id="database-setup">数据库设置</h2><p>要在框架中设置数据库，您需要在配置文件中配置数据库连接。</p><h2 id="routing-intro">路由介绍</h2><p>框架中的路由功能允许您定义URL如何映射到控制器和操作。</p><h2 id="routing-configuration">路由配置</h2><p>您可以在路由配置文件中配置路由规则。</p><h2 id="controllers">控制器</h2><p>框架中的控制器负责处理请求并返回响应。</p><h2 id="views">视图</h2><p>框架中的视图用于渲染HTML模板并向用户显示数据。</p></div>
</div>
<script>function searchMenu() {var input = document.getElementById("searchInput").value.toLowerCase();var menuItems = document.getElementById("menuList").getElementsByTagName("a");for (var i = 0; i < menuItems.length; i++) {var menuItem = menuItems[i];var menuItemText = menuItem.textContent.toLowerCase();if (menuItemText.includes(input)) {menuItem.style.display = "block";menuItem.parentNode.parentNode.style.display = "block"; // 显示父级子菜单menuItem.parentNode.parentNode.parentNode.style.display = "block"; // 显示父级父级菜单} else {menuItem.style.display = "none";}}}
</script>
</body>
</html>

相关文章：

自己开发一个接口文档页面html

演示效果 具体代码如下 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>框架框架文档页面</…...

编程日记 2023/9/12 14:22:38

信息化发展28

区块链概述 区块链技术具有多中心化存储、隐私保护、防篡改等特点&#xff0c; 提供了开放、分散和容错的事务机制&#xff0c; 成为新一代匿名在线支付、汇款和数字资产交易的核心&#xff0c; 被广泛应用于各大交易平台&#xff0c; 为金融、监管机构、科技创新、农业以及政…...

编程日记 2023/9/12 14:21:36

React 入门实例教程

目录 一、HTML 模板 二、ReactDOM.render() 三、JSX 语法 四、组件 五、this.props.children 六、PropTypes 七、获取真实的DOM节点 八、this.state 九、表单 十、组件的生命周期 constructor() componentWillMount() render() componentDidMount() 组件生命周期…...

编程日记 2023/9/12 14:20:35

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…...

编程日记 2023/9/12 14:19:34

Pytorch intermediate(三) RNN分类

使用RNN对MNIST手写数字进行分类。RNN和LSTM模型结构 pytorch中的LSTM的使用让人有点头晕&#xff0c;这里讲述的是LSTM的模型参数的意义。 1、加载数据集 import torch import torchvision import torch.nn as nn import torchvision.transforms as transforms import torc…...

编程日记 2023/9/12 14:18:33

vue2+webpack升级vue3+vite，修改插件兼容性bug

同学们可以私信我加入学习群&#xff01; 前言 在前面使用electronvue3的过程中&#xff0c;已经验证了历史vue2代码vue3混合开发的模式。 本次旧项目vue框架整体升级中&#xff0c;同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工…...

编程日记 2023/9/12 14:17:32

案例实战-Spring boot Web

准备工作 需求&环境搭建 需求&#xff1a; 部门管理&#xff1a; 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表&#xff08;分页、条件&#xff09; 删除员工 新增员工 修改员工 环境搭建 准备数据库表&#xff08;dept、emp&#xff09; -- 部门管理…...

编程日记 2023/9/12 14:16:31

Spring6.1之RestClient分析

文章目录 1 RestClient1.1 介绍1.2 准备项目1.2.1 pom.xml1.2.2 创建全局 RestClient1.2.3 Get接收数据 retrieve1.2.4 结果转换 Bean1.2.5 Post发布数据1.2.6 Delete删除数据1.2.7 处理错误1.2.8 Exchange 方法 1 RestClient 1.1 介绍 Spring 框架一直提供了两种不同的客户端…...

编程日记 2023/9/12 14:15:29

冒泡排序、选择排序、插入排序、希尔排序

冒泡排序 基本思想 代码实现 # 冒泡排序 def bubble_sort(arr):length len(arr) - 1for i in range(length):flag Truefor j in range(length - i):if arr[j] > arr[j 1]:temp arr[j]arr[j] arr[j 1]arr[j 1] tempflag Falseprint(f第{i 1}趟的排序结果为&#…...

编程日记 2023/9/12 14:14:27

OpenCV（二十三）：中值滤波

1.中值滤波的原理 中值滤波&#xff08;Median Filter&#xff09;是一种常用的非线性图像滤波方法&#xff0c;用于去除图像中的椒盐噪声等离群点。它的原理是基于邻域像素值的排序&#xff0c;并将中间值作为当前像素的新值。 2.中值滤波函数 medianBlur() void cv::medianBl…...

编程日记 2023/9/12 14:13:27

Prompt Tuning训练过程

目录 0. 入门 0.1. NLP发展的四个阶段&#xff1a; Prompt工程如此强大&#xff0c;我们还需要模型训练吗&#xff1f; - 知乎 Prompt learning系列之prompt engineering(二) 离散型prompt自动构建 Prompt learning系列之训练策略篇 - 知乎 ptuning v2 的 chatglm垂直领域训练记…...

编程日记 2023/9/12 14:12:25

装备制造企业是否要转型智能装备后服务型公司？

一、从制造到服务&#xff1a;装备制造企业的转型之路 装备制造企业作为国家经济发展的重要支柱&#xff0c;面临着日益激烈的市场竞争。在这样的背景下&#xff0c;越来越多的装备制造企业开始意识到&#xff0c;通过转型为智能装备后服务型公司&#xff0c;可以更好地满足客…...

编程日记 2023/9/12 14:11:25

day-49 代码随想录算法训练营（19） 动态规划 part 10

121.买卖股票的最佳时机 思路一&#xff1a;贪心 不断更新最小买入值不断更新当前值和最小买入值的差值最大值 思路二&#xff1a;动态规划&#xff08;今天自己写出来了哈哈哈哈哈哈哈&#xff09; 1.dp存储&#xff1a;dp[i][0] 表示当前持有 dp[i][1]表示当前不持有2.状…...

编程日记 2023/9/12 14:10:24

检查文件名是否含不可打印字符的C++代码源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;有时候需要检查输入的是否是合法的文件名&#xff0c;文件名是否含不可打印字符等。代码如下&#xff1a; //----------------------…...

编程日记 2023/9/12 14:09:23

学习笔记-正则表达式

https://www.runoob.com/regexp/regexp-tutorial.html 正则表达式re(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;&#xff0c;可以用来描…...

编程日记 2023/9/12 14:08:22

Wireshark TS | 网络路径不一致传输丢包问题

问题背景 网络路径不一致&#xff0c;或者说是网络路径来回不一致&#xff0c;再专业点可以说是网络路径不对称&#xff0c;以上种种说法&#xff0c;做网络方向的工程师肯定会更清楚些&#xff0c;用简单的描述就是&#xff1a; A 与 B 通讯场景&#xff0c;C 和 D 代表中间…...

编程日记 2023/9/12 14:07:21

CMake高级用法实例分析（学习paddle官方的CMakeLists）

cmake基础学习教程 https://juejin.cn/post/6844903557183832078 官方完整CMakeLists cmake_minimum_required(VERSION 3.0) project(PaddleObjectDetector CXX C)option(WITH_MKL "Compile demo with MKL/OpenBlas support,defaultuseMKL." ON) o…...

编程日记 2023/9/12 14:06:20

数据采集: selenium 自动翻页接口调用时的验证码处理

写在前面 工作中遇到&#xff0c;简单整理理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0c;是对大…...

编程日记 2023/9/12 14:05:19

IDEA安装翻译插件

IDEA安装翻译插件 File->Settings->Plugins 在Marketplace中&#xff0c;找到Translation&#xff0c;点击Install 更换翻译引擎 勾选自动翻译文档 翻译 鼠标右击->点击Translate...

编程日记 2023/9/12 14:04:16

DBeaver使用

一、导出表结构 二、导出数据CSV 导出数据时DBeaver并没有导出表结构&#xff0c;所以表结构需要额外保存&#xff1b; 导入数据CSV 导入数据时会因外键、字段长度导致失败&#xff1b;...

编程日记 2023/9/12 14:03:15

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/5 19:49:27

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/7 4:19:43

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39