iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
0
Modern Web

使用Vue.js製作個人blog系列 第 15

【Day 15】頁面:後臺列表

後臺顯示列表


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

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

在一開始的設計,上方為搜尋列,下方為顯示列表。因此在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-forv-for顧名思義,就是一個vue的for迴圈。for跑的條件是在等於後面"option in options_y",意思是我會回傳一些資料,這些資料是用叫做options_y接收。而v-for會幫忙把資料拆成一筆筆的otpion,我再從各個option取得IDName
而我這邊的假設是取得:JSON格式的資料。在v-for會取得JSON資料,並且整理成一筆筆的資料,並可以解析其JSON格式。十分方便取得實用!


下一篇,製作功能


上一篇
【Day 14】頁面:新增-4
下一篇
# 【Day 16】頁面:後臺列表-2
系列文
使用Vue.js製作個人blog17

尚未有邦友留言

立即登入留言