尝试使用从另一个站点的 wordpress 数据库中动态获取的数据在新网页中创建菜单

Posted 2023-03-05

技术标签:

【中文标题】尝试使用从另一个站点的 wordpress 数据库中动态获取的数据在新网页中创建菜单【英文标题】：Trying to create a menu in new web page using data fetched from wordpress database of another site dynamically 【发布时间】：2019-06-26 16:05:06 【问题描述】：

我正在尝试使用另一个站点的 WordPress 数据库中的值在我的页面上显示一个菜单。这是我到目前为止所做的：

app.js

angular.module('plunker', []).controller('MainCtrl', function($scope) 
 $scope.menus = [
    

        title: "Home",
        type: "GET",
        url:'#'
    ,
    

        title: "News",
        action: "#",
        menus: [
          
              title: "Local", 
              type:"GET",
              action: "#"
          ,
          
              title: "Kerala",
              action: "#"
          ,
          
              title: "National",
              action: "#"
          ,
          
              title: "World",
              action: "#"
          
        ]
    ,
    
        title: "Entertainment",
        action: "#",
        menus: [
        
            title: "Malayalam",
            action: "#"
        ,
        
            title:"Tamil",
            action:"#"
        ,
        
            title:"Hindi",
            action:"#"
        ,
        
            title:"English",
            action:"#"
        

      ]
    
];
);

index.html

<!doctype html>

<html>
  <head>

    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
     <div id="wrapper1" class="container">
       <div id="nav1">
       <div><span></span> </div>
             <ul>
                <li ng-repeat="menu in menus" class="has-children" ng-click="changeClass(menu)" lastOrFirst="menu.lastOrFirst" >
                  <a href="menu.url">menu.title <span ></span></a>
                  <ul ng-if="menu.menus">
                   <li ng-repeat="submenu in menu.menus" class="has-children">
                      <a href="submenu.action">submenu.title</a>
                          <ul ng-if="submenu.menus" ng-class="submenu.class">
                            <li ng-repeat="subsubmenu in submenu.menus">
                              <a href="subsubmenu.action">subsubmenu.title</a>
                            </li>
                          </ul>
                    </li>

                  </ul>
                </li>
              </ul>
        </div>
    </div>
    </div>
  </body>
</html>

https://next.plnkr.co/edit/3Ai7xECU1a1EPqkoxqwI?p=preview&preview - 我在 plunker.com 中的代码。

详细问题：

我正在我的新网页中创建一个菜单列表，并且数据来自另一个站点的 WordPress 数据库。

所以每当一个新的菜单项被添加到这个 WordPress 数据库时，它也应该在我的页面中自动更改，而无需重新编写代码。

在上面的代码中，菜单项和子菜单项是用 JSON 手动编写的，因此每当将任何新菜单项添加到 WordPress 数据库时，我也需要在代码中添加它。

所以有没有办法让添加到数据库中的新菜单项动态显示在我的新网页的菜单中。

非常感谢任何建议。提前致谢。 The new result after I change the code

这是我试图获取的示例数据库表：表名：wp_post sample structure of the databse

//更新//

//html//

 <!DOCTYPE html>
<html>
<head>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 

<script type="text/javascript" src="<?php echo base_url();?>Assets/js/angular_app.js" ></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>

<script 
type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>



<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>Assets/css/angularmenu.css" />  


</head>
<body  ng-app="menuApp">

 <div class="container">
 <div id="wrapper1" class="container" ng-controller="menuController">
       <div id="nav1" >
             <ul >
                <li ng-repeat="menu in menus" >
                  <a href="menu.url" >menu.post_title</a>
                  <ul ng-controller="subController">
                   <li ng-repeat="submenu in submenus">
                      <a href="submenu.action">submenu.post_title</a>
                    </li>
                    </ul>
                    </li>
                    </ul>
                    </div>
                    </div>
                    </div>
                    </body>
                    </html>

//app.js//

var app = angular.module('menuApp', []);

  app.controller("menuController", function($scope,$http)
  
    var baseUrl = 'http://localhost:8080/samplepage/';
    $http.get(baseUrl+'Home/getmenu').then(function(response)
        
    console.log(response);
    $scope.menus = response.data;
 );
);


  app.controller("subController", function($scope,$http)
  
    var baseUrl = 'http://localhost:8080/samplepage/';
    $http.get(baseUrl+ 'Home/getsubmenu').then(function(response)
    
        console.log(response);
        $scope.submenus = response.data;
    );
  );

我通过这段代码动态获得了主菜单和子菜单。但我得到所有主菜单的下拉菜单。我只想要新闻的下拉菜单。

【问题讨论】：

我想应该是menu.post_title 类似embed.plnkr.co/e3PFMloCYpwYB24ldSLn @ShashankVivek 我改了，谢谢，我会在 plunkr.com 上提供我的代码即使菜单标题也是从数据库中获取的，所以它在 plunkr 中无法正确显示。请检查上面。我已经给出了所有的 html、angular 脚本和 css。使用另一个 ng-reapeat 我可以创建子菜单，但我很困惑如何将这些子菜单放在新闻下（检查结果图像）。这也有助于我了解 API 的响应结构。没有看到我不想猜测对象结构 【参考方案1】：

查看app.js，我使用$http 对服务器进行API 调用，该服务器将以json 格式提供response。您需要使用$http 调用服务器。希望对你有帮助。

Here is the plunkr 我使用json 获取数据。用服务器调用替换它

angular.module('plunker', []).controller('MainCtrl', function($scope,$http) 
//  $http.get('/your_wordpress_API_to_provide_menu_data/',function(response)
 $http.get('data.json').then(function(response)    
    console.log(response)
    $scope.menus = response.data;
 )
);

更新：

查看this plunkr where sub menu is activated for news only

【讨论】：

感谢您的回复，我正在使用 codeigniter，我将 app.js 和 data.json 都保存在 Assets/js 文件夹中，可以吗？ @PHPDevloper ：是的，但您不需要保存data.json，因为该数据将来自backend server。我希望你得到解决方案。如果是，请将其标记为答案感谢您的回复，我几乎接近预期的结果，上面我显示了根据您的建议更改代码得到的结果。请检查。我使用该代码获取菜单项，但我怀疑如何在我没有看到任何选项的新闻下方创建一个下拉列表。 @PHPDevloper : 告诉我你从 DB 得到的响应请检查我更改上面给出的代码后的新结果，即从数据库获取响应的屏幕截图。

以上是关于尝试使用从另一个站点的 wordpress 数据库中动态获取的数据在新网页中创建菜单的主要内容，如果未能解决你的问题，请参考以下文章

WordPress 和 SQL - 如果列值不存在，则从另一个表更新和插入

从另一个 wordpress 远程数据库中提取用户并显示

使用 JavaScript Ajax 从另一个站点检索内容

尝试在本地测试 WordPress 站点时出现数据库错误（由 WooCommerce 引起？）

使用 PHP 和 cURL 操作从另一个站点检索到的图像数据是不是违反了同源策略？

Wordpress：将本地主机数据库导入实时站点时出现问题