搜索
首页web前端js教程带有 Express 的基本 CRUD API

内容

  • 简介
  • 项目创建和初始化
  • 创建一个简单的服务器和 GET 路由
  • 路由和请求处理程序
  • 请求和响应
  • 注意变化
  • 创建 POST、GET、UPDATE 和 DELETE 路由
  • API 客户端
  • 请求正文、参数、查询、标头...
  • 操作内存数据
  • 结论

介绍

Basic CRUD API with express

JavaScript 基础知识:第 7 部分

迈克尔·奥图 ・ 2024 年 11 月 2 日

#javascript #api #初学者 #节点

Basic CRUD API with express

什么是 API

迈克尔·奥图 ・ 2024 年 2 月 24 日

#javascript #打字稿 #节点 #api

Basic CRUD API with express

什么是 REST API

迈克尔·奥图 ・24 年 3 月 1 日

#javascript #打字稿 #节点 #api

Basic CRUD API with express

JavaScript 基础:第 6 部分(Javascript 大师)

迈克尔·奥图 ・2024 年 10 月 28 日

#javascript #初学者 #api #节点

Basic CRUD API with express

什么是 Nodejs

迈克尔·奥图 ・ 2024 年 7 月 31 日

#javascript #打字稿 #节点 #api

Basic CRUD API with express

请求和响应

迈克尔·奥图 ・ 2024 年 3 月 14 日

#javascript #节点 #编程 #教程

Basic CRUD API with express

什么是 JSON

迈克尔·奥图 ・ 24 年 3 月 9 日

#javascript #打字稿 #节点 #api

在 JavaScript Essentials:第 7 部分中,我暗示我们将研究开发 API ([0] [1]),这就是我们的起点。我们将体验如何开发一个简单的 API 来跟踪支出。

项目描述

对于此费用跟踪器,我们需要跟踪购买的商品、金额和购买日期。费用如下所示:

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

此时,由于还没有添加真正的数据库,我们可以使用列表(数组)来保存我们将创建的数据。在本摘录中,我们将介绍围绕创建 API 的每个主要概念,并添加一些稍后改进此应用程序的方法。

知道我们将在这个项目的基础上进行构建,所以,请保持它的干净,并尽可能多地探索、实验、坐立不安等。

项目创建和初始化

像往常一样,我们需要为每个项目提供一个全新的工作环境,因此我们将从创建并初始化一个 Node JS 项目开始。如果您不确定,请查看 JavaScript Essentials:第 6 部分(Javascript 大师)。

现在我们必须通过执行以下操作为我们的 API 创建父文件夹:

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

我们使用这个脚本所做的一切都是非常直接的。

  • 我们为我们的项目创建一个文件夹
  • 我们在 vscode 中打开了文件夹
  • 我们初始化了一个nodejs项目
  • 我们在index.js 文件中添加了控制台日志。这将创建文件并添加一些内容
  • 我们执行index.js文件

另一种方法是转到您想要创建此文件夹的任何位置并在那里创建它,然后在 vscode 中打开该文件夹并初始化节点项目 - 查看 JavaScript Essentials:第 6 部分(Javascript 中的 Mastermind)。

此时,我们需要安装一个名为express的nodejs包。 Express 是一个可以帮助我们创建 API 的库。

我们可以通过运行 npm iexpress 来安装这个包。这应该修改 package.json 文件,并创建 package-lock.json 文件和 node_modules 文件夹。请参阅摘录《什么是 Nodejs》,以进一步了解如何使用 npm 安装软件包的信息。

创建一个简单的服务器和一个 GET 路由

在我们的index.js 文件中,我们可以添加此代码。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们所做的就是创建一个 Express 应用程序,使用该应用程序创建一个 GET 请求来发送消息,并让应用程序监听来自端口 3000 的请求。

const app = express();

创建一个快速应用程序(?如何创建一个快速应用程序)

app.get("/", (req, res) => res.send("Hello world"));

我们使用 Express 应用程序实例来创建 GET 请求。 app 有多个方法和属性,其中包括 HTTP 方法。在这里查看 http 方法的例外情况。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

我们使用express应用程序来监听端口,并使用箭头函数来告诉我们,告诉开发人员,我们的应用程序正在运行。对于端口,我们可以将其更改为我们选择的另一个端口。然而,一些特殊端口已经用于或用于某些特定任务,并且它们在社区中是众所周知的,并且当此类应用程序或程序在我们的 PC 上运行时作为默认服务器。看看这些 - 0 1 2

注意:有些是不允许的,因为您的系统附带它们,还有一些是我们安装的应用程序附带的,例如一些服务器和数据库等。不用担心,当我们使用已在使用的端口时,我们的应用程序会让我们知道。我们所要做的就是加一或减一。没有汗水。

路由和请求处理程序

