在没有框架的情况下构建 JavaScript 单页应用程序

逃离我推掉我的手 2023-10-01 18:29 7阅读 0赞

[Build a JavaScript Single Page App Without a Framework - SitePoint][]

**前端框架很棒。它们抽象出构建单页应用程序 (SPA) 的大部分复杂性，并帮助您随着项目的发展以一种可理解的方式组织代码。**

然而，也有不利的一面：这些框架会带来一定程度的开销，并且可能会引入它们自己的复杂性。

这就是为什么在本教程中，我们将学习如何在不使用客户端 JavaScript 框架的情况下从头开始构建 SPA。这将帮助您评估这些框架实际上为您做了什么，以及在什么时候使用它们是有意义的。它还将让您了解构成典型 SPA 的各个部分以及它们是如何连接在一起的。

让我们开始吧 …

### **先决条件** ###

对于本教程，您需要具备[现代 JavaScript][JavaScript]和[jQuery][]的基础知识。一些使用[Handlebars][]、[Express][]和[Axios][]的经验会派上用场，尽管这不是绝对必要的。您还需要在您的环境中进行以下设置：

*  [节点.js][.js]
 *  [适用于 Window 用户的Git][Window _Git]或[Git Bash][]。

[您可以在我们的GitHub 存储库][GitHub]中找到已完成的项目。

### **构建项目** ###

我们将构建一个简单的货币应用程序，它将提供以下功能：

*  显示最新汇率
 *  从一种货币转换为另一种货币
 *  根据指定日期显示过去的货币汇率。

我们将使用以下免费的在线 REST API 来实现这些功能：

*  [fixer.io API][]
 *  [免费货币转换器 API][API]。

Fixer 是一个完善的 API，提供外汇和货币转换 JSON API。不幸的是，这是一项商业服务，免费计划不允许货币兑换。所以我们还需要使用免费货币转换器 API。转换 API 有一些限制，幸运的是不会影响我们应用程序的功能。无需 API 密钥即可直接访问。但是，Fixer 需要 API 密钥来执行任何请求。只需[在他们的网站上注册即可获得免费计划的访问密钥][Link 1]。

理想情况下，我们应该能够在客户端构建整个单页应用程序。但是，由于我们将处理敏感信息（我们的 API 密钥），因此无法将其存储在我们的客户端代码中。这样做会使我们的应用程序容易受到攻击，并且任何初级黑客都可以绕过该应用程序并直接从我们的 API 端点访问数据。为了保护此类敏感信息，我们需要将其放入服务器代码中。因此，我们将设置一个[Express][]服务器来充当客户端代码和云服务之间的代理。通过使用代理，我们可以安全地访问此密钥，因为服务器代码永远不会暴露给浏览器。下图说明了我们完成的项目将如何工作。

![format_png][]

记下每个环境将使用的 npm 包——即浏览器（客户端）和服务器。既然您知道我们将要构建什么，请转到下一部分开始创建项目。

### **项目目录和依赖项** ###

前往您的工作区目录并创建文件夹`single-page-application`。在 VSCode 或您喜欢的编辑器中打开文件夹，然后使用终端创建以下文件和文件夹：

touch .env .gitignore README.md server.js
    mkdir public lib
    mkdir public/js
    touch public/index.html
    touch public/js/app.js

打开`.gitignore`并添加这些行：

node_modules
    .env

打开`README.md`并添加这些行：

# Single Page Application
    
    This is a project demo that uses Vanilla JS to build a Single Page Application.

接下来，`package.json`通过在终端中执行以下命令来创建文件：

npm init -y

您应该获得为您生成的以下内容：

