基于Vue.js与WordPressRestAPI构建单页应用详解-创新互联

前言

站在用户的角度思考问题，与客户深入沟通，找到江城网站设计与江城网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网页空间、企业邮箱。业务覆盖江城地区。

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引入
http://element-cn.eleme.io/2.0/#/zh-CN/component/installation

测试 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: '/',
      name: 'ArticleList',
      component: ArticleList
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: Article
    },
  ]
})

分享文章：基于Vue.js与WordPressRestAPI构建单页应用详解-创新互联
浏览路径：http://bzwzjz.com/article/dpjioh.html