基于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 日期时间 转换的方法
Feb 21 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
React 父子组件通信的实现方法
Dec 05 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和javascript常用正则表达式及用法实例
2014/07/01 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
详解Vue之事件处理
2020/07/10 Javascript
AI人工智能 Python实现人机对话
2017/11/13 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
应聘美工求职信
2013/11/07 职场文书
招聘单位介绍信
2014/01/14 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android