# restful api 串接 1

###### tags: `restful api`

*以下大部分資料是看網路資料和影片心得*

開始前有一些軟體需要安裝(方法參考 Alex 宅幹嘛影片Alex)

Git : https://git-scm.com/​
Node.js : https://nodejs.org/​
nvm : https://github.com/creationix/nvm​
nvm-window : https://github.com/coreybutler/nvm-wi...​
VSCode : https://code.visualstudio.com/

註:node偶數版會長期支援,奇數版只會短期支援,開發軟體長期建議使用偶數版本.

**vscode安裝套件**
* GitLens — Git supercharged
* Git history
* Gitflow
* Gitignore-right click on the file to be added in gitignore.
* git-autoconfig
* [cndjs](https://hsiangfeng.github.io/vscode/20191212/2147775133/)-可以不用一直去找cdn的套件

nvm部分從 52:43開始,因為我本來就安裝好node、nvm所以就沒看完

---

### 更新node版本到最新
1.選取專案資料夾,並按`ctrl+~` 打開終端機

2.在影片安裝在專案資料夾,但因為之前我已經有安裝過node,做glup,當時path是C:\Users\user\AppData\Roaming\nvm ,在專案資料夾安裝是會失敗的,所以退出從來選取Roaming\nvm這個file重新開始.

3.在終端機輸入`nvm list`,跑出以下畫面,看到現在安裝版本


4.在終端機輸入 `nvm list available` 會列出現在可以安裝版本,我們要安裝**LES**最新版本


5.輸入要安裝的版本號` nvm install v14.16.1` , 並確認使用此版本`nvm use 14.16.1` , 接著WINDOWS會跳出權限視窗按確認,才算安裝成功.

6.可以分別輸入node -v 和 npm -v 查詢現在最新安裝版本

---

### jSON檔

1.回到JSON_TEST 練習json檔
2.開啟data.json
3.json最外層是`物件{ } ` 假設有很多名單可以輸入`{'user':[]}` ,會發現user出現紅色字,原因是和js檔不一樣,在json檔表達方式為`{"user":[]},`**使用雙引號"" ,非單引號''.**



4.在json檔裡user裡面設定三筆名單,名單裡各有id&name兩筆資料
表現方法為

{

  "users":[
            {
                "id":1,
                "name":"Andy"
            },
            {
                "id":2,
                "name":"Amy"
            },
            {
                "id":3,
                "name":"Ann"
            },
   

         ]

}


5.安裝**json-server** (需安裝node)

[json-server](https://github.com/typicode/json-server)

按造github資料在終端機輸入

npm install -g json-server

他會在電腦node安裝資料夾裡安裝json-server,而不是在JSON_TEST裡面

`C:\Users\user\AppData\Roaming\nvm\node_global\node_modules\json-server\lib\cli\bin.js`


### Start JSON Server

1.按造github資料在終端機輸入

 
 json-server --watch db.json

以我們資料夾 JSOAN_TEST/DATA/data.josn為例
要輸入`json-server --watch ./deta/deta.json`

終端機回報

'json-server' 不是內部或外部命令、可執行的程式或批次檔。

原因是Nodejs內置的npm默認配置路徑出錯([詳解](https://blog.nowcoder.net/n/bf00b36c63e74c7685fa1852fa3638c6))

2.在終端機輸入`npm config ls` 跑出


` prefix = "C:\\Users\\user\\AppData\\Roaming\\nvm\\node_global"`

是我們要的path,但記得修改\\為\

` prefix = "C:\Users\user\AppData\Roaming\nvm\node_global"`

3.現在來修改環境變數,到windows搜尋**環境變數**, 這裡有其他解說[詳解](https://hjwang520.pixnet.net/blog/post/404935456-win-10%E8%A8%AD%E5%AE%9A%E7%92%B0%E5%A2%83%E8%AE%8A%E6%95%B8)

4.打開進階>環境變數

5.系統變數的path點兩下

6.點新增貼上`C:\Users\user\AppData\Roaming\nvm\node_global`
按確定儲存.


7.回到終端機輸入`json-server`跑出以下資訊表示成功


8.接著輸入`json-server --watch ./deta/deta.json`跑出以下資訊表示成功


*參考網路資訊*

>
> [[ Alex 宅幹嘛 ] 👨‍💻 JSON 與 RESTFUL API 串接一次搞定](https://www.youtube.com/watch?v=R8GL5y49iJc)
> [[ Alex 宅幹嘛 ] 👨‍💻 我與我的網站開發環境工具 (Windows)](https://www.youtube.com/watch?v=bcgL1sCjAJA)