要创建 GET 请求,请使用 app.get(...),对于 POST,请使用 app.post(...) 等等。对于我们要创建的每个路由,app.SomeMethod(...) 将采用一条路由或路径,指示用户客户端所需的资源或他们要执行的操作。作为路由的一部分,它可以至少采用一个请求处理程序。这意味着我们可以有 app.SomeMethod(path, hanlder1, handler2, ..., handlern);.

对于上面的 GET 请求,路径或路由是 / (字符串),我们拥有的单个请求处理程序是 (req, res) => res.send("Hello world"),一个处理函数(回调或简单的箭头函数)。请求处理程序可以是中间件和控制器。

请求和响应

请求处理程序通常接受两个参数,请求和响应,分别缩写为 req 和 res (您不必这样称呼它们,但第一个始终是请求,第二个是响应)。该请求保存有关谁发出请求以及他们想要什么的数据(或一些信息)。响应是向提出请求的用户提供反馈的一种方式。在本例中,当客户端向 / 路径发出 GET 请求时,我们发送“Hello world”。

在这里,您会注意到客户端和用户是可以互换的,即哪个设备向我们的 api 服务器而不是用户(如用户帐户)发出 HTTP 请求。

通常,请求处理程序将采用第三个参数,该参数将在前一个处理程序完成其工作后指向下一个处理程序。我们接下来称之为。它看起来或多或少像:

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

下一个参数很有用,它指向请求处理程序,有时它需要一个参数,一个错误。我们将实现一个错误处理程序来通常处理我们未处理的错误或我们“传递”到下一个请求处理程序的错误。

现在让我们使用control c 取消正在运行的nodejs 进程(在终端中)。然后再次运行它。这次使用 创建一个简单的服务器和 GET 路由 部分的更新内容,我们应该在控制台(终端)中看到类似于
的输出

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

在浏览器中打开http://localhost:3000。你看到了什么?一条文字:你好世界 ?

留意变化

俗话说罗马不是一天建成的。这同样适用于软件开发。也许这里我们的意思是,随着我们的开发,我们会逐渐添加更多的功能,在这个持续的过程中,一直启动和停止服务器变得很烦人。

继续,添加另一个带有 /hello 路径的 GET 请求(路由)和一个请求处理程序,其中包含您想说的内容。开心就好。

您必须重新启动服务器(正在运行的 Nodejs 进程)并在浏览器中访问 http://localhost:3000/hello 才能查看来自该端点的响应。

这个,GET http://localhost:3000/hello,是一个端点。您与 api 消费者共享此信息。在我们中间,我们说路由,因为我们不必知道整个 URL(包括协议 - http、域 - localhost、端口 - 3000、和路径 - /hello)。路线是 METHOD PATH,或多或少,GET /hello.

在 macOS 或 Windows 上,我们可以执行 node --watch index.js ,或者我们不仅可以在条目文件中查找更改,还可以通过 node --watch-path=./index.js 在整个文件夹路径中查找更改。使用 Node.js 来监视文件路径以及文件本身的变化。

目前,这是我的 package.json 文件的内容:

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

我们可以在脚本部分添加一个名为 dev 的脚本。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们可以使用 control c 停止正在运行的服务器,然后执行 npm run dev。这将监视我们文件中保存的更改并重新加载服务器。

因此,如果这不适合您,我们还有其他选择。我们将安装nodemone,npm i nodemon -g。我们会在任何地方使用它作为实用工具,因此我们不必将它作为软件包的一部分安装。我们可以通过执行nodemon index.js来观察变化。在某些情况下这不起作用,当不起作用时, dom nodemon --exec node index.js

我们可以修改我们的开发脚本以使用nodemon,

const app = express();

此时,您可以自由修改 .js 文件,保存后,服务器将重新启动以重新加载所应用的负载更改。

创建 POST、GET、UPDATE、DELETE 路由

我们已经创建了一个 GET 请求。在本节中,我们将简要了解每种方法的含义,因为我们已经在请求和响应中详细讨论了它们。

在这个应用程序中,我们只为客户提供一种资源,那就是支出。假设我们正在服务多个资源,那么我们会将每个资源下的请求分组。

所以假设我们有用户和支出,我们对用户和支出都有 GET、POST、PUT、DELETE 等。

目前,我们使用 /expenditures 路径来表示支出资源。

  • GET:这意味着我们将创建一个路由来列出、获取所有、获取所有支出记录等。我们可以使用 GET 请求来获取其中一条记录。我们创建了类似的 GET

  • POST:post方法常用于创建资源

  • PUT:put方法用于更新资源

  • DELETE:delete方法用于删除资源

现在我们可以将以下几行代码添加到 index.js 文件中,但位于 app.listen(3000,...) 之上。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

保存文件时,您注意到终端中的日志了吗?在浏览器中测试支出的 GET 路由。

