Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，我们将使用它来请求api。
WordPress REST API为WordPress数据类型提供API端点，允许开发人员通过发送和接收JSON（JavaScript Object Notation）对象与站点进行远程交互 。
demo需要实现功能
获取全部的文章列表
点击查看详情进入文章详情页展示文章内容
实现文章列表的分页功能
获取所有的文章分类
点击分类获取不同分类下的文章列表
环境搭建
vue-cli单页应用的脚手架构建：
https://cn.vuejs.org/v2/guide/installation.html
Axios引入
https://www.kancloud.cn/yunye/axios/234845
element-ui引入
测试 API 的工具
https://www.getpostman.com/
Wordpress REST API手册
https://developer.wordpress.org/rest-api/
新建两个.vue文件分别显示文章列表和文章详情
文章列表：articleList.vue
文章详情：article.vue
并在src/router.js中设置页面路由如下：
import Vue from 'vue' import Router from 'vue-router' import ArticleList from '@/components/articleList' import Article from '@/components/article' Vue.use(Router) export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'ArticleList', component: ArticleList }, { path: '/article/:id', name: 'Article', component: Article }, ] })
articleList.vue结构：
<template> <el-row> <el-col> <el-col> <ul> <li> <h1>文章标题</h1> <div>文章描述</div> <span>查看详情</span> </li> </ul> </el-col> </el-col> </el-row> </template> <script> export default { data () { return { } }, } </script> <style lang="less"> </style>
article.vue结构：
<template> <el-row> <el-col> <h1>标题</h1> <p><span>作者：</span><span>发布时间：</span></p> <div></div> </el-col> </el-row> </template> <script> export default { data () { return { } }, } </script> <style lang="less"> </style>
文章列表api获取：
在src目录下新建api/api.js文件，注意替换域名
import axios from 'axios'; let base = 'http://example.com/wp-json/wp/v2'; //获取文章列表 export const getArticleList = params => { return axios.get(`${base}/posts`, params).then(); };
在articleList.vue中引入api.js：
import {getArticleList,getCategories} from '../api/api';
定义请求事件，并在页面加载时执行事件，最后定义一个数组来存放请求回来的数据
data () { return { articleData: [{ title: { rendered: '' }, excerpt: { rendered: '' } }], } }, mounted: function () { this.getarticlelist() this.getcategories() }, methods: { getarticlelist(){ getArticleList().then(res => { this.articleData = res.data }) }, }
使用v-for将数据渲染到页面
<ul> <li v-for="(item,index) in articleData"> <h1 v-html="item.title.rendered"></h1> <div v-html="item.excerpt.rendered"></div> <span>查看详情</span> </li> </ul>
到这里一个简单的显示文章列表功能就完成了
文章详情页
为文章列表中的查看详情绑定事件:
当点击时获取当前点击文章id，根据不同id跳转到响应的详情页
<span @click="article(index)">查看详情</span> article(index){ let ids = this.articleData[index].id this.$router.push({ path: '../article/' + ids }) },
现在已经实现了点击跳转到article详情页，接下来要做的是在详情页中显示当前id下文章的内容，我们需要在当前详情页载入的时候执行事件获取文章内容
在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 }) },
绑定事件并渲染出文章结构