基于Vue.js與WordPress Rest API構建單頁應用詳解
前言
Vue.js 是用于構建交互式的 Web 界面的庫。它提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，我們將使用它來請求api。
WordPress REST API為WordPress數(shù)據(jù)類型提供API端點，允許開發(fā)人員通過發(fā)送和接收JSON（JavaScript Object Notation）對象與站點進行遠程交互 。
demo需要實現(xiàn)功能
- 獲取全部的文章列表
- 點擊查看詳情進入文章詳情頁展示文章內(nèi)容
- 實現(xiàn)文章列表的分頁功能
- 獲取所有的文章分類
- 點擊分類獲取不同分類下的文章列表
環(huán)境搭建
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>發(fā)布時間：</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';
定義請求事件，并在頁面加載時執(zhí)行事件，最后定義一個數(shù)組來存放請求回來的數(shù)據(jù)
data () {
return {
articleData: [{
title: {
rendered: ''
},
excerpt: {
rendered: ''
}
}],
}
},
mounted: function () {
this.getarticlelist()
this.getcategories()
},
methods: {
getarticlelist(){
getArticleList().then(res => {
this.articleData = res.data
})
},
}
使用v-for將數(shù)據(jù)渲染到頁面
<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，根據(jù)不同id跳轉到響應的詳情頁
<span @click="article(index)">查看詳情</span>
article(index){
let ids = this.articleData[index].id
this.$router.push({
path: '../article/' + ids
})
},
現(xiàn)在已經(jīng)實現(xiàn)了點擊跳轉到article詳情頁，接下來要做的是在詳情頁中顯示當前id下文章的內(nèi)容，我們需要在當前詳情頁載入的時候執(zhí)行事件獲取文章內(nèi)容
在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>發(fā)布時間：{{articleData.date}}</span></p>
<div v-html="articleData.content.rendered"></div>
</el-col>
文章列表分頁的實現(xiàn)
element-ui分頁組件：
<el-pagination layout="prev, pager, next" :page-size="per_page" :total="total" @current-change="handleCurrentChange"> </el-pagination>
上面的組件中定義了handleCurrentChange事件，用于在點擊不同的頁數(shù)時去為請求的api帶上不同的參數(shù)
請求所需參數(shù)
page：指定要返回的結果頁面。
例如，/wp/v2/posts?page=2是帖子結果的第二頁
per_page：指定要在一個請求中返回的記錄數(shù)，指定為從1到100的整數(shù)。
例如，/wp/v2/posts?per_page=1只會返回集合中的第一個帖子,為了確定有多少頁的數(shù)據(jù)可用，API返回兩個標題字段，每個分頁響應
api返回頭部帶的參數(shù)：
X-WP-Total：集合中的記錄總數(shù)
X-WP-TotalPages：包含所有可用記錄的總頁數(shù)
前面定義了請求文章列表api的方法，只需要將它修改下調(diào)用即可，需要給api傳遞兩個參數(shù)page和per_page，page的值需要從分頁組件中拿到，per_page看需要設定就可以
api請求成功后可以在頭部找到X-WP-Total字段，就是我們需要的文章列表總數(shù)，因為字段X-WP-Total的格式不能直接取到值，需要先將它轉為數(shù)組然后取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])
})
在分頁事件中調(diào)用
handleCurrentChange(val) {
this.loading = true
this.page = val
this.getarticlelist()
},
獲取所有的文章分類
獲取所有分類比較簡單，獲取數(shù)據(jù)使用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()
}
服務器部署
根目錄下執(zhí)行npm run dev生成dist靜態(tài)文件夾，將dist文件夾中內(nèi)容部署到http服務器上即可通過域名訪問
demo地址
https://github.com/qianxiaoduan/Vue-WordPress-Rest-API
http://vue-blog.qianxiaoduan.com/
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在vue項目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會比較麻煩,這時使用eventBus通訊,就可以很便捷的解決這個問題,這篇文章主要給大家介紹了關于Vue中事件總線(eventBus)使用的相關資料,需要的朋友可以參考下2022-03-03
vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件
這篇文章主要介紹了vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關于vue中輕量級模糊查詢fuse.js使用方法的相關資料,Fuse.js是一個功能強大、輕量級的模糊搜索庫,通過提供簡單的?api?調(diào)用,達到強大的模糊搜索效果,需要的朋友可以參考下2024-01-01
mpvue微信小程序開發(fā)之實現(xiàn)一個彈幕評論
這篇文章主要介紹了mpvue小程序開發(fā)之 實現(xiàn)一個彈幕評論功能，本文通過實例講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue?跳轉頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑
有一些驗證不是通過input select這樣的受控組件來觸發(fā)驗證條件的 ,可以通過自定義驗證的方法來觸發(fā),下面這篇文章主要給大家介紹了關于Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑的相關資料,需要的朋友可以參考下2023-02-02
vue2和vue3的v-if與v-for優(yōu)先級對比學習
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級對比學習，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09