github製作json文件的簡單介紹

本文目錄一覽：

• 1、如何生成json文件
• 2、使用React製作簡易財務報表
• 3、怎麼生成json文件？？？急！！！！

如何生成json文件

創建json文件,桌面上找個空點的地方右建新建文本文件,名字改為 xxxx.json 這就是json文件了噻複製到vs里就好了噻

vs裏面可以看看新建的時候有沒有自定義文件

至於json文件裏面數據格式,那隻能看你了

使用React製作簡易財務報表

1.創建項目

2.cd到該文件夾

3.運行（開發模式）

如果再起一個服務器，可能會出現端口號不會自動排的現象，針對這種情況，可以在package.json中自行設置端口號，如下圖

4.模擬數據服務器

    4.1  使用GitHub登錄，創建一個新項目

    4.2點擊進入

    4.3點擊進入

       4.4填寫信息

            4.4.1填寫路由名稱（數據表名）

            4.4.2填寫數據表裡的內容

            4.4.3生成鏈接

            4.4.4在瀏覽器地址欄中輸入地址加路由records

4.5訪問數據

        第一種方法：通過外網進行訪問

        ①瀏覽器地址欄測試數據訪問

        ②終端測試數據訪問

        ③瀏覽器console debug欄測試api接口（get方式）

        第二種方法：將json數據存放在本地服務器進行訪問

        1.鏈接：

        2.全局安裝

        3.在fssytem中創建一個json文件格式為{「records」:}，然後將前文通過外 網地址訪問到的數據賦值粘貼到：後面

           4.運行服務器

        5.在地址欄中輸入命令中的http地址（服務器運行中）

  4.6App.js中

4.7發送請求獲取數據（在項目中使用jQuery和axios優化App.js）之使用 jQuery方式

    4.7.1命令安裝jquery

    4.7.2 App.js中導入jQuery組件

    4.7.3使用jQuery發請求

    4.7.4使用傳統的map遍歷(App.js中)

    4.7.5records文件中

        4.7.4使用ES6擴展運算符

        4.7.5Records.js

        4.8優化部分

                4.8.1需要在record.js優化時間顯示

                4.8.2優化jQuery引入app.js

                4.8.3引入顯示狀態和錯誤顯示狀態

                        4.8.3.1定義isloaded(是否完成加載)，定義error

                        4.8.3.2重設狀態機，分別設置成功時和失敗時的狀態

                        4.8.3.3視情況進行判斷，寫出對應的顯示內容

4.9發送請求獲取數據（在項目中使用jQuery和axios優化App.js）之使用 axios方式（與jQuery兩種方法任選其一即可）

網址：

    4.9.1安裝

    4.9.2導入

    4.9.3使用因為axios會將所獲取的數據存在data的集合中，所以需要response.data

        4.9.4引入顯示狀態和錯誤顯示狀態

5.0優化URL請求，目的是使用環境變量來將URL請求地址寫靈活，方便統一管理。

方法一 ：src中創建一個utils文件夾，創建一個Config.js文件，配置環境變量

App.js中導入

使用

由於windows系統不支持配置環境變量，解決方式如下:

Package.json中配置（紅框之間有空格）

重啟服務器

頁面顯示

方法二：

在根目錄下創建一個.env.development.local 文件（與src平級）

在package.json中刪除之前配置的東西，恢復原狀

重啟服務器

繼續優化

    1.刪除原來的後綴

    2.App.js中簡寫

       3.config.js中

        4.App.js

�        5.提取公共變量

功能：增加input框，實現添加，編輯，取消，更新，刪除等功能

6.0增加input框

6.1在components文件夾中創建一個名為Input的文件，因為bootstrap按鈕和input框相比較大，所以需要另外設置css樣式進行引入使用

效果圖如下：

6.2實現添加提交功能

    1. Input文件中通過設置input的onChange事件來獲取輸入的值

        1.1調用selectedinfo方法

        1.2為了保證所有選框都填寫完整才可以提交的情況，這裡需要設置一下button的屬性，當所有都完整的時候，button才可以點擊

    1.3點擊button進行提交

        1.3.1使用post方式將數據提交到服務器上（在Config.js文件配置post 方法並開放）

        1.3.2在子組件RecordForm中導入上文方法並使用，服務器響應成功後將該值傳遞給父級App

    1.3.3父級App接收到值後進行處理負責顯示在界面上

        1.3.3.1導入input文件

�        1.3.3.2設置與子級對應的行間屬性handleNewRecord

        1.3..3.3設置addRecord方法

6.3實現編輯功能

        1.先在增加編輯、刪除功能鍵，並在App.js文件中增加一個操作表頭。

        2.當點擊編輯的時候，前面的內容狀態變為input可修改的狀態框

                2.1設置一個中間變量edit,默認狀態是false，當點擊編輯按鈕時，edit為true，對應內容狀態為可輸入的input框。Edit的狀態決定使用哪個模板.

                    2.1.1設置edit中間變量

                    2.1.2點擊編輯按鈕調用handleEdit事件（定義點擊編輯前的狀態模板）

                2.1.3定義handleEdit方法，並重置狀態機設置edit狀態

            2.1.4定義點擊編輯按鈕後的狀態模板

            2.1.5根據edit的狀態來決定使用哪個模板

6.4實現取消功能（直接在取消調用與編輯按鈕一樣的方法即可）

6.5實現更新功能

   1.先提交數據到服務器,傳值給父級

        1.1在Config,js文件中配置更新的put方法，為了得到更新的是哪一個數據，還需要傳id值

        1.2在Record導入該方法，以便在更新事件中使用

        1.3給更新按鈕增加更新事件

        1.4定義該更新事件

            修改前

            修改後

    Record文件中所有之前格式類似為this.props.data的都改為如下格式：

        1.5為了找到當前這個input框的值，需要給input增加一個ref行間屬性

2.父級app進行處理顯示

    2.1設置與子

怎麼生成json文件？？？急！！！！

json說白了只是一串長得像js對象字符串，不是一個後綴名或者一種文件形式，所以只要將這個字符串傳給前端js處理就行了，json本身就是一個對象，所以你可以直接賦值給一個對象就行。