基于Vue.js和WordPressRestAPI构建单页应用

时间：2023-04-05 14:31:10 HTML5

前言Vue.js是一个用于构建交互式Web界面的库。它通过简单、灵活的API提供MVVM数据绑定和可组合的组件系统。axios是用于浏览器和nodejs的基于Promise的HTTP客户端，我们将使用它来请求api。WordPressRESTAPI为WordPress数据类型提供API端点，允许开发人员通过发送和接收JSON（JavaScript对象表示法）对象与站点进行远程交互。demo需要实现获取所有文章列表的功能。点击查看详情进入文章详情页面，显示文章内容。实现文章列表的分页功能。获取所有文章类别。:https://cn.vuejs.org/v2/guide/installation.htmlaxios介绍https://www.kancloud.cn/yunye/axios/234845element-ui介绍http://element-cn.eleme.io/2.0/#/zh-CN/component/installation测试API的工具https://www.getpostman.com/WordpressRESTAPI手册https://developer.wordpress.org/rest-api/新建两个.vue文件来显示文章列表和文章详情文章列表：articleList.vue文章详情：article.vue并在src/router.js中设置页面路由如下：importVuefrom'vue'importRouterfrom'vue-router'importArticleListfrom'@/components/articleList'importArticlefrom'@/components/article'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'ArticleList',component:ArticleList},{path:'/article/:id',name:'Article',component:Article},]})articleList.vue结构：article.vue结构：文章列表api获取：在src目录新建api/api.js文件，注意替换域名importaxiosfrom'axios'；letbase='http://example.com/wp-json/wp/v2';//获取文章列表exportconstgetArticleList=params=>{returnaxios.get(`${base}/posts`,params).then();};在articleList.vue中引入api.js:import{getArticleList,getCategories}from'../api/api';定义request事件，页面加载时执行事件，最后定义一个数组存放request返回的数据(){return{articleData:[{title:{rendered:''},excerpt:{rendered:''}}],}},安装:function(){this.getarticlelist()这个。getcategories()},methods:{getarticlelist(){getArticleList().then(res=>{this.articleData=res.data})},}使用v-for渲染数据到页面

查看详情到这里就完成了一个简单的显示文章列表的功能，文章详情页是查看详情的绑定事件文章列表：当点击时获取当前点击文章的id，根据不同的id跳转到对应的详情页查看详情article(index){letids=this.articleData[index].idthis.$router.push({path:'../article/'+ids})}，现在点击跳转到文章详情页，接下来要做的就是在详情页显示当前id对于下一篇文章的内容，我们需要在当前详情页加载完成的时候执行一个事件来获取文章的内容，在api中定义获取文章详情的api。js//获取单篇文章exportconstgetArticle=ids=>{returnaxios.get(`${base}/posts/${ids}`).then(res=>res.data);};引入并定义article.vue中的事件：从'../api/api'导入{getArticle}；getarticle(){//获取idletids=this.$route.params.id//使用获取到的id请求apigetArticle(ids).then(res=>{this.articleData=res})},bindDefine事件并呈现文章结构

作者：{{articleData.author}}发??布时间：{{articleeData.date}}

文章列表分页元素-ui分页组件的实现：上述组件中定义了handleCurrentChange事件，使用来在点击不同的页面时给请求的api带上不同的参数请求需要的参数page:指定要返回的结果页面比如/wp/v2/posts?page=2就是post结果的第二页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需要设置，可以找X-api请求成功后header中的WP-Total字段，就是我们需要的文章列表总数，因为字段X-WP-Total的格式是无法直接取值的。需要先转成数组，再取值。修改后的API请求方式：letparams={page:this.page,per_page:this.per_page,}getArticleList({params}).then(res=>{letheaderData=Object.values(res.headers)this.articleData=res.datathis.total=parseInt(headerData[2])})callhandleCurrentChange(val){this.loading=truethis.page=valthis.getarticlelist()}，获取所有文章类别比较简单。获取所有类别比较简单。可以使用v-for渲染数据api.js//获取文章分类exportconstgetCategories=params=>{returnaxios.get(`${base}/categories`,params).then(res=>res.data);};html

jsmounted:funcmotion(){getcategories(){getCategories().then(res=>{this.categoriesData=res})}}点击一个分类得到不同分类下的文章列表为每个分类添加点击事件添加点击所选事件为类别添加样式

修改文章列表请求接口，在文章列表请求接口中增加分类字段。该字段为所需分类的IDLEparams={page:this.page,per_page:this.per_page,categories:this.categories}在编写event点击事件时，需要做如下事情：获取当前点击类别id为当前分类添加一个选中的样式在请求中制作页面字段1获取请求结果重新渲染文章列表category(index){this.categories=this.categoriesData[index].idthis.page=1this.active=indexthis.getarticlelist()}在服务器部署根目录下执行npmrundev生成一个dist静态文件夹，将内容部署到dist文件夹到http可以通过服务器上的域名访问demo地址https://github.com/qianxiaoduan/Vue-WordPress-Rest-APIhttp://vue-blog.qianxiaoduan.com/永久链接：https：//blog.qianxiaoduan.com/archives/134

基于Vue.js和WordPressRestAPI构建单页应用

文章标题

Title