後臺顯示列表

現在進入後臺模式，首先製作的是後臺管理的部份。
這個管理介面包含：

• 顯示文章列表
• 搜尋文章：包含發佈時間、關鍵字
  • 時間有：年、月（或是時間區間）
  • 關鍵字可以用來縮小範圍（視進度而定是否要做）
• 點擊進入編輯模式
• 登出頁面

在一開始的設計，上方為搜尋列，下方為顯示列表。因此在HTML的部份為：

<div id="search">
    <select id="year" v-model="year">
        <option value="" selected="true" disabled="true">年份</option>
        <option v-for="option in options_y" v-bind:value="option.ID">
            {{ option.Name }}
        </option>
    </select>
    <select id="month" v-model="month">
        <option value="" selected="true" disabled="true">月份</option>
        <option v-for="option in options_m" v-bind:value="option.ID">
            {{ option.Name }}
        </option>
    </select>
</div>
<div id="list_data">
    <table>
        <tr v-for="entry in data">
            <td v-for="key in columns">
                {{ entry[key.name] }}
            </td>
            <td>
                <div class="modiClass">
                    <button  @click="modify">
                        <div>修改</div>
                    </button>
                </div>
            </td>
        </tr>
    </table>
</div>

而登出功能放在上述程式碼的上面

<div>
    <label>搜尋</label>
</div>
<div>
    <button id="logout" @click="logout">logout</button>
</div>

這次有新的語法出現，就是v-for。v-for顧名思義，就是一個vue的for迴圈。for跑的條件是在等於後面"option in options_y"，意思是我會回傳一些資料，這些資料是用叫做options_y接收。而v-for會幫忙把資料拆成一筆筆的otpion，我再從各個option取得ID和Name。
而我這邊的假設是取得：JSON格式的資料。在v-for會取得JSON資料，並且整理成一筆筆的資料，並可以解析其JSON格式。十分方便取得實用！

下一篇，製作功能