- json format
https://jsonformatter.curiousconcept.com/

- Postman URL 連結(使用 localhost)
http://localhost/vue-first-project-0520/querycourse/index.php

###### tags: `網頁讀書會`

# 05/20 共筆：Vue.js 初學 (四)
[TOC]
:::warning
沒上過之前讀書會的人，一定要看過上次的共筆喔！
1. [04/22 | 共筆](/-LHK2J-EQcqSO2yiWDsrIg)
2. [04/29 | 共筆](/8jQnwK_mTMWnRkTg1975fQ)
3. [05/13 | 共筆](/Hmmw6_UtSQC2q_i8TP3uOg)
:::

### 課前準備
#### 上次進度（5/13）
- 安裝 extension [連結](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)

- [專案檔案 - Google Drive 雲端連結](https://drive.google.com/drive/folders/1X8iwFZH3deV5He_x0wXZE0IPQ4aZOt0s?usp=sharing)

- [安裝 Postman](https://www.postman.com/downloads/)

- 下載完畢後，按照以下步驟開啟專案
1. 把專案放到 XAMPP 的`htdocs`資料夾底下，並解壓縮
:::info
Windows: `C:\XAMPP\htdocs\`

macOS: `/Applications/XAMPP/xamppfiles/htdocs`
:::
2. 使用 VS code 開啟 vue-first-project-0513
3. 使用 npm 安裝所需 module，輸入指令：

    npm install

4. 啟動伺服器輸入指令：

    npm run dev

5. 開啟 XAMPP 並啟動 Apache

:::warning
在開啟專案時，請確認你的路徑是否正確
:::

XAMPP(要確定Apache 可以正常開啟)

Windows: `C:\XAMPP\htdocs\`

macOS: `/Applications/XAMPP/xamppfiles/htdocs`

### 目標
- Call 資料的 API

=> 能夠在常見問題的問題欄中有我們想要的**真實資料**，不再只是放上假資料

##### 0. 預覽畫面設定
- f12 開啟預覽畫面，使用 手機預覽畫面 （iPhone 12 Pro）
- 點選回應式 => iPhone 12 Pro

#### 1. 安裝好 Postman

#### 2. 開啟 台科大 課程查詢系統
- [台科大 課程查詢系統](https://querycourse.ntust.edu.tw/querycourse/#/)
- 選擇 Network (網路)，將頁面切換到“通識課程”
- 用 Fetch/XHR 過濾出我們要的 couse api
- 將 URL 複製下來，貼至 postman


// URL
https://querycourse.ntust.edu.tw/querycourse/api/courses

- 開啟 Postman

- 貼到 Postman 的 URL 列，並且把 method 改成 POST

- 網頁這邊切到 payload，切換到 "view source" 把東西複製下來(copy object)，到 json parser 重新格式化後，貼到 postman

// 要複製的內容
{
    "Semester": "1112",
    "CourseNo": "",
    "CourseName": "",
    "CourseTeacher": "",
    "Dimension": "",
    "CourseNotes": "",
    "ForeignLanguage": 0,
    "OnlyGeneral": 1,
    "OnleyNTUST": 0,
    "OnlyMaster": 0,
    "Language": "zh"
}

- 在 postman 中 body 欄位，到 raw 後，切換到 JSON 格式，並把剛剛格式化後的 payload 貼上，確認**送出**後是否能拿到正確回傳值

- 確認我們成功拿到資料後，開啟右方的程式碼，切換到 `javascript - Fetch`，我們可以看到如何用程式去呼叫此 api

- Postman 要輸入的本地連結 => `http://localhost/vue-first-project-0520/querycourse/index.php`

-

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "Semester": "1112",
  "CourseNo": "",
  "CourseName": "",
  "CourseTeacher": "",
  "Dimension": "",
  "CourseNotes": "",
  "ForeignLanguage": 0,
  "OnlyGeneral": 1,
  "OnleyNTUST": 0,
  "OnlyMaster": 0,
  "Language": "zh"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://localhost/vue-first-project-0520/querycourse/index.php", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

- 依然報錯

- 安裝 extension [連結](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)

- 安裝好後，記得打開 Extension

- 開啟 Open Option Page

- 把 2、3 打勾，5 勾選星號

- 再輸入一次
- 

#### 3. 建立 funtion
- 到專案裡，建立 function

function getAPI(){
    let raw = JSON.stringify({
    "Semester": "1112",
    "CourseNo": "",
    "CourseName": "",
    "CourseTeacher": "",
    "Dimension": "",
    "CourseNotes": "",
    "ForeignLanguage": 0,
    "OnlyGeneral": 1,
    "OnleyNTUST": 0,
    "OnlyMaster": 0,
    "Language": "zh"
    });

    let requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
    };

    fetch("http://localhost/vue-first-project-0520/querycourse/index.php", requestOptions)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
}
getAPI();

- 重整網頁畫面，就可以看到有輸出結果
- 定義變數，

const loading = ref(ref)
const data = ref([])

- 更改 fetch 程式碼，把得到的資料放到變數當中

function getAPI(){
    let raw = JSON.stringify({
    "Semester": "1112",
    "CourseNo": "",
    "CourseName": "",
    "CourseTeacher": "",
    "Dimension": "",
    "CourseNotes": "",
    "ForeignLanguage": 0,
    "OnlyGeneral": 1,
    "OnleyNTUST": 0,
    "OnlyMaster": 0,
    "Language": "zh"
    });

    let requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
    };

    fetch("http://localhost/vue-first-project-0520/querycourse/index.php", requestOptions)
    .then(response => response.json())
    .then(result => {
        loading.value = false
        data.value = result
    })
    .catch(error => console.log('error', error));
}
getAPI();

- 更改 html 程式

<!--空格-->
&nbsp 

- 範例程式

<div class="demo-collapse">
    <el-collapse v-model="activeName" v-for="(val, key) in data" :key="key" accordion>
        <el-collapse-item :title="val.CourseName + '&nbsp' + val.CourseTeacher" :name="key">
            <div class="collapse-content">
                課程代碼：{{ val.CourseNo }}<br>
                課程時間：{{ val.ThreeNode }}<br>
                課程向度：{{ val.Dimension }}<br>
                學分：{{ val.CreditPoint }}
            </div>
        </el-collapse-item>
    </el-collapse>
</div>

#### 修改手風琴的 CSS

.demo-collapse{
    margin-top: 30px;
    height: 65vh;
    overflow-y: auto;
}

#### 增加 loading 動畫
- 先在 Javascript 加上 loading 的變數，用來記錄現在是否需要 loading，預設為 true
- 使用 vue 框架的 v-loading，加入在需要 loading 的 html
- 當資料讀取完後，把 loading 狀態改成 false

#### 加入 Input 輸入框功能

"courseName": input4.value,

watch(input4, () => {
    // if (Date.now() - lastChange.value < 1000) return;
    lastChange.value = Date.now();
    loading.value = true;
    getAPI();
});

### 補充資料
- [Javasciprt 語法：不要用 var](https://blog.csdn.net/qq_39643110/article/details/88686951)
- [Javascript 箭頭函式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

### 改背景

.el-collapse-item__header, .el-collapse-item__wrap {
    background: transparent;
}
.el-loading-mask {
    background-color: #F9F9F9!important;
}