在api.js中定义获取文章详情的api
//获取单篇文章
export const getArticle = ids => {
return axios.get(`${base}/posts/${ids}`).then(res => res.data);
};
article.vue中引入并定义事件：
import {getArticle} from '../api/api';
getarticle(){
//获取id
let ids = this.$route.params.id
//使用获取到的id去请求api
getArticle(ids).then(res => {
this.articleData = res
})
},
绑定事件并渲染出文章结构
<el-col class="article">
<h1 v-html="articleData.title.rendered"></h1>
<p class="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地址
https://github.com/qianxiaoduan/Vue-WordPress-Rest-API
http://vue-blog.qianxiaoduan.com/
标签：WordPress
相关阅读 >>
七牛镜像存储 wordpress 插件(一键实现 wordpress 博客静态文件 cdn加速)
bluehost服务器主机购买及安装wordpress的教程
wordpress在线安装主题、插件及快速发布上传图片时提示错误
wordpress中is_sticky()判断文章是否置顶的参数与用法
禁用wordpress gravatar使用本地头像提高网页打开速度
更多相关阅读请进入《wordpress》频道 >>