{
      "name": "single-page-application",
      "version": "1.0.0",
      "description": "This is a project demo that uses Vanilla JS to build a Single Page Application.",
      "main": "server.js",
      "directories": {
        "lib": "lib"
      },
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node server.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

看看 npm 命令有多方便？内容是根据项目结构生成的。现在让我们安装项目所需的核心依赖项。在终端中执行以下命令：

npm install jquery semantic-ui-css handlebars vanilla-router express dotenv axios

软件包安装完成后，转到下一部分开始构建应用程序的基础。

### **应用基础** ###

在我们开始编写前端代码之前，我们需要实现一个服务器-客户端基础来工作。这意味着从 Express 服务器提供的基本 HTML 视图。`node_modules`出于性能和可靠性的原因，我们将直接从文件夹中注入前端依赖项。我们必须以一种特殊的方式设置我们的 Express 服务器来完成这项工作。打开`server.js`并添加以下内容：

require('dotenv').config(); // read .env files
    const express = require('express');
    
    const app = express();
    const port = process.env.PORT || 3000;
    
    // Set public folder as root
    app.use(express.static('public'));
    
    // Allow front-end access to node_modules folder
    app.use('/scripts', express.static(`${__dirname}/node_modules/`));
    
    // Listen for HTTP requests on port 3000
    app.listen(port, () => {
      console.log('listening on %d', port);
    });

这为我们提供了一个基本的 Express 服务器。我已经评论了代码，所以希望这能让您对正在发生的事情有一个相当好的了解。接下来，打开`public/index.html`并输入：

<!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">
      <link rel="stylesheet" href="scripts/semantic-ui-css/semantic.min.css">
      <title>SPA Demo</title>
    </head>
    <body>
      <div class="ui container">
        
        <div class="ui four item inverted orange menu">
          <div class="header item">
            <i class="money bill alternate outline icon"></i>
            Single Page App
          </div>
          <a class="item" href="/">
            Currency Rates
          </a>
          <a class="item" href="/exchange">
            Exchange Rates
          </a>
          <a class="item" href="/historical">
            Historical Rates
          </a>
        </div>
    
        
        <div id="app"></div>
      </div>
    
      
      <script src="scripts/jquery/dist/jquery.min.js"></script>
      <script src="scripts/semantic-ui-css/semantic.min.js"></script>
      <script src="scripts/axios/dist/axios.min.js"></script>
      <script src="scripts/handlebars/dist/handlebars.min.js"></script>
      <script src="scripts/vanilla-router/dist/vanilla-router.min.js"></script>
      <script src="js/app.js"></script>
    </body>
    </html>

我们使用语义 UI 进行样式设置。请参阅[语义 UI 菜单][UI]文档以了解用于我们导航栏的代码。转到您的终端并启动服务器：

npm start

在浏览器中打开[localhost:3000 。][localhost_3000]您应该有一个空白页面，其中仅显示导航栏：

![format_png 1][]

现在让我们为我们的应用程序编写一些视图模板。

### **前端骨架模板** ###

我们将使用[Handlebars][]来编写我们的模板。JavaScript 将用于根据当前 URL 呈现模板。我们将创建的第一个模板将用于显示错误消息，例如 404 或服务器错误。将此代码放在`public/index.html`导航部分之后：

<script id="error-template" type="text/x-handlebars-template">
      <div class="ui {
       {color}} inverted segment" style="height:250px;">
        <br>
        <h2 class="ui center aligned icon header">
          <i class="exclamation triangle icon"></i>
          <div class="content">
            {
       {title}}
            <div class="sub header">{
       {message}}</div>
          </div>
        </h2>
      </div>
    </script>

接下来，添加以下模板，这些模板将代表我们在导航栏中指定的每个 URL 路径的视图：

<script id="rates-template" type="text/x-handlebars-template">
      <h1 class="ui header">Currency Rates</h1>
      <hr>
    </script>
    
    
    <script id="exchange-template" type="text/x-handlebars-template">
      <h1 class="ui header">Exchange Conversion</h1>
      <hr>
    </script>
    
    
    <script id="historical-template" type="text/x-handlebars-template">
      <h1 class="ui header">Historical Rates</h1>
      <hr>
    </script>

接下来，让我们将所有这些模板编译到`public/js/app.js`. 编译后，我们将渲染`rates-template`并查看它的样子：