我们只能在浏览器中运行 GET 请求。接下来我们将讨论 api 客户端。

API客户端

在此上下文中,API 客户端是用于交互(使用、集成或测试)API 的工具、程序或应用程序。最常用的是Postman、Insomnia、curl等...

在 vscode 以及其他一些 IDE 中,有一个扩展可以为 api 客户端提供扩展。 vscode 有一些与此相关的扩展。然而,我们将考虑一个称为 REST 客户端的 API 客户端。对于我们的用例,使用 Rest Client 会更简单,因此不用担心。我们已被覆盖。

注意:postman 或您选择的任何其他 api 客户端都可以使用

如何使用 REST 客户端

  • 首先,安装 REST 客户端。
  • 我们正在创建一个 HTTP 请求,因此我们可以创建一个带有 .http 或 .rest 扩展名的文件 - touchexpense-tracker-api.http
  • 在expense-tracker-api.http中我们可以定义我们的请求
  • 要创建 GET 请求,请将以下内容添加到 .http 文件中
{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}
  • 端点的传递如上所示。对于帖子,放置或删除更新端点的请求。还记得端点和路由之间的区别吗?
  • 对于需要将数据传递给api的请求,我们可以将数据作为路由的一部分作为参数或字符串查询传递,也可以在body中传递。
# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js
  • Content-Type:application/json 是标头键值。这意味着这就是您使用rest-client 传递标头的方式。
  • 对于请求正文,我们将其作为 json 对象传递 - 不过,标头和正文之间需要换行符
  • 每个请求可以用三个井号或灰烬符号 ### 分隔。可以在 ### 末尾添加文本,使其看起来像标题。
console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

作为练习,创建支出端点的请求。当你遇到困难的时候可以参考一下。我们还有更多事要做。

请求体、参数、查询、标头

此时,我不必强调我们将使用 JSON 来使用 API 客户端与我们的 api 进行通信。

如前所述,我们可以使用请求的正文、标头或 URL 将数据传递到我们的 api。我们已经了解了如何通过请求正文和标头传递数据(我们将在其他时间研究传递一些特定数据)。检查创建的 POST 请求。我们还没有研究如何将数据作为 URL 的一部分传递。

假设我们想要读取 id 为 4 的支出,我们可以传递添加参数(作为 URL 的一部分),如 /expenditures/2。对于将处理此要求的请求,我们执行 /expenditures/:id,其中 :id 指支出的 ID。假设它是 id 以外的其他内容,比如说一个名称,那么我们会执行 :name。 Express 将对此进行处理,并为我们提供一种毫不费力地提取此值的方法。

现在,对于查询字符串,其思想类似于请求参数,但是,它出现在问题之后,后跟 key1=value1&key2=value2...&keyN=valueN,其中 key 是您要查询的值的标识符想要通过。一个非常直接的例子是 REST-Client URL,https://marketplace.visualstudio.com/items?itemName=humao.rest-client。问号标记查询字符串的开头,其后面的任何内容都将键映射到值。例如:?itemName=humao.rest-client.

这将是测试所有 api 端点并体验使用它的好时机。

请求正文

现在我们将处理一个使用请求正文传递数据的请求 - POST 端点。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

请求对象有一个属性,body,在这个属性上,是我们在请求的请求正文中传递的值 - req.body。

这是将要运行的请求。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

这是我们的端点实现,它只会将请求正文记录到控制台。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

发生了什么?我们得到了通常的响应,但是......未定义被记录在控制台中。好吧,这意味着一切都好,但是,我们的 api 服务器不知道它应该将传入解析为 json。还记得 json 吗?

让我们在 const app = express(); 下面添加这一行这应该解决将传入数据解析为 json 的问题。

const app = express();

现在,让我们再次测试 POST 端点。这次你得到了什么?你有没有收到类似的东西?

app.get("/", (req, res) => res.send("Hello world"));

现在你知道如何从body中获取数据了。现在作为练习,解构身体并在响应中传递一个对象。因此,不要记录它,而是将其作为响应返回。

请求参数

我们将创建一个新的 GET 端点来按 ID 读取支出。

这将是我们的 API 请求:

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

请求对象有一个属性 params,在此属性上,是我们在请求的请求参数中传递的值 - req.params。

现在的实现将与我们迄今为止所做的类似,但略有不同。

app.get("/", (req, res, next) => ...);

我们也可以直接访问id。我希望您注意到作为路由一部分传递的 :id 键或名称与记录的对象中的键匹配。尝试重命名路由中的 params 键并查看记录的输出。

请求查询(查询字符串)

对于查询字符串,请求对象上有一个属性,query,它公开了传递的查询字符串。

为了演示这一点,将传递一个查询字符串来过滤要返回的记录。这个端点应该足够了。

