溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
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>
<h2>文章標題</h2>
<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">
<h2>標題</h2>
<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">
<h2 v-html="item.title.rendered"></h2>
<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">
<h2 v-html="articleData.title.rendered"></h2>
<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
}
編寫事件
點擊事件時需要做以下幾件事情：
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/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