window.addEventListener('load', () => {
      const el = $('#app');
    
      // Compile Handlebar Templates
      const errorTemplate = Handlebars.compile($('#error-template').html());
      const ratesTemplate = Handlebars.compile($('#rates-template').html());
      const exchangeTemplate = Handlebars.compile($('#exchange-template').html());
      const historicalTemplate = Handlebars.compile($('#historical-template').html());
    
      const html = ratesTemplate();
      el.html(html);
    });

请注意，我们将所有 JavaScript 客户端代码包装在一个`load`事件中。这只是为了确保所有依赖项都已加载并且 DOM 已完成加载。刷新页面，看看我们有什么：

![format_png 2][]

我们正在取得进展。现在，如果您单击除*Currency Rates*之外的其他链接，浏览器将尝试获取新页面并最终显示如下消息`Cannot GET /exchange`：

我们正在构建一个单页应用程序，这意味着所有操作都应该发生在一个页面中。我们需要一种方法来告诉浏览器在 URL 更改时停止获取新页面。

### **客户端路由** ###

为了控制浏览器环境中的路由，我们需要实现客户端路由。有许多客户端路由库可以帮助解决这个问题。对于我们的项目，我们将使用[vanilla router][]，这是一个非常易于使用的路由包。

如果你还记得，我们之前已经在`index.html`. 因此，我们可以立即调用`Router`该类。删除您添加的最后两个语句`app.js`并将它们替换为以下代码：

// Router Declaration
    const router = new Router({
      mode: 'history',
      page404: (path) => {
        const html = errorTemplate({
          color: 'yellow',
          title: 'Error 404 - Page NOT Found!',
          message: `The path '/${path}' does not exist on this site`,
        });
        el.html(html);
      },
    });
    
    router.add('/', () => {
      let html = ratesTemplate();
      el.html(html);
    });
    
    router.add('/exchange', () => {
      let html = exchangeTemplate();
      el.html(html);
    });
    
    router.add('/historical', () => {
      let html = historicalTemplate();
      el.html(html);
    });
    
    // Navigate app to current url
    router.navigateTo(window.location.pathname);
    
     // Highlight Active Menu on Refresh/Page Reload
    const link = $(`a[href$='${window.location.pathname}']`);
    link.addClass('active');
    
    $('a').on('click', (event) => {
      // Block browser page load
      event.preventDefault();
    
      // Highlight Active Menu on Click
      const target = $(event.target);
      $('.item').removeClass('active');
      target.addClass('active');
    
      // Navigate to clicked url
      const href = target.attr('href');
      const path = href.substr(href.lastIndexOf('/'));
      router.navigateTo(path);
    });

花一些时间浏览代码。我在各个部分添加了评论来解释正在发生的事情。您会注意到，在路由器的声明中，我们指定了`page404`使用错误模板的属性。现在让我们测试链接：

![format_png 3][]

链接现在应该可以工作了。但是我们有一个问题。单击`/exchange`或`historical`链接，然后刷新浏览器。我们得到与以前相同的错误 - `Cannot GET /exchange`。要解决此问题，请转到`server.js`并在监听代码之前添加此语句：

// Redirect all traffic to index.html
    app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

您必须使用Ctrl+C和执行重新启动服务器`npm start`。返回浏览器并尝试刷新。您现在应该可以看到页面正确呈现。现在，让我们尝试在 URL 中输入一个不存在的路径，例如`/exchanges`. 该应用程序应显示 404 错误消息：

![format_png 4][]

我们现在已经实现了必要的代码来创建我们的单页应用程序框架。现在让我们开始列出最新的货币汇率。

### **最新货币汇率** ###

对于这个任务，我们将使用[Fixer Latest Rates Endpoint][]。打开`.env`文件并添加您的 API 密钥。我们还将指定超时期限和我们将在页面上列出的符号。如果您的互联网连接速度较慢，请随意增加超时值：

