如何在CMS中通过API获取浏览排名（Nuxt.js + WordPress）

Question

我为Nuxt.js上的博客创建了CMS（位于前端）。CMS使用WordPress作为其后端，并使用“ WP REST API”在Nuxt.js中显示文章。（因为我想减少用WordPress创建管理屏幕所花费的时间。）

有些功能需要在这里实现。这是文章浏览排名。

使用以下插件和代码按查看次数从网站检索文章。

插件：WordPress热门帖子https://wordpress.org/plugins/wordpress-popular-posts/

我在WordPress上的functions.php中添加了以下代码

class WPP_REST_Controller {
    public function __construct() {
        $this->namespace     = '/wpp';
        $this->resource_name = '/posts';
    }

    public function register_routes() {
        register_rest_route( $this->namespace , $this->resource_name, array(
            'methods'  => 'GET',
            'callback' => array($this, 'get_wpp'),
        ) );
    }


    public function get_wpp( $request ) {
        if (function_exists('wpp_get_mostpopular')) {
            $args = array(
                'limit' => 10,
                'stats_views' => 0,
                'wpp_start' => '{',
                'wpp_end' => '}',
                'post_html' => '{pid},',
            );
            ob_start();
            wpp_get_mostpopular( $args );
            $str = ob_get_contents();
            ob_end_clean();
            $str = str_replace("\n", '', $str);
            preg_match('/\{(([0-9]*,)*)\}/s', $str, $match);
            if (count($match)) {
                $ids = rtrim($match[1], ',');
                $url = get_bloginfo('url') . '/wp-json/wp/v2/posts?include=' . $ids;
                header("Location: " . $url);
                exit;
            }
        }
    }
}


function prefix_register_my_rest_routes() {
    $controller = new WPP_REST_Controller();
    $controller->register_routes();
}


add_action( 'rest_api_init', 'prefix_register_my_rest_routes' );

Nuxt.js（ranking.vue）：

<template>
  {{top_articles}}
</template>
<script>
export default {
  data() {
    return {
      top_articles
    };
  },
  async asyncData({ $axios, params }) {
    const top_articles = await $axios.$get('http://example.com/wp-json/wpp/posts');
}
</script>

但是有问题。通过Nuxt.js查看的文章数量未反映在API响应中。

文章显示页面如下所示：

Nuxt.js（article / _id.vue）

<template>
  {{ article }}
</template>
<script>
export default {
  data() {
    return {
      article: this.article,
    }
  },
  async asyncData({ $axios, params }) {
    const article = await $axios.$get('http://example.com/wp-json/wp/v2/posts/' + params.id);
    return { article };
  }
}
<script>

[请告诉我为实现上述目标应采取的措施。（我可以使用其他插件。）

Answer 1

我解决了自己。WordPress Popular Posts插件可以通过API计算您的浏览量。

参考网址：https://wordpress.org/support/topic/wpp-with-an-ajax-based-site/

我如下修改了“ article / _ id.vue”。

<template>
  {{ article }}
</template>
<script>
export default {
  data() {
    return {
      article: this.article,
    }
  },
  async asyncData({ $axios, params }) {
    const article = await $axios.$get('http://example.com/wp-json/wp/v2/posts/' + params.id);

    // WordPress Popular Posts Counts Up Visits
    $axios.$post(
      'http://example.com/wp-json/wordpress-popular-posts/v1/popular-posts?wpp_id=' +
        params.id,
    )

    return { article };
  }
}
<script>