淺入深出Vue：文章列表

終於到我們小項目的最后一個功能了，那就是列表頁展示！

新建組件

先來新建組件 List.vue：

<template>
    <div></div>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style scoped>

</style>

然后添加對應的路由對象：

{
    path: '/list',
    name: 'list',
    component: () => import('./views/List.vue')
}

編寫頁面代碼

這里我們選擇 ElementUI 中的 Table 組件來進行展示，文章列表接口的數據定義如下：

{
    "Code": 200,
    "Message": "后台返回的消息",
    "Data": [
        {
            "Id": 0, //文章的ID
            "Title": "標題",
        },
        ...
    ]
}

<template>
    <div>
        <el-row>
            <el-table :data="list">
                <el-table-column prop="Id" label="#">
                </el-table-column>

                <el-table-column prop="Title" label="標題">
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "List",
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list')
                    .then(res => {
                        this.list = res.data.Data
                    })
            }
        }
    }
</script>

<style scoped>

</style>

效果如下：

這個效果不是很好看啊。 用 el-col 控制一下大小看看：

<template>
    <div>
        <el-row>
            <el-col :span="16" :offset="4">
                <el-table :data="list">
                    <el-table-column prop="Id" label="#" width="80px">
                    </el-table-column>

                    <el-table-column prop="Title" label="標題" align="center">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

這樣看起來就好很多了。

最后

最后讓我們在基礎布局那加上發布和登錄的按鈕吧：

<template>
  <div id="app">
    <el-container>
      <el-header style="text-align:center;">
        <span>淺入深出Vue-入門篇</span>
        <span style="float: right;">
          <el-button type="primary" size="mini" icon="el-icon-edit">發布文章</el-button>
          <el-button type="default" size="mini">登錄</el-button>
        </span>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

最后的效果：