API_KEY=<paste key here>
    PORT=3000
    TIMEOUT=5000
    SYMBOLS=EUR,USD,GBP,AUD,BTC,KES,JPY,CNY

接下来创建文件`lib/fixer-service.js`。在这里，我们将为我们的 Express 服务器编写帮助代码，以便轻松地从 Fixer 请求信息。复制以下代码：

require('dotenv').config();
    const axios = require('axios');
    
    const symbols = process.env.SYMBOLS || 'EUR,USD,GBP';
    
    // Axios Client declaration
    const api = axios.create({
      baseURL: 'http://data.fixer.io/api',
      params: {
        access_key: process.env.API_KEY,
      },
      timeout: process.env.TIMEOUT || 5000,
    });
    
    // Generic GET request function
    const get = async (url) => {
      const response = await api.get(url);
      const { data } = response;
      if (data.success) {
        return data;
      }
      throw new Error(data.error.type);
    };
    
    module.exports = {
      getRates: () => get(`/latest&symbols=${symbols}&base=EUR`),
    };

同样，花一些时间浏览代码以了解正在发生的事情。如果您不确定，您还可以查看[dotenv][]、[axios][]的文档并阅读[模块导出][Link 2]。现在让我们进行快速测试以确认该`getRates()`功能是否正常工作。

打开`server.js`并添加以下代码：

const { getRates } = require('./lib/fixer-service');
    
    ...
    // Place this block at the bottom
    const test = async() => {
      const data = await getRates();
      console.log(data);
    }
    
    test();

运行`npm start`或`node server`。几秒钟后，您应该得到以下输出：

{
      success: true,
      timestamp: 1523871848,
      base: 'EUR',
      date: '2018-04-16',
      rates: {
        EUR: 1,
        USD: 1.23732,
        GBP: 0.865158,
        AUD: 1.59169,
        BTC: 0.000153,
        KES: 124.226892,
        JPY: 132.608498,
        CNY: 7.775567
      }
    }

如果您得到与上述类似的内容，则表示代码正在运行。这些值当然会有所不同，因为费率每天都在变化。现在注释掉测试块并在将所有流量重定向到的语句之前插入此代码`index.html`：

// Express Error handler
    const errorHandler = (err, req, res) => {
      if (err.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        res.status(403).send({ title: 'Server responded with an error', message: err.message });
      } else if (err.request) {
        // The request was made but no response was received
        res.status(503).send({ title: 'Unable to communicate with server', message: err.message });
      } else {
        // Something happened in setting up the request that triggered an Error
        res.status(500).send({ title: 'An unexpected error occurred', message: err.message });
      }
    };
    
    // Fetch Latest Currency Rates
    app.get('/api/rates', async (req, res) => {
      try {
        const data = await getRates();
        res.setHeader('Content-Type', 'application/json');
        res.send(data);
      } catch (error) {
        errorHandler(error, req, res);
      }
    });

正如我们所看到的，有一个自定义错误处理函数，旨在处理可能在服务器代码执行期间发生的不同错误场景。发生错误时，会构造错误消息并将其发送回客户端。

让我们确认这段代码是否有效。重新启动 Express 服务器并将浏览器导航到此 URL：[localhost:3000/api/rates][localhost_3000_api_rates]。您应该会看到控制台中显示的相同 JSON 结果。我们现在可以实现一个视图，将这些信息显示在一个整洁、优雅的表格中。

打开`public/index.html`并`rates-template`用以下代码替换：

