基于Vue.js与WordPress Rest API构建单页应用详解


Posted in Javascript onSeptember 16, 2019

前言

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
    },
  ]
})

articleList.vue结构:

<template>
  <el-row>
    <el-col>
      <el-col class="article">
        <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 class="article">
      <h1>标题</h1>
      <p class="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
  })
},

绑定事件并渲染出文章结构

<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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JavaScript运行原理分析
Feb 09 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 #Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 #Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 #Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 #Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 #Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 #Javascript
Layui点击图片弹框预览的实现方法
Sep 16 #Javascript
You might like
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python删除文件示例分享
2014/01/28 Python
Python中的各种装饰器详解
2015/04/11 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python中super()函数简介及用法分享
2016/07/11 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python中加背景音乐如何操作
2020/07/19 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Django缓存Cache使用详解
2020/11/30 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
世界遗产导游词
2015/02/13 职场文书
小学国庆节活动总结
2015/03/23 职场文书
留学推荐信中文范文
2015/03/26 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python