基于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://scyanting.com/article/dpjioh.html