简单的 Javascript 复习，适合那些感觉落后或不知道从哪里开始使用函数、数组、循环、JSON 和 NoSQL 的人

在这里我们将学习 Plain Vanilla JS，而不使用 NodeJS 或外部库。我们将从一个开箱即用的用例开始，将一些 Google 工作表数据转换为 JSON 并将其存储在 AWS S3 存储桶中，然后使用纯 js 获取它。大多数课程都是从 hello world 程序开始，没有太多其他内容，但在这里我们实际上有一些东西可以立即编程，这样我们就可以练习数组和循环，它们是任何编程语言的关键支柱。另外，您可以在这里涉足数据科学的世界，也许可以像我一样以此为职业。

当我们第一次研究数据时，我们会想到 SQL，但在许多应用程序中 SQL 是多余的并且不需要。在具有一些指标的仪表板中，我们可以使用一个简单的 JSON 平面文件作为我们的数据源，与其他数据没有关系。仪表板可以使用这种 NoSQL 格式，是满足营销团队报告需求的流行选择。

为了设置我们的环境，我们只需要 Google Chrome 和用于将电子表格数据转换为 json 的 json chrome 扩展。然后我们需要免费的 AWS 和 S3 存储桶作为我们的通用网站。对于 IDE，我们将仅使用 Windows 记事本。我们还需要一个本地网络来获取数据，因为从 C 驱动器获取数据将不起作用，因为 javascript fetch api 使用 http 协议，因此需要一个 Web 服务器。在免费 AWS 上公开之前，我们将首先设置一个本地 Web 服务器来测试我们的数据。为此，我们将使用简单的 Python。

设置环境
设置本地 Python 服务器和索引文件的步骤

在创建 AWS 远程服务器之前，我们需要首先使用 Python 设置本地 Web 服务器..以下是如何执行此操作

首先查明是否安装了 Python...打开命令提示符，默认为您的主文件夹 c:Usersyourname 并输入 python。如果显示版本信息，则已安装，您可以转到下面的步骤 6（但请确保首先将索引文件保存在您的主文件夹中）
如果您没有安装 python，请按照以下说明操作

Windows 中的 Python 服务器
1 进入搜索区域并输入 cmd 然后点击命令提示符，将打开一个黑屏，其中显示您的主文件夹路径（通常为 C:UsersyourName）
2 输入python，如果安装了会显示版本号
3 如果未安装，则会出现获取按钮，按此按钮，下载将在几分钟内安装（或者只是从 chrome 下载 python）
4 完全安装后重新打开cmd提示符并再次输入python
将显示 5 版本信息...如果已经安装了 python，这里就是我们开始的地方
6 输入 python -m http.server 这将启动服务器（保持此 cmd 窗口打开）
7 确保您在主文件夹中保存了索引文件（在文件资源管理器中单击 c:，然后单击用户，然后单击您的姓名以打开主文件夹）
7a 在步骤 8 中转到本地主机时保持 cmd 打开...关闭 cmd 需要重新打开并重新开始
8 转到 chrome 并输入 localhost:8000，您的默认索引页面将会出现....请参阅下面的创建索引文件

Mac 上的 Python 服务器
在 Mac 上打开终端并从上面的步骤 2 开始....除了可能需要尝试上面 3 个不同的选项，具体取决于预安装的 python 版本。我们的主文件夹应该是安装Python的文件夹，并且与我们启动服务器的终端文件夹相同。

先试试这个

1. 输入 python -m http.server 或
2. 如果上面不起作用，请输入 python3 -m http.server 按回车键，Python 3 将立即从执行命令的目录启动一个简单的 HTTP 服务器。这个目录还应该有一个索引文件 或选项 3（如果其他方法不起作用）
3. 旧版本请输入 python -m SimpleHTTPServer 8000

如何在 Python 路径中创建索引（主）文件..将其保存到 Web 服务器所在的同一文件夹中。复制此代码并另存为index.html

     

<header>
</header>

   <p> hi there, this is our first html page </p>

准备一些数据

1 复制此数据并将其粘贴到空白的 Google 工作表中
这是我们虚构的公司，有一个订单数据库

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

非常重要 - 粘贴数据后，当它仍然突出显示时，在 Google 表格中按数据，然后将文本拆分为列

2 获取 json chrome 扩展
在创建工作表之前启用 chrome 将其另存为 json。
我发现了这个简单的快捷方式，可以将 JSON 图标添加到 google 工作表工具栏...这是一个 chrome 扩展
首先转到此链接 https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
然后按添加到 chrome，到页面最右侧
然后打开一个空白的谷歌工作表，您将看到 JSON 图标作为页面顶部附近工具栏中的最后一项

3 将数据转换为json
将以上数据粘贴到工作表中，然后将文本粘贴到列中，然后按 json 图标并转到下载以获取 json 文件

4 将此 json 文件保存在 python 和索引文件所在的同一文件夹中...我将其另存为 order.json

执行我们的程序

5 从索引文件中获取数据...测试我们的服务器和文件配置

更改您的index.html文件以包含以下代码，该代码与我们将在下面用于从公共服务器访问数据的代码不同

     

<header>
</header>

   <p> hi there, this is our first html page </p>

6 调用localhost:8000并查看数据
7 在本地服务器上使用 json 之后，我们可以在 AWS 中创建一个公共 S3 存储桶

将 AWS S3 存储桶配置为我们的公共服务器

远程存储 JSON 文件的最简单方法是在 AWS S3 中。通过不在传统数据服务器中创建模式，我们变得无服务器。我们在带有 S3 的 AWS 云中，可以从任何地方连接到我们的存储桶链接。如前所述，noSQL S3 方法有一些局限性。但它也有很大的好处。在处理数据时，人性倾向于只使用一张表，就像过去我们严重依赖一张 Excel 表一样。这种平面文件格式可以处理一些指标，因此我们不会用复杂性轰炸我们的受众。平面文件的理想用例是简单的仪表板。

首先我们创建一个 AWS s3 存储桶，然后上传 JSON 文件。我们的做法如下：

1 注册免费套餐 AWS，从 AWS 控制台转到 S3 并创建唯一的存储桶名称

2 将其公开，方法是转到存储桶权限选项卡以关闭阻止公共访问 - 转到阻止公共访问部分，编辑、取消选中并保存

3 留在权限选项卡中，然后编辑存储桶策略，删除其中的内容并替换为以下内容，然后保存更改（请记住将下面的存储桶名称替换为实际名称）

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

4 然后，在权限选项卡中转到跨源 (cors)，编辑并替换为以下内容并保存

    <div id="myData"></div> <!--data result displays in this html div-->

    <script type="text/javascript">
convert();  //run the convert function..this converts json to html and displays to the front end in the myData div
                 // async is needed to run await which is the newest way to return a promise..await must be used inside a function
    //When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
                //let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
                      //replace rickd with your bucket name
   let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
                let data = await response.json(); //getting data array in json format...waiting for all the data to come in

                    //then iterate over javascript array for as many times as there are js objects inside the array
            for (var i = 0; i < data.length; i++) {
                data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
              } //end for loop
         //we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
  //console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format

} //end function
    </script>


<!-- next up..we need to return this data in table format-->

以上是简单的 Javascript 复习，适合那些感觉落后或不知道从哪里开始使用函数、数组、循环、JSON 和 NoSQL 的人的详细内容。更多信息请关注PHP中文网其他相关文章！