Question

我正在尝试使用API连接到我的Airtable基地，但它不会显示项目。

如果在多个文件中丢失了我的完整代码，但我却减去了实际的api密钥和基本ID，但是我看不到自己在做什么错，有什么想法吗？

这是我得到的屏幕快照。

这是我的html代码

    <!DOCTYPE html>
    <html>
      <head>
        <title>Airtable Furniture Gallery</title>
        <meta name="description" content="Rendering Airtable data in a web page">
        <link id="favicon" rel="icon" href="https://glitch.com/favicon.ico" type="image/x-icon">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/style.css">
      </head>
      <body>
        <header>
          <h1>
            Furniture Gallery
          </h1>
          ⚡️ Powered by <a href="https://airtable.com" target="_blank">Airtable</a>!
          Fetches data from <a href="https://airtable.com/shrS8HlgVQE7mJbfB" target="_blank">this base.</a>
        </header>

        <main id="data-container">
          Loading...
        </main>

        <script src="https://button.glitch.me/button.js" data-style="glitch"></script>
        <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>

        <!-- Your web-app is https, so your scripts need to be too -->
        <script src="https://code.jquery.com/jquery-2.2.1.min.js"
                integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
                crossorigin="anonymous"></script>
        <script src="/client.js"></script>

      </body>
    </html>

这是我的client.js文件

    // client-side js
    // run by the browser each time your view template is loaded

    $(function() {
      $.getJSON('/data', function(data) {
        var $dataContainer = $('#data-container');

        if (data.error) {
          $dataContainer.html('Error! ' + data.error);
          return;
        }

        // Clear the loading message.
        $dataContainer.html('');

        data.records.forEach(function(record) {
          var $galleryCard = $('<div class="gallery-card" />');
          if (record.picture[0]) {
            // Just show the first picture, if it has one.
            $('<img />').attr('src', record.picture[0].url).appendTo($galleryCard);
          }
          var $label = $('<strong />').text(record.name);
          $galleryCard.append($label);
          $dataContainer.append($galleryCard);
        });
      });
    });

这是package.json

    {
        "name": "airtable-example",
        "version": "0.0.1",
        "description": "Display data from an Airtable base",
        "main": "server.js",
        "scripts": {
            "start": "node server.js"
        },
        "dependencies": {
        "express": "^4.12.4",
        "airtable": "0.5.0"
        },
        "engines": {
            "node": "6.9.x"
        },
        "keywords": [
            "node",
            "express",
            "airtable"
        ],
        "license": "MIT"
    }

这是我的server.js

    // server.js
    // where your node app starts

    // We're going to use the "Product Catalog and Orders" base template:
    // https://airtable.com/templates/featured/expZvMLT9L6c4yeBX/product-catalog-and-orders
    var Airtable = require('airtable');
    var base = new Airtable({
      apiKey: process.env.AIRTABLE_API_KEY,
    }).base(process.env.AIRTABLE_BASE_ID);
    var tableName = 'Furniture';
    var viewName = 'Main View';

    var express = require('express');
    var app = express();

    // http://expressjs.com/en/starter/static-files.html
    app.use(express.static('public'));

    // http://expressjs.com/en/starter/basic-routing.html
    app.get("/", function(request, response) {
      response.sendFile(__dirname + '/views/index.html');
    });

    // Cache the records in case we get a lot of traffic.
    // Otherwise, we'll hit Airtable's rate limit.
    var cacheTimeoutMs = 5 * 1000; // Cache for 5 seconds.
    var cachedResponse = null;
    var cachedResponseDate = null;

    app.get("/data", function(_, response) {
      if (cachedResponse && new Date() - cachedResponseDate < cacheTimeoutMs) {
        response.send(cachedResponse);
      } else {
        // Select the first 10 records from the view.
        base(tableName).select({
          maxRecords: 10,
          view: viewName,
        }).firstPage(function(error, records) {
          if (error) {
            response.send({error: error});
          } else {
            cachedResponse = {
              records: records.map(record => {
                return {
                  name: record.get('Name'),
                  picture: record.get('Picture'),
                };
              }),
            };
            cachedResponseDate = new Date();

            response.send(cachedResponse);
          }
        });
      }
    });

    // listen for requests :)
    var listener = app.listen(process.env.PORT, function() {
      console.log('Your app is listening on port ' + listener.address().port);
    });

这是我的style.css

    /* styles */
    /* called by your view template */

    * {
      box-sizing: border-box;
    }

    body {
      font-family: helvetica, arial, sans-serif;
      margin: 25px;
    }

    h1 {
      font-weight: bold;
      font-size: 48px;
      color: Indigo;
      margin-bottom: 0;
    }

    header {
      margin-bottom: 2em;
    }

    footer {
      margin-top: 50px;
      padding-top: 25px;
      border-top: 1px solid lightgrey;
    }

    footer > a {
      color: #BBBBBB;
    }

    main {
      display: flex;
      flex-wrap: wrap;
    }

    .gallery-card {
      min-height: 160px;
      width: 200px;

      border: 1px solid #777;
      border-radius: 5px;
      box-shadow: 2px 2px 0 2px rgba(0,0,0,0.2);
      padding: 0.5em;
      margin-left: 1em;
      margin-bottom: 1em;
    }

    .gallery-card img {
      border-radius: 5px;
      margin-bottom: 0.5em;
      width: 100%;
    }

这是我的.env文件

    # Environment Config

    # store your secrets and config variables in here
    # only invited collaborators will be able to see your .env

    # reference these in your code with process.env.CONFIG

    # Your Airtable API key. It'll look like key123asdf123asdf
    AIRTABLE_API_KEY=key123asdf123asdf

    # Your Airtable base ID. It'll look like app123asdf123asdf
    AIRTABLE_BASE_ID=app123asdf123asdf

    # note: .env is a shell file so there can't be spaces around '=

使用API和Node.js连接到Airtable

0 个答案:

使用API​​和Node.js连接到Airtable

0 个答案:

使用API和Node.js连接到Airtable