在这里我们将学习 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的文件夹，并且与我们启动服务器的终端文件夹相同。
先试试这个
- 输入 python -m http.server 或
- 如果上面不起作用，请输入 python3 -m http.server
按回车键，Python 3 将立即从执行命令的目录启动一个简单的 HTTP 服务器。这个目录还应该有一个索引文件
或选项 3（如果其他方法不起作用）
- 旧版本请输入 python -m SimpleHTTPServer 8000
如何在 Python 路径中创建索引（主）文件..将其保存到 Web 服务器所在的同一文件夹中。复制此代码并另存为index.html
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登录后复制
登录后复制
登录后复制
准备一些数据
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文件以包含以下代码，该代码与我们将在下面用于从公共服务器访问数据的代码不同
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登录后复制
登录后复制
登录后复制
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)，编辑并替换为以下内容并保存
<!DOCTYPE html>
<body>
<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>
</body>
<!-- next up..we need to return this data in table format-->
</html>
登录后复制
5 转到属性选项卡，然后按静态网络托管，最后一项。然后单击编辑然后启用然后保存。这会将您的存储桶链接转换为公共网站。
6 返回对象选项卡并按上传，然后转到保存新创建的 JSON 文件的位置并完成此操作。您的 json 文件现在将位于 s3 中。
7 JSON 文件上传成功后，它将出现在您的 s3 存储桶的对象部分中。双击 JSON 文件，您将进入属性选项卡，在其中您可以看到对象概述。单击提供的对象 url，将显示原始 JSON 数据。复制此 url 链接并将其保存在某处，因为您将需要它从 Javascript 获取数据。此 url 链接提供对新创建的通用网站的访问，这是一个可公开访问的 S3 存储桶，用作临时网站。您可以将文件保存到此存储桶并随时与他人分享。
8 从 AWS 访问我们的 json 文件需要与本地服务器中使用的编码不同的编码。首先，我们需要向用户提供我们网页的链接。我的虚构订单数据的公共链接是
https://rickd.s3.us-east-2.amazonaws.com/orders4.json 那么我们的代码应该如下所示，这与我们的原始代码不同。对于此代码，我们不显示数组，而是添加表格元素，以便以表格格式显示
<!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
<p> hi there, this is our first html page </p>
</body>
</html>
登录后复制
登录后复制
登录后复制
接下来，这是我们添加标题和样式的相同代码
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
登录后复制
登录后复制
登录后复制
第二部分
数组、循环和函数、一些编码构建块、编程的基础要素
数组 - 最重要的数据结构
在 javascript 中，我们的数据被构造为由大括号括起来并由逗号分隔的键值对，一个数组包含多个 javascript 对象，每个对象代表一行数据。这称为 JSON 格式或 Javascript 对象表示法。
循环/迭代 - 最重要的循环是 for 循环，但你应该研究其他类型的循环。 for 循环迭代数据数组并为每次传递执行一个操作。在我们的用例中，它只是通过获取请求向前端显示数据。
函数
函数是一段代码、一组指令，它响应某种事件（例如按下按钮）而执行。在某些情况下，函数不是必需的，但在其他情况下，某些代码需要函数才能正常工作。函数要么有名称，要么是匿名的。它们可以被调用，也可以自行执行。可怕的箭头符号一开始很吓人，但它被广泛使用，所以要习惯它。
条件逻辑最后但并非最不重要的一点是我们还有 if / else 语句。 if(条件) {则执行此操作} else {执行此操作}
总之，有必要研究所有这些主题以获得更多知识，因为我在本课中仅提供一个小概要。我只提供一个路线图，某种入门读物，而你作为程序员必须学习其余的。
编码愉快！！
附录
我们的普通 js、nosql 用例是一个条形图，您可以在此处找到代码......在 https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
关于作者 Rick Delpo.. https://javasqlweb.org/about.html
以上是简单的 Javascript 复习，适合那些感觉落后或不知道从哪里开始使用函数、数组、循环、JSON 和 NoSQL 的人的详细内容。更多信息请关注PHP中文网其他相关文章！