<script id="rates-template" type="text/x-handlebars-template">
      <h1 class="ui header">Currency Rates</h1>
      <hr>
      <div class="ui loading basic segment">
        <div class="ui horizontal list">
          <div class="item">
            <i class="calendar alternate outline icon"></i>
            <div class="content">
              <div class="ui sub header">Date</div>
              <span>{
       {date}}</span>
            </div>
          </div>
          <div class="item">
            <i class="money bill alternate outline icon"></i>
            <div class="content">
              <div class="ui sub header">Base</div>
              <span>{
       {base}}</span>
            </div>
          </div>
        </div>
    
        <table class="ui celled striped selectable inverted table">
          <thead>
            <tr>
              <th>Code</th>
              <th>Rate</th>
            </tr>
          </thead>
          <tbody>
            {
       {#each rates}}
            <tr>
              <td>{
       {@key}}</td>
              <td>{
       {this}}</td>
            </tr>
            {
       {/each}}
          </tbody>
        </table>
      </div>
    </script>

请记住，我们使用语义 UI 为我们提供样式。我希望您密切关注[Segment 加载][Segment]组件。这将表明在应用程序获取数据时让用户知道正在发生某些事情。我们还使用[Table UI][]来显示费率。如果您是 Semantic 的新手，请阅读链接文档。

现在让我们更新我们的代码`public/js/app.js`以使用这个新模板。用以下代码替换第一个`route.add('/')`函数：

// Instantiate api handler
    const api = axios.create({
      baseURL: 'http://localhost:3000/api',
      timeout: 5000,
    });
    
    // Display Error Banner
    const showError = (error) => {
      const { title, message } = error.response.data;
      const html = errorTemplate({ color: 'red', title, message });
      el.html(html);
    };
    
    // Display Latest Currency Rates
    router.add('/', async () => {
      // Display loader first
      let html = ratesTemplate();
      el.html(html);
      try {
        // Load Currency Rates
        const response = await api.get('/rates');
        const { base, date, rates } = response.data;
        // Display Rates Table
        html = ratesTemplate({ base, date, rates });
        el.html(html);
      } catch (error) {
        showError(error);
      } finally {
        // Remove loader status
        $('.loading').removeClass('loading');
      }
    });

第一个代码块实例化了一个 API 客户端，用于与我们的代理服务器进行通信。第二个块是用于处理错误的全局函数。它的工作只是在服务器端出现问题时显示错误横幅。第三个块是我们从`localhost:3000/api/rates`端点获取费率数据并将其传递`rates-template`给显示信息的地方。

只需刷新浏览器。您现在应该有以下视图：

![format_png 5][]

接下来我们将构建一个用于转换货币的界面。

### **兑换兑换** ###

对于货币转换，我们将使用两个端点：

*  [Fixer 的符号端点][Fixer]
 *  [免费货币转换器端点][Link 3]。

我们需要符号端点来获取支持的货币代码列表。我们将使用这些数据来填充用户将用来选择要转换的货币的下拉列表。在函数后面打开`lib/fixer-service.js`并添加这一行`getRates()`：

getSymbols: () => get('/symbols'),

创建另一个帮助文件 ,`lib/free-currency-service.js`并添加以下代码：

require('dotenv').config();
    const axios = require('axios');
    
    const api = axios.create({
      baseURL: 'https://free.currencyconverterapi.com/api/v5',
      timeout: process.env.TIMEOUT || 5000,
    });
    
    module.exports = {
      convertCurrency: async (from, to) => {
        const response = await api.get(`/convert?q=${from}_${to}&compact=y`);
        const key = Object.keys(response.data)[0];
        const { val } = response.data[key];
        return { rate: val };
      },
    };

这将帮助我们免费获得从一种货币到另一种货币的兑换率。在客户端代码中，我们必须通过将金额乘以费率来计算转换金额。现在让我们将这两个服务方法添加到我们的 Express 服务器代码中。打开`server.js`并相应更新：

const { getRates, getSymbols, } = require('./lib/fixer-service');
    const { convertCurrency } = require('./lib/free-currency-service');
    ...
    // Insert right after get '/api/rates', just before the redirect statement
    
    // Fetch Symbols
    app.get('/api/symbols', async (req, res) => {
      try {
        const data = await getSymbols();
        res.setHeader('Content-Type', 'application/json');
        res.send(data);
      } catch (error) {
        errorHandler(error, req, res);
      }
    });
    
    // Convert Currency
    app.post('/api/convert', async (req, res) => {
      try {
        const { from, to } = req.body;
        const data = await convertCurrency(from, to);
        res.setHeader('Content-Type', 'application/json');
        res.send(data);
      } catch (error) {
        errorHandler(error, req, res);
      }
    });

现在我们的代理服务器应该能够获取符号和转换率。请注意，这`/api/convert`是一个 POST 方法。我们将在客户端使用一个表单来构建货币转换 UI。随意使用该`test`功能来确认两个端点都在工作。这是一个例子：

// Test Symbols Endpoint
    const test = async() => {
      const data = await getSymbols();
      console.log(data);
    }
    
    // Test Currency Conversion Endpoint
    const test = async() => {
      const data = await convertCurrency('USD', 'KES');
      console.log(data);
    }

您必须为每次测试重新启动服务器。一旦您确认代码到目前为止工作正常，请记住注释掉测试。现在让我们处理我们的货币转换 UI。通过将现有代码替换为以下代码来打开`public/index.html`并更新：`exchange-template`

花点时间阅读脚本并了解正在发生的事情。我们正在使用[语义 UI 表单][UI 1]来构建界面。我们还使用 Handlebars 符号来填充下拉框。下面是 Fixer 的 Symbols 端点使用的 JSON 格式：

{
      "success": true,
      "symbols": {
        "AED": "United Arab Emirates Dirham",
        "AFN": "Afghan Afghani",
        "ALL": "Albanian Lek",
        "AMD": "Armenian Dram",
      }
    }

请注意，符号数据是地图格式。这意味着信息被存储为键值`{ {@key}}`对`{ {this}}`。现在让我们更新`public/js/app.js`并使其与新模板一起使用。打开文件并将现有的路由代码替换为`/exchange`以下内容：

// Perform POST request, calculate and display conversion results
    const getConversionResults = async () => {
      // Extract form data
      const from = $('#from').val();
      const to = $('#to').val();
      const amount = $('#amount').val();
      // Send post data to Express(proxy) server
      try {
        const response = await api.post('/convert', { from, to });
        const { rate } = response.data;
        const result = rate * amount;
        $('#result').html(`${to} ${result}`);
      } catch (error) {
        showError(error);
      } finally {
        $('#result-segment').removeClass('loading');
      }
    };
    
    // Handle Convert Button Click Event
    const convertRatesHandler = () => {
      if ($('.ui.form').form('is valid')) {
        // hide error message
        $('.ui.error.message').hide();
        // Post to Express server
        $('#result-segment').addClass('loading');
        getConversionResults();
        // Prevent page from submitting to server
        return false;
      }
      return true;
    };
    
    router.add('/exchange', async () => {
      // Display loader first
      let html = exchangeTemplate();
      el.html(html);
      try {
        // Load Symbols
        const response = await api.get('/symbols');
        const { symbols } = response.data;
        html = exchangeTemplate({ symbols });
        el.html(html);
        $('.loading').removeClass('loading');
        // Validate Form Inputs
        $('.ui.form').form({
          fields: {
            from: 'empty',
            to: 'empty',
            amount: 'decimal',
          },
        });
        // Specify Submit Handler
        $('.submit').click(convertRatesHandler);
      } catch (error) {
        showError(error);
      }
    });

刷新页面。您现在应该有以下视图：

![format_png 6][]

选择您选择的一些货币并输入金额。然后点击*转换*按钮：

![format_png 7][]

哎呀！我们刚刚遇到了一个错误场景。至少我们知道我们的错误处理代码是有效的。要找出错误发生的原因，请返回服务器代码并查看`/api/convert`函数。具体来说，请查看 `const { from, to } = req.body;`.

Express 似乎无法从`request`对象中读取属性。为了解决这个问题，我们需要安装可以帮助解决这个问题的中间件：

npm install body-parser

接下来，更新服务器代码如下：

const bodyParser = require('body-parser');
    ...
    
    /** Place this code right before the error handler function **/
    
    // Parse POST data as URL encoded data
    app.use(bodyParser.urlencoded({
      extended: true,
    }));
    
    // Parse POST data as JSON
    app.use(bodyParser.json());

再次启动服务器并刷新浏览器。尝试进行另一次转换。它现在应该可以工作了。

![format_png 8][]

现在让我们关注最后一点——历史货币汇率。让我们从视图开始。

### **历史货币汇率** ###

实现此功能就像组合第一页和第二页中的任务。我们将构建一个小表单，用户需要在其中输入日期。当用户点击提交时，指定日期的汇率将以表格形式显示。我们将使用来自 Fixer API 的[历史汇率端点][Link 4]来实现这一点。API 请求如下所示：

https://data.fixer.io/api/2013-12-24
        ? access_key = API_KEY
        & base = GBP
        & symbols = USD,CAD,EUR

响应将如下所示：

{
      "success": true,
      "historical": true,
      "date": "2013-12-24",
      "timestamp": 1387929599,
      "base": "GBP",
      "rates": {
        "USD": 1.636492,
        "EUR": 1.196476,
        "CAD": 1.739516
      }
    }

像这样打开`lib/fixer-service.js`和历史汇率端点：

...
      /** Place right after getSymbols **/
      getHistoricalRate: date => get(`/${date}&symbols=${symbols}&base=EUR`),
    ...

打开`server.js`并添加以下代码：

...
    const { getRates, getSymbols, getHistoricalRate } = require('./lib/fixer-service');
    ...
    /** Place this after '/api/convert' post function **/
    
    // Fetch Currency Rates by date
    app.post('/api/historical', async (req, res) => {
      try {
        const { date } = req.body;
        const data = await getHistoricalRate(date);
        res.setHeader('Content-Type', 'application/json');
        res.send(data);
      } catch (error) {
        errorHandler(error, req, res);
      }
    });
    ...

如果您对代码的排列方式有任何疑问，请参阅[GitHub 上][GitHub 1]`server.js`的完整文件。随意编写一个快速测试来确认历史端点是否正常工作：

const test = async() => {
      const data = await getHistoricalRate('2012-07-14');
      console.log(data);
    }
    
    test();

确认一切正常后，请记住注释掉测试块。现在让我们处理客户端代码。

打开`index.html`. 删除`historical-template`我们用作占位符的现有内容，并将其替换为以下内容：

先看一下表格。我想指出的一件事是语义 UI 没有正式的日期输入。然而，感谢[Michael de Hoog][]的贡献，我们可以使用[Semantic-UI-Calendar][Michael de Hoog]模块。只需使用 npm 安装它：

npm install semantic-ui-calendar

返回`public/index.html`并将其包含在脚本部分中：

...
    <script src="scripts/semantic-ui-css/semantic.min.js"></script>
    <script src="scripts/semantic-ui-calendar/dist/calendar.min.js"></script>
    ....

为了显示历史汇率，我们将简单地重复使用`rates-template`. 接下来打开`public/js/app.js`并更新现有的路线代码`/historical`：

再一次，花时间阅读评论并理解代码和它在做什么。然后重新启动服务器，刷新浏览器并导航到`/historical`路径。选择 1999 年之前的任何日期，然后单击*Fetch Rates*。你应该有这样的东西：

![format_png 9][]

如果您选择 1999 年之前的日期或未来的日期，提交表单时将显示错误横幅。

![format_png 10][]

### **概括** ###

现在我们已经结束了本教程，您应该会看到，在不使用框架的情况下构建由 REST API 支持的单页应用程序并不难。但是有几点我们应该关注：

*  **DOM 性能**。在我们的客户端代码中，我们直接操作 DOM。随着项目的发展，这很快就会失控，导致 UI 变得迟缓。
 *  **浏览器性能**。我们已经将很多前端库作为脚本加载到 中`index.html`，这对于开发目的来说是可以的。对于生产部署，我们需要一个捆绑所有脚本的系统，以便浏览器使用单个请求来加载必要的 JavaScript 资源。
 *  **单片代码**。对于服务器代码，将代码分解为模块化部分更容易，因为它在 Node 环境中运行。然而，对于客户端代码，除非你使用像[webpack][]这样的打包器，否则在模块中组织起来并不容易。
 *  **测试**。到目前为止，我们一直在进行手动测试。对于一个生产就绪的应用程序，我们需要建立一个像 Jasmine、Mocha 或 Chai 这样的测试框架来自动化这项工作。这将有助于防止重复出现错误。

当您在不使用框架的情况下进行项目开发时，这些只是您将面临的众多问题中的一小部分。使用诸如 Angular、React 或 Vue 之类的东西将帮助您减轻很多这些担忧。我希望本教程对您有所帮助，并能帮助您成为一名专业的 JavaScript 开发人员。

[Build a JavaScript Single Page App Without a Framework - SitePoint]: https://www.sitepoint.com/single-page-app-without-framework/
[JavaScript]: https://www.sitepoint.com/anatomy-of-a-modern-javascript-application/
[jQuery]: https://jquery.com/
[Handlebars]: https://handlebarsjs.com/
[Express]: https://expressjs.com/
[Axios]: https://github.com/axios/axios
[.js]: https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/
[Window _Git]: https://git-scm.com/downloads
[Git Bash]: https://gitforwindows.org/
[GitHub]: https://github.com/sitepoint-editors/single-page-application
[fixer.io API]: https://fixer.io/
[API]: https://free.currencyconverterapi.com/
[Link 1]: https://fixer.io/signup/free
[format_png]: https://img-blog.csdnimg.cn/img_convert/c781227f2f90dff35f921cbf0456689c.webp?x-oss-process=image/format,png
[UI]: https://semantic-ui.com/collections/menu.html
[localhost_3000]: http://localhost:3000/
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/707a6ecb3aeb5b0bdd1e0a4338fb4664.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/0a2c5326258fc52644149cbca7bcd3e5.webp?x-oss-process=image/format,png
[vanilla router]: https://www.npmjs.com/package/vanilla-router
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/0a836d44b358a9f85d26ae19a819d7f7.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/e1ec60d3061fc2df0cdfea94a63afc8d.webp?x-oss-process=image/format,png
[Fixer Latest Rates Endpoint]: https://fixer.io/documentation#latestrates
[dotenv]: https://www.npmjs.com/package/dotenv
[axios]: https://www.npmjs.com/package/axios
[Link 2]: https://www.sitepoint.com/understanding-module-exports-exports-node-js/
[localhost_3000_api_rates]: http://localhost:3000/api/rates
[Segment]: https://semantic-ui.com/elements/segment.html#loading
[Table UI]: https://semantic-ui.com/collections/table.html
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/c98d69cf87895b56af6263d0eb8bed0a.webp?x-oss-process=image/format,png
[Fixer]: https://fixer.io/documentation#supportedsymbols
[Link 3]: https://www.currencyconverterapi.com/docs
[UI 1]: https://semantic-ui.com/collections/form.html
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/d71f197706cde18069746807a8fbf716.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/e1a16a3bd18fb8db1028aacc2002f3f4.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/0c97a08b7f46d3db11c14acccfc9b4eb.webp?x-oss-process=image/format,png
[Link 4]: https://fixer.io/documentation#historicalrates
[GitHub 1]: https://github.com/sitepoint-editors/single-page-application/blob/master/server.js
[Michael de Hoog]: https://github.com/mdehoog
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/3a407781c6aba41bbf920d9ad78eef60.webp?x-oss-process=image/format,png
[format_png 10]: https://img-blog.csdnimg.cn/img_convert/a02d4ff54b997fd6bb4583989dfe111c.webp?x-oss-process=image/format,png
[webpack]: https://www.sitepoint.com/beginners-guide-webpack-module-bundling/