<el-col> <h1 v-html="articleData.title.rendered"></h1> <p><span>作者：{{articleData.author}}</span><span>发布时间：{{articleData.date}}</span></p> <div v-html="articleData.content.rendered"></div> </el-col>
文章列表分页的实现
element-ui分页组件：
<el-pagination layout="prev, pager, next" :page-size="per_page" :total="total" @current-change="handleCurrentChange"> </el-pagination>
上面的组件中定义了handleCurrentChange事件，用于在点击不同的页数时去为请求的api带上不同的参数
请求所需参数
page：指定要返回的结果页面。
例如，/wp/v2/posts?page=2是帖子结果的第二页
per_page：指定要在一个请求中返回的记录数，指定为从1到100的整数。
例如，/wp/v2/posts?per_page=1只会返回集合中的第一个帖子,为了确定有多少页的数据可用，API返回两个标题字段，每个分页响应
api返回头部带的参数：
X-WP-Total：集合中的记录总数
X-WP-TotalPages：包含所有可用记录的总页数
前面定义了请求文章列表api的方法，只需要将它修改下调用即可，需要给api传递两个参数page和per_page，page的值需要从分页组件中拿到，per_page看需要设定就可以
api请求成功后可以在头部找到X-WP-Total字段，就是我们需要的文章列表总数，因为字段X-WP-Total的格式不能直接取到值，需要先将它转为数组然后取value
修改后api请求的方法：
let params = { page: this.page, per_page: this.per_page, } getArticleList({params}).then(res => { let headerData = Object.values(res.headers) this.articleData = res.data this.total = parseInt(headerData[2]) })
在分页事件中调用
handleCurrentChange(val) { this.loading = true this.page = val this.getarticlelist() },
获取所有的文章分类
获取所有分类比较简单，获取数据使用v-for渲染就可以了
api.js
//获取文章分类 export const getCategories= params => { return axios.get(`${base}/categories`, params).then(res => res.data); }; html <ul> <li v-for="item in categoriesData">{{item.name}} </li> </ul> js mounted: function () { getcategories(){ getCategories().then(res => { this.categoriesData = res }) } }
点击分类获取不同分类下的文章列表
添加点击事件
为每一个分类添加点击事件，并为选中的分类添加样式
<ul> <li v-for="(item,index) in categoriesData" @click="categorie(index)" :class="{ 'active': active == index }">{{item.name}} </li> </ul>
改造文章列表请求api
为文章列表请求api添加categories字段,这个字段为所需分类的id
let params = { page: this.page, per_page: this.per_page, categories: this.categories }
编写事件
点击事件时需要做以下几件事情：
获取当前点击分类id
为当前分类添加选中样式
让请求中的page字段为1
获取请求结果重新渲染文章列表
categorie(index){ this.categories = this.categoriesData[index].id this.page = 1 this.active = index this.getarticlelist() }
服务器部署
根目录下执行npm run dev生成dist静态文件夹，将dist文件夹中内容部署到http服务器上即可通过域名访问
demo地址