获取文章列表数据

封装API方法：获取文章列表数据的时候，按照接口要求，必须传递参数才行，代码中，必须设置 params

  1. // 获取文章列表数据
  2. export const getArticleAPI = params => {
  3.   return request({
  4.     method: 'GET',
  5.     url: '/my/article/list',
  6.     params: params
  7.   })
  8. }

组件中，导入API方法，看好了，从哪个文件中导入。。。。

// 按需导入 添加文章的 API 方法
import { addArticleAPI, getArticleAPI } from '@/api/article'

设置数据项

  • artList: [] 准备存放接口响应的数据（返回的文章列表数据）
  • query: { } 存放请求参数（接口要求的请求参数）
    data() {
return {
  artList: [],
  query: {
    pagenum: 1, // 必填
    pagesize: 2, // 必填
    cate_id: '',
    state: ''
  }
}
}
    设置initArticle方法，获取接口数据
    // 获取文章列表的方法
async initArticle() {
const { data: res } = await getArticleAPI(this.query)
if (res.code === 0) {
  this.artList = res.data
} else {
  this.$message.error(res.message)
}
}
    生命周期函数中，调用initArticle方法
    // 声明周期函数，调用获取分类的方法
created() {
this.initCategory()
this.initArticle() // ................ 加入这行
}

    将数据渲染到表格

    页面中，找到准确的位置，加入表格，并展示数据：
    <!-- 内容区二：表格区，展示数据 -->
<el-table :data="artList" style="width: 100%" stripe border>
<el-table-column prop="id" label="ID" width="80"> </el-table-column>
<el-table-column prop="title" label="文章标题"> </el-table-column>
<el-table-column prop="cate_name" label="所属分类"> </el-table-column>
<el-table-column prop="pub_date" label="发布时间"> </el-table-column>
<el-table-column prop="state" label="文章状态"> </el-table-column>
<el-table-column label="操作"> </el-table-column>
</el-table>

    处理时间

    下载安装 dayjs
    npm i dayjs
    组件中，导入 dayjs
    import dayjs from 'dayjs'
    定义过滤器（filters、和data、methods、created是平级的）
    // 过滤器
filters: {
date_format(val) {
  // 过滤器函数的第1个参数，永远表示原本要输出的值（本案例中，表示格式不太好的时间）
  // return 'aaaa' // 真正要输出的页面的值
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
}
    组件页面中，使用过滤器：
    <el-table-column label="发布时间">
<template v-slot="obj"> {{ obj.row.pub_date | date_format }} </template>
</el-table-column>

    分页

    直接到element-ui 组件库中，找到分页组件，复制完整功能：
    <el-pagination
      @size-change="handleSizeChange"              每页多少条，数量改变，触发这个事件
      @current-change="handleCurrentChange"        页码改变，会触发这个事件
      :current-page="currentPage4"                 当前的页码，当前展示的是第几页
      :page-sizes="[100, 200, 300, 400]"           可选的每页几条数据，展示到下拉框中
      :page-size="100"                             每页几条数据
      layout="total, sizes, prev, pager, next, jumper"  定制功能
      :total="400"                                 数据总数
    >
    完整的组件代码：
    <!-- 内容区三：分页区 -->
<el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="query.pagenum"
             :page-sizes="[2, 3, 5, 10]"
             :page-size="query.pagesize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="total"
             >
</el-pagination>
    对应的两个方法：
    methods: {
// 其他方法 略...........................................
// 改变了每页数据条数的时候，触发这个事件
handleSizeChange() {},
// 页码改变的时候，触发的事件
handleCurrentChange() {}
}
    补充一下：当获取到文章数据之后，把服务器返回的数据总数，赋值给数据项：
    设置好数据项：
    data() {
return {
  total: 0, // 文章总数
}
}
    获取到文章数据之后，把服务器返回的总数设置好：
    // 获取文章列表的方法
async initArticle() {
const { data: res } = await getArticleAPI(this.query)
if (res.code === 0) {
  this.artList = res.data // 把数据赋值给数据项
  this.total = res.total
} else {
  this.$message.error(res.message)
}
},

    实现分页

    当改变了每页几条数据后，当改变了页码后，会触发对应的方法，方法中，修改请求参数，重新发送请求获取文章列表数据。
    // 改变了每页数据条数的时候，触发这个事件
handleSizeChange(newSize) {
// console.log(newSize) // 得到最新的，每页 显示 newSize 条数据
this.query.pagesize = newSize
this.query.pagenum = 1
// 调用获取文章的方法，重新使用新的参数发送请求，获取数据，更新页面
this.initArticle()
},
// 页码改变的时候，触发的事件
handleCurrentChange(newPage) {
// console.log(newPage) // 表示点击的，或者跳转的最新的页码值
this.query.pagenum = newPage
this.initArticle()
}

    筛选

    思路，点击下拉框的时候，修改请求参数。点击筛选按钮的时候，使用新的参数发送请求获取数据即可
  1. 先处理两个下拉框
    <el-form :inline="true" class="demo-form-inline">
<el-form-item label="文章分类">
 <el-select placeholder="请选择一个分类" v-model="query.cate_id">
   <el-option
     v-for="item in cateList"
     :key="item.id"
     :label="item.cate_name"
     :value="item.id"
   ></el-option>
 </el-select>
</el-form-item>
<el-form-item label="文章状态">
 <el-select placeholder="请选择状态" v-model="query.state">
   <el-option label="已发布" value="已发布"></el-option>
   <el-option label="草稿" value="草稿"></el-option>
 </el-select>
</el-form-item>
<el-form-item>
 <el-button type="primary" @click="initArticle">查询</el-button>
 <el-button type="info" @click="resetList">重置</el-button>
</el-form-item>
</el-form>
    补充重置的方法：
    // 筛选后面的重置
resetList() {
this.query = {
 pagenum: 1,
 pagesize: 2,
 cate_id: '',
 state: ''
}
this.initArticle()
}