expense-tracker-simple-api
Api running on http://localhost:3000

现在的实现将类似于:

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

现在运行您的 api 并检查您的日志。尝试一下。

操作内存数据

此时,我们还没有连接到数据库,因此我们必须操作内存中的数据。我们打算做的是创建一个数组,向该数组添加元素,更新其中的元素,以及删除元素。听起来可行,这就是我们要做的。

我们将对一些以前编写的代码进行一些修改,请随意更改您的代码。最终摘录将在最后分享。

初始化内存数据

让我们在下面创建一个支出数组(虚拟数据) const express = require("express");

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

列出支出

当前端点仅使用 res.send(message) 返回一条消息,但我们想要返回的是 json。虽然 .send 也可以接受对象或 json,但我们将使用 res.json(obj)。

我没有提到,但返回的默认状态码是 200。你注意到了吗?除了发生其他情况或请求出现问题之外,状态代码保持不变。状态码下面有一个部分,浏览一下。

我们可以通过在 res.status(desireStatusCode).json(obj) 中传递所需的状态代码来更改状态代码。我将始终保持 200 状态码。

确保服务器仍在运行

我们可以直接传递支出清单。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

收到了什么回复?检查状态代码以及响应负载。

根据经验,为了避免歧义,我更喜欢默认返回状态代码 200,并使用 success 属性、消息或数据属性来返回消息或请求的资源。默认情况下,当 status 为 false 时,将传递消息,否则,可能会传递消息或数据。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

我们需要显示id(每行的索引)

const app = express();

应用过滤

app.get("/", (req, res) => res.send("Hello world"));

为什么映射后要进行过滤?

阅读支出

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

这个实现是否向您提示,为什么在映射之后完成过滤器?

创造支出

app.get("/", (req, res, next) => ...);

更新支出

expense-tracker-simple-api
Api running on http://localhost:3000

删除支出

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

结论

我们已经涵盖了大多数 API 开发的根源。这个项目很基础。放松一下,再浏览一遍。还有更多需要研究的内容,例如

  • 验证
  • 身份验证和授权
  • 中间件
  • 错误处理
  • SQL
  • 数据库集成

实践项目

crud api = 创建、列出、读取、更新和删除。这就是你解决这些问题的方法。

待办事项列表

  • todo 对象:{ id:int,任务:字符串,状态:布尔值 }
  • crud api
  • 添加端点以将所有任务标记为已完成,成功为 true 或未完成

计算器⁠

  • 您必须决定是否为所有运算(加法、减法、乘法、除法)创建端点
  • 或者您将创建一个具有与每个操作相对应的不同功能的单个端点。用户应该能够传递运算符和两个操作数

货币转换器⁠
您正在从一种货币转换为另一种货币。尽可能多地选择货币(3 种就足够了)

  • 单位转换器⁠ ⁠- 笔记应用程序⁠ ⁠- 个人博客⁠ ⁠- 测验应用程序⁠

片段

知道多余的已被删除。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

API 请求

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

以上是带有 Express 的基本 CRUD API的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

jQuery检查日期是否有效jQuery检查日期是否有效Mar 01, 2025 am 08:51 AM

简单JavaScript函数用于检查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //测试 var

jQuery获取元素填充/保证金jQuery获取元素填充/保证金Mar 01, 2025 am 08:53 AM

本文探讨如何使用 jQuery 获取和设置 DOM 元素的内边距和外边距值,特别是元素外边距和内边距的具体位置。虽然可以使用 CSS 设置元素的内边距和外边距,但获取准确的值可能会比较棘手。 // 设置 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能会认为这段代码很

10个jQuery手风琴选项卡10个jQuery手风琴选项卡Mar 01, 2025 am 01:34 AM

本文探讨了十个特殊的jQuery选项卡和手风琴。 选项卡和手风琴之间的关键区别在于其内容面板的显示和隐藏方式。让我们深入研究这十个示例。 相关文章:10个jQuery选项卡插件

10值得检查jQuery插件10值得检查jQuery插件Mar 01, 2025 am 01:29 AM

发现十个杰出的jQuery插件,以提升您的网站的活力和视觉吸引力!这个精选的收藏品提供了不同的功能,从图像动画到交互式画廊。让我们探索这些强大的工具: 相关文章: 1

HTTP与节点和HTTP-Console调试HTTP与节点和HTTP-Console调试Mar 01, 2025 am 01:37 AM

HTTP-Console是一个节点模块,可为您提供用于执行HTTP命令的命令行接口。不管您是否针对Web服务器,Web Serv

自定义Google搜索API设置教程自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

jQuery添加卷轴到DivjQuery添加卷轴到DivMar 01, 2025 am 01:30 AM

当div内容超出容器元素区域时,以下jQuery代码片段可用于添加滚动条。 (无演示,请直接复制到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。