簡單的 Javascript 複習，適合那些感覺落後或不知道從哪裡開始使用函數、陣列、循環、JSON 和 NoSQL 的人

在這裡我們將學習 Plain Vanilla JS，而不使用 NodeJS 或外部函式庫。我們將從一個開箱即用的用例開始，將一些 Google 工作表資料轉換為 JSON 並將其儲存在 AWS S3 儲存桶中，然後使用純 js 取得它。大多數課程都是從 hello world 程式開始，沒有太多其他內容，但在這裡我們實際上有一些東西可以立即編程，這樣我們就可以練習數組和循環，它們是任何編程語言的關鍵支柱。另外，您可以在這裡涉足數據科學的世界，也許可以像我一樣以此為職業。

當我們第一次研究資料時，我們會想到 SQL，但在許多應用程式中 SQL 是多餘的並且不需要。在有一些指標的儀表板中，我們可以使用簡單的 JSON 平面檔案作為我們的資料來源，與其他資料無關。儀表板可以使用這種 NoSQL 格式，是滿足行銷團隊報告需求的熱門選擇。

為了設定我們的環境，我們只需要 Google Chrome 和 json chrome 擴充功能來將電子表格資料轉換為 json。然後我們需要免費的 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，到頁面最右側
然後打開一個空白的Google工作表，您將看到 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中文網其他相關文章！