终于到我们小项目的最后一个功能了,那就是列表页展示!

新建组件

先来新建组件 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>

最后的效果:

浅入深出Vue:文章列表的更多相关文章

  1. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  2. 浅入深出Vue:前言

    浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...

  3. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  4. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  5. 浅入深出Vue系列

    浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...

  6. 浅入深出Vue:代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

  7. 浅入深出Vue:第一个页面

    今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...

  8. 浅入深出Vue:文章编辑

    登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. ...

  9. 浅入深出Vue:自动化路由

    在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...

随机推荐

  1. 【AMAD】django-allauth

    简介 个人评分 简介 django-allauth1集成的Oauth API包括: Amazon (OAuth2) AngelList (OAuth2) Bitly (OAuth2) Dropbox ...

  2. MariaDB知识点总结03--从主+多主集群

    一.从主架构 1.从主复制原理 从库生成两个线程,一个I/O线程,一个SQL线程: i/o线程去请求主库 的binlog,并将得到的binlog日志写到relay log(中继日志) 文件中:主库会生 ...

  3. lua程序设计(第4版)第二章习题

    练习2.1:修改八皇后问题的程序,使其在输出第一个解后即停止运行. 解法:要使得有一个解就返回,首先要获得一个解,然后再返回或停止运行 练习2.2:解决八皇后问题的另一种方式是,先生成1-8之间的所有 ...

  4. layui checkbox , radio 清除所有选中项

    方法: $(selector).prop('cjecked', false); form.render(); 使用示例: // 清除radio选中 $('input[name=ymd]').prop( ...

  5. Redis基础与持久化

    Redis介绍 软件说明 Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. Redis采用内存(In-Memory)数据集(Dat ...

  6. SQLServer启动和关闭bat脚本

    原文:SQLServer启动和关闭bat脚本   安装完毕SQL SERVER 2005后,会默认自动启动SQL Server等几个服务,这几个服务比较占用系统资源.当不运行SQL Server时,最 ...

  7. csp模拟赛低级错误及反思

    \(csp\)模拟赛低级错误及反思. 1.没开\(longlong\). 反思:注意数据类型以及数据范围. 2.数组越界(前向星数组未开两倍,一题的数据范围应用到另一题上,要开两倍的写法为开两倍数组) ...

  8. Python基础『二』

    目录 语句,表达式 赋值语句 打印语句 分支语句 循环语句 函数 函数的作用 函数的三要素 函数定义 DEF语句 RETURN语句 函数调用 作用域 闭包 递归函数 匿名函数 迭代 语句,表达式 赋值 ...

  9. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  10. 怎样使用 v-for ?

    v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法. 1. v-fo ...