使用 AngularJS 和 Slim PHP 进行路由

2023-12-05

我一直在使用 AngularJS,并且正在尝试将我的应用程序连接到它。

到目前为止,我已经使用了 Slim PHP,可以从 MySql 数据库中获取所有记录,但无法获取特定记录。我已经编写了 PHP 代码,可以导航到“../requests/#”并获取正确 ID 记录的 JSON 响应。我无法得到的是它与界面一起工作。使用下面的代码,我可以创建一个请求列表,然后单击我想要打开的请求列表 viewRequest.html。但是,我的查看请求页面始终显示第一条记录,而不是 URL 中的记录。

苗条 - Index.PHP

<?php

require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();

use Slim\Slim;

$app = new Slim();
$app->get('/requests', 'getRequests');

$app->get('/requests/:id',  'getRequest');

$app->post('/add_request', 'addRequest');

$app->run();

function getRequests() {
  $sql = "select * FROM change_request ORDER BY id";
  try {
    $db = getConnection();
    $stmt = $db->query($sql);  
    $requests = $stmt->fetchAll(PDO::FETCH_OBJ);
    $db = null;
    echo json_encode($requests);
  } catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
  }
}

function getRequest($id) {
    $sql = "SELECT * FROM change_request WHERE ID=$id";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql); 
        $stmt->execute();
        $request = $stmt->fetchObject();  
        $db = null;
        echo json_encode($request); 
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}
?>

App.JS

var app = angular.module('changeControlApp', [
    'ngRoute',
    'ngResource'
]);

app.config(function($routeProvider, $locationProvider) {


    $routeProvider
        .when('/',                      {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/requests',              {templateUrl: 'app/partials/requestList.html', controller: 'viewController' })
        .when('/createRequest',         {templateUrl: 'app/partials/viewRequests.html', controller: 'createRequestController' })
        .when('/settings',              {templateUrl: 'app/partials/settings.html', controller: 'settingsController'})
        .when('/requests/:id',          {templateUrl: 'app/partials/viewRequests.html', controller: 'viewRequestController' })
        .otherwise({ redirectTo: '/' });         
});

    app.controller('mainController', function($scope) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
});

    app.controller('viewRequestController', function($scope, $location, $route, $routeParams, $resource) {
        $scope.message = 'Pow!';
        $scope.header = 'View Change Request';

        var request_Id = $routeParams.requestId;
        var Request = $resource('http://pdgrosit02v/changeRequest/app/api/requests/id', { id: request_Id });

        $scope.request = Request.get();

});


    app.controller('viewController', function($resource, $scope, $location, $route) {

        var Requests = $resource('http://pdgrosit02v/changeRequest/app/api/requests'); 

        $scope.requests = Requests.query();

    });   

查看 Requests.HTML

<div class="container-fluid" >
    <form class="form-horizontal" role="form">

        <div class="form-group">
            <div class="text-center">
                <h1>{{ header }}</h1>
                <p>{{ message }}</p>
                <p>{{ target }}</p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Id:</label>
            <div class="col-sm-4">
                <input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
            </div>
            <label class="col-sm-2 control-label">Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{request.Date_Submitted}}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Change Initiator:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator }}" required/>
            </div>
            <label class="col-sm-2 control-label">Risk Level:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Risk_Level }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">CI Details:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Change_Initiator_id }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Requestor:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request.Requestor }}" required/>
            </div>
            <label class="col-sm-2 control-label">Systems Affected:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Implemented By:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" value="{{ request. }}" required/>
            </div>
            <label class="col-sm-2 control-label">Implementation Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}" required/>
            </div>
        </div>

        <div class="form-group">    
            <label class="col-sm-2 control-label">Close Date:</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" value="{{ request. }}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">Work to be Performed:</label>
            <div class="col-sm-4">
                <textarea name="request.description" required>{{ request.Work_to_be_performed }}</textarea>
            </div>
            <label class="col-sm-2 control-label">Backout Plan:</label>
            <div class="col-sm-4">
            <textarea name="request.description" required>{{ request.Backout_Plan }}</textarea>
            </div>
        </div>

        <div class="form-group">
            <button class="edit" ng:click="editRequest()">Edit</button>
            <button class="save" ng:click="saveRequest()">Save</button>    
            <button class="approve" ng:click="approveRequest()">Approve</button> 
        </div>

    </form>
</div>

请协助,我即将得到这个,但我无法让routeParams工作,也无法让正确的记录出现。

提前致谢!


我没有使用 php,而是使用 NodeJs。然而,这是我在使用 AngularJs 和后端路由时注意到的。

最初的请求

