📅 最后修改于: 2023-12-03 15:22:09.461000 🧑 作者: Mango
本文将介绍如何使用 API 和纯 JavaScript 创建一个报价生成器 Web 应用程序。我们将会用到以下知识：
报价生成器通常是一个必不可少的工具，它可以帮助你快速、自动化地为你的客户生成报价单。这使你在你的业务中更专业，同时还可以为你省下时间和精力。
在这个项目中，我们将创建一个简单的报价生成器，它将使用 API 和纯 JavaScript 来承载。我们将使用一个公共 API 来获取产品的价格和信息，然后我们将使用纯 JavaScript 来将这些信息呈现在我们的 Web 应用程序上。
在开始创建报价生成器之前，我们需要准备我们的开发环境。首先，你需要确保你的机器上已经安装了最新的 Node.js 和 npm。你可以在终端中输入以下命令来验证它们是否安装：
node --version
npm --version
接下来，我们需要创建一个 JavaScript 文件来作为我们应用程序的入口，同时我们需要一些 HTML 和 CSS，用于将它们与 JavaScript 结合起来。
我们还需要引入一些其他的 JavaScript 库来帮助我们完成这个项目。其中包括：
我们将首先设计我们程序的页面结构，包括 HTML 和 CSS。我们将采用 Bootstrap 框架来帮助我们创建一个响应式的用户界面，以便应用程序可以在不同大小的屏幕上进行展示。
Markdown代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报价生成器</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>报价生成器</h1>
</div>
<form id="quoteForm">
<div class="form-group">
<label for="productCode">产品代码</label>
<input type="text" class="form-control" id="productCode" name="productCode">
</div>
<div class="form-group">
<label for="productQuantity">产品数量</label>
<input type="number" class="form-control" id="productQuantity" name="productQuantity">
</div>
<button type="submit" class="btn btn-primary">生成报价</button>
</form>
<br>
<div id="quoteResult">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
通过使用 Bootstrap 框架，我们创建了一个包含输入框和按钮的表单。当我们点击“生成报价”按钮时，表单将被提交，并将报价结果呈现到页面上。
接下来，我们将使用纯 JavaScript 来将这个页面和我们的 API 结合起来，并生成一个完整的报价生成器。
用于生成报价的核心数据来自于我们所使用的 API。在这个应用程序中，我们将使用 JSONPlaceholder 这个公共API来获取我们所需的数据，而不是使用真实的产品信息。
JSONPlaceholder 是一个免费的在线API服务，它提供了一些虚构的数据。利用这些数据，我们可以在应用程序中进行测试，而不必担心真实产品数据的合法性和合规性。
我们通过 Ajax 来获取 API 的数据。当用户提交表单时，JavaScript 代码会自动处理表单，并从 API 中获取并显示产品信息。
Markdown代码片段：
$(document).ready(function () {
// 定义 API 的 URL 和产品代码输入框
const apiUrl = 'https://jsonplaceholder.typicode.com/posts';
const productCode = $('#productCode');
// 当表单提交时，获取数据并呈现报价
$('#quoteForm').submit(function (event) {
// 阻止表单自动提交
event.preventDefault();
// 获得 API 数据
$.getJSON(apiUrl, function (data) {
// 遍历产品列表并找到匹配的产品代码
$.each(data, function (key, val) {
if (val.id === productCode.val()) {
// 显示报价结果
$('#quoteResult').html('<p>您的报价： $' + productQuantity.val() * val.userId + '</p>');
}
});
});
});
});
这个 JavaScript 代码片段通过监听 “表单提交” 的事件，向API发送请求，并将结果呈现给用户。当我们提交表单时，JavaScript 获取API数据，并在响应中寻找与用户输入的产品代码相匹配的数据记录。如果找到一个匹配项，则呈现报价。否则，程序输出错误信息。
我们在前面已经创建了一个简单的报价生成器，但是它只能在通过 file:// 运行的本地环境中使用。如果将它部署到服务器上，则无法使用 jQuery 和 Bootstrap 库。其中一个问题是，浏览器会阻止我们通过文件协议加载库，因为这被认为是一种安全风险，会影响应用程序是否具有威胁性。如果将代码部署到服务器上，就可以调用这些库文件，同时也可以使用 Node.js 和 Express 框架，以便可以创建一个完整的 Web 应用程序。
我们将使用 Express 框架来搭建我们的服务器端。使用 Express 创建应用程序非常容易，它为我们提供了所有我们需要的功能。
Markdown代码片段：
const express = require('express');
const app = express();
// 设置静态文件目录
app.use(express.static('public'));
const server = app.listen(3000, function () {
let host = server.address().address;
let port = server.address().port;
console.log('应用程序已启动并运行在 http://%s:%s', host, port);
});
这个 JavaScript 代码片段将创建一个 Express 应用程序，以及一个监听端口为 3000 的服务器。它还指定了一个名为“public”的静态目录，其中包含我们的 HTML、CSS 和 JavaScript 文件。
所有以上代码将会被保存在一个项目文件夹中。在命令行中，进入项目文件夹目录，然后键入 “node main.js” 命令即可启动服务器，打开浏览器，输入 “http://localhost:3000” 地址，页面将会显示出来，我们的报价生成器应用程序已经准备就绪了。
在本教程中，我们通过使用 API 和纯 JavaScript 创建了一个简单的报价生成器 Web 应用程序。我们用到了 HTML、CSS 和 JavaScript，以及 jQuery 和 Bootstrap 库来构建用户界面。
我们使用了 Ajax 和 JSON 编程技术，让 Web 应用程序可以从一个公共 API 获取数据。同时，我们还使用了 Express 框架，在服务器端运行程序，以便它可以运行在生产环境中。
这个基础的项目可以扩展和改进，以更适合你的特定用例。但是，这个项目可以作为一个很好的起点，以了解如何使用 API 和纯 JavaScript 创建一个完整的 Web 应用程序。