AngularJS SlimFramework

时间:2018-06-15 02:18:03

标签: javascript php angularjs mongodb slim

我用Slim Framework编写PHP代码,它在mongoDb上连接e找到很多数据。

    <?php

use Psr\Http\Message\ServerRequestInterface;
use Psr\Http\Message\ResponseInterface;

require 'vendor/autoload.php';
require 'config/config.php';
require 'conexao.php';

$app=new Slim\App(["settings" => $config]);
$app->get("/produto", function( $response,$request){
    $connection = connect();

    $produtos = array();
    $collection = $connection->lojavirtual->produtos;
    $result = $collection->find();
    $index = 0;

    foreach ($result as $produto){
        $produtos[$index]['nome']        = $produto['nome'];
        $produtos[$index]['categoria']   = $produto['categoria'];
        $produtos[$index]['valor']       = $produto['valor'];
        $produtos[$index]['avaliacao']   = $produto['avaliacao'];

        $index++;
    }

    echo json_encode($produtos);        
    });

    $app->post("/produto",function($request,$response){
        $connection = connect();

        $collection = $connection->lojavirtual->produtos;

        $result = json_decode($request->getBody(),true);

        $result = $collection->insertOne{['nome' => $result['produto']['nome'],
                                        'categoria'=>$result['produto']['categoria'],
                                        'valor' => $result['produto']['valor'],
                                        'avaliacao'>=0]};

        });

        $app->run();
?>

我可以在此图片中看到来自mongodb的数据。

Data found in mongodb

在下面的代码(index.html)中,我需要显示来自index.php的数据,由JSON发送,但我无法显示它们

<html>
	<head>
	<title> Loja </title>
	<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
	<script>
		var app = angular.module("lojaApp",[]);
		
		app.controller("produtosController",function($scope,$http){
			$scope.produtos;
			
			function atualizarLista(){
				$http({
					method:'GET',
					url:'/slim/produto'
				}).then(function(response){
				   //Sucesso
				   $scope.produtos=response.data;
				}, function (response){
					//erro
					alert(response.status);
				});
			}
			atualizarLista();
			$scope.categorias = ['Notebooks','SmartPhones','Livros'];
			$scope.salvarProduto = function(produto){
			$http({
				method:'POST',
				url:'/slim/produto',
				data:{'produto':produto)
			}).then(function(response){
				//sucesso
				atualizarLista();
			},function(response){
				//falha
				alert("Erro");
			});
			
			delete $scope.produto;
			}
			});
		</script>
	</head>

<body ng-app="lojaApp" ng-controller="produtosController">
	<h1 class="titulo"> Produtos Disponíveis</h1>
	<div id="listaProdutos" ng-repeat="produto in produtos">
		<div class="dadosProduto">
			<h4>{{produto.nome}} </h4>
			<p>{{produto.categoria}} </p>
			<p>{{produto.valor}} </p>
			<p>Avaliação : {{produto.avaliacao}} </p>
		</div>
	</div>		
	
	<div id="cadastroProduto">
	    <h1 class "titulo"> Cadastrar Novo Produto </h1>
		<form name="formProduto">
			<input class="campo" type="text" placeholder="Nome do produto" ng-model="produto.nome"/>
			<input class="campo" type="text" placeholder="Valor do produto" ng-model="produto.valor"/>
			<select class="campo" ng-options="c for c in categorias" ng-model="produto.categoria"/>	</select>
			<button ng-click="salvarProduto(produto)"> Salvar </button>
		</form>
	</div>
	</body>
	</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

但在我的index.html中,我无法显示数据,css,字段和其他内容..

任何人都可以帮助我吗?

0 个答案:

没有答案
相关问题