当用户对您的应用程序发出初始请求时。它首先遍历 php 逻辑。 (例如。$app->get('/requests', 'getRequests'))。就我而言,php/后端的工作有两件事:

  • 仅出于 SEO 目的从后端获取数据(大多数爬虫不执行 client-js,因此您需要在将页面发送给用户之前插入该数据)

  • 最重要的是,提供 Angular 应用程序上的索引文件以及所有 JS。一旦用户收到该消息,Angular 就会启动,您就可以开始了。

后续请求

用户加载您的 Angular 应用程序后。服务器(php)对用户如何在你的角度应用程序中导航一无所知。请记住,Angular 是客户端的,并尝试减少对服务器的请求数量。当用户导航到“(#)/requests/1234”时,它将触发.when('/requests/:id'路线但不是$app->get('/requests/:id', 'getRequest');。如果您想访问从数据库获取数据的端点,您需要使用$http角度内的服务并做类似的事情$http.get('requests/1234')并以这种方式获取数据。

如果不清楚,请告诉我,如果是的话,请投票/接受:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 AngularJS 和 Slim PHP 进行路由 的相关文章

  • Magento - 检查 cms 页面

    我想通过 php 检查页面是否是 Magento 中的 cms page 我需要不同的 cms 页面面包屑 所以我尝试在一个条件下做到这一点 但我不知道如何或在哪里查看 到目前为止 这是我的 breadcrumbs phtml p some
  • 简单的 jQuery(scrollTo 和 animate)在 IE 中不起作用

    我刚刚注意到一些简单的 jQuery 无法在移动版 IE9 和 IE10 上运行 我有一些版权链接和简单的滑动接触形式 它使用animate 我还结合使用scrollTo 插件和jQuery 我尝试了不同的版本 仍然没有解决 也许我错过了一
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 如何正确转义mysql?

    我刚刚发现如果我写 select from tbl where name like foo 然后添加 foo 作为参数及其值 a 用户数据 它不会正确转义 我勒个去 它想要 a 即使我使用参数 我还是忍不住觉得我对 sql 注入持开放态度
  • 如何在 yii2 中使用两个不同的模型登录或切换身份类别?

    我想允许用户从两个不同的模型登录 配置文件 user gt identityClass gt app models User one more class here enableAutoLogin gt false authTimeout
  • 使用php将数据存储到文本文件中?

    我正在尝试将数据存储在文本文件中 例如使用 php 将数组存储到文本文件中 而不是存储到 mysql 数据库中 例如 这里是要存储在文本文件中的数据 name gt john age gt 25 location gt australia
  • 无法通过套接字“/var/lib/mysql/mysql.sock”连接到本地 MySQL 服务器 (2)

    当我尝试连接 mysql 时出现以下错误 Can t connect to local MySQL server through socket var lib mysql mysql sock 2 这个错误有解决办法吗 其背后的原因可能是什
  • Mysql 中 UNION 子句的替代方案

    我有两张桌子 表 a 表 b table a ID 1 2 3 4 5 7 table b ID 2 3 4 5 6 我必须得到这样的输出而无需UNION命令 ID 1 2 3 4 5 6 7 注意 我有一个联合解决方案 select fr
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 忽略重复条目并在 EF Core 中的 DbContext.SaveChanges() 上提交成功条目

    我有一个 ASP Net Core 2 2 Web API 在我的一个控制器操作中 我向 MySQL 数据库表添加了一堆行 我使用的是 Pomelo 例如 dbContext AddRange entities dbContext Save
  • 从数据库填充复选框

    我有两个表 第一个由与名称关联的 id 组成 1 汽车 2 火车 3 普通 ETC 第二个表由两个字段 user id 和第一个表中的 id 组成 例如 1 1 2 1 3 当用户转到该页面时 我试图重新填充选定的复选框 首先 您查询数据库
  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • 如何使用 PHP 对字符串进行 rot13 处理?

    我有一个很大的 php 代码 我想手动对其进行编码和解码 我的问题是 php 代码里面有很多单引号和双引号 因此我在使用时出现错误str rot13 功能如下 那么正确的语法是什么以及如何使用下面的函数进行编码 str rot13 That
  • 检查 $_POST 数据

    我正在对表单进行一些垃圾邮件检查 下面的代码在我的本地主机上正常工作 如果为 true 则重定向到 google com 但是 当它在生产服务器上时却不起作用 执行脚本的其余部分并且不重定向到 Google com if POST SERV
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • 如何在laravel中注册后自动登录

    我在 laravel 中注册用户时遇到问题 user假设是包含所有数组元素的数组 同时自动登录以下代码结果false 数据库中保存的密码是hash make password user id this gt user model gt ad
  • Mysql 创建定义器

    我创建了一个在 CentOS Web 服务器上运行的 Intranet Web 应用程序 该应用程序使用另一个本地服务器 始终是 CentOS 作为 MySQL 数据库 在数据库内部我创建了例程 这些例程总是这样开始 CREATE DEFI
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

随机推荐