基于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 offsetX与layerX区别
Mar 12 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Vue的props父传子的示例代码
May 20 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php数据库抽象层 PDO
2011/05/07 PHP
php除数取整示例
2014/04/24 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
JavaScript中json使用自己总结
2013/08/13 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
javascript基本语法
2016/05/31 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
python socket网络编程之粘包问题详解
2018/04/28 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
基于python的列表list和集合set操作
2019/11/24 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
医学生自荐信
2013/12/03 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
政府门卫岗位职责
2014/04/29 职场文书
真诚的求职信
2014/07/04 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
建筑横幅标语
2014/10/09 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
立案决定书范文
2015/06/24 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server