使用带有 php 文件的 Ionic 框架答案

【问题标题】：use Ionic framework with php files使用带有 php 文件的 Ionic 框架
【发布时间】：2016-04-12 01:23:11
【问题描述】：

我正在使用 Ionic 框架创建一个移动应用程序。我得到了所有在线创建的 html 页面。现在我想要一些后端代码来从 sql server 获取数据。用php接收数据是没有问题的。但是当我使用 php 页面时，我没有使用 Ionic 创建的界面。

如何使用 php 页面（而不是 html）并仍然从 ionic 获得布局？示例：我的 scorebord.php

<?php
$servername = "localhost:3306";
$username = "ssss";
$password = "dffd";
$dbname = "ddddd";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT user_username,user_city,user_highscore FROM tbl_user";
$result = $conn->query($sql);
?>
<ion-view style="" title="Scorebord">
    <ion-content class="has-header" overflow-scroll="true" padding="true" style="background: url(img/hX1ml1TVGgABo3ENE6Qg_menu3.png) no-repeat center;">
        <h1 style="">Scorebord</h1>
        <table style="width:100%">
            <?php
            if ($result->num_rows > 0) {
                // output data of each row
                while ($row = $result->fetch_assoc()) {
                    ?>

                    <tr>
                        <td><?php echo $row["user_username"] ?></td>

                    </tr>
                    <?php
                }
            } else {
                echo "0 results";
            }
            $conn->close();
            ?>

        </table> 
    </ion-content>
</ion-view>

顺便说一句：在这样的 php 文件中配置我的数据库是否安全？有没有好的替代品？

【问题讨论】：

这根本不是一个好方法。您应该按预期使用 Ionic - 通过 API 访问您的数据，使用 http 请求获取数据，并让 Ionic 进行渲染而不是 php。
所以使用像 $https 这样的角度？这不可能吗？我对角度没有太多经验。 php我很熟悉..
Ionic 设计为在单个 html 页面上运行，因此您在任何时候想要执行简单的页面转换时都会遇到问题。对你来说最好的方法是用 php 编写你的 API，有一组端点来获取你需要的数据，然后只需使用 $http 或 $resource 请求数据。不难，你可以找到很多关于这个话题的tutorials。
这看起来是个不错的起点stackoverflow.com/questions/31901949/…
前端代码有点棘手，后端你只需要回显一些json。喜欢stackoverflow.com/a/11264436/2273611

标签： php ionic

【解决方案1】：

移动应用程序将保存在可能无法解释 PHP 代码的设备上，这与 Web 服务器不同。如果您不知道/不想要 javascipt，那么 iframe 可能是您唯一的选择。

example.com/table.php

        <h1 style="">Scorebord</h1>
        <table style="width:100%">
            <?php
            if ($result->num_rows > 0) {
                // output data of each row
                while ($row = $result->fetch_assoc()) {?>
                    <tr> <td><?php echo $row["user_username"] ?></td></tr>
                    <?php
                }
            } else {
                echo "0 results";
            }
            $conn->close();
            ?>
        </table>

你的应用

<ion-view style="" title="Scorebord">
    <ion-content class="has-header" overflow-scroll="true" padding="true" style="background: url(img/hX1ml1TVGgABo3ENE6Qg_menu3.png) no-repeat center;">
        <iframe src="example.com/table.php"/>
    </ion-content>
</ion-view>

但更好的解决方案是使用 JavaScript 向 JSON data 或 full html templates（如 table.php）发出 http 请求。

我会使用 json 后端

highscores.php

<?php
$servername = "localhost:3306";
$username = "ssss";
$password = "dffd";
$dbname = "ddddd";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT user_username,user_city,user_highscore FROM tbl_user";
$result = $conn->query($sql);
$json = mysqli_fetch_all ($result, MYSQLI_ASSOC);
echo json_encode($json);

你的应用

angular.module('ionicApp', [])

.controller('MainCtrl', function($scope, $http) {
  $http.get('http://example.com/highscores.php').then(function(resp) {
    $scope.users = resp.data;
  }, function(err) {
    console.error('ERR', err);
  })
});

  <html ng-app="ionicApp">
  <body ng-controller="MainCtrl">
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="user in users">
          {{user.user_username}}
        </ion-item>
      </ion-list>
    </ion-content>
  </body>
</html>

【讨论】：