如何解决如何使用angularjs和php在xampp中使用指定的用户名和密码从数据库中获取和显示数据?
我对angular JS并不陌生,我一直试图使用Xampp中创建的具有用户名和密码的数据库在网页上显示数据,但我没有这样做。但是,当我使用相同的数据库代码而不显示密码显示数据时,会得到预期的结果。
我显示产品的主页代码:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Grocery store</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style>
.popover
{
width: 100%;
max-width: 800px;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-primary" style="
background-color: #2908FD;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="font-size: 25px; color: white;" href="index.php"> <i class="fas fa-shopping-cart"></i> Grocery store</a>
</div>
<div class=" mr-auto" style="padding-left: 60%;">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="font-size: 18px; color: white;" href="adminlogin.php"> <i class="fas fa-shopping-user"></i> Admin </a>
<a class="" style="font-size: 18px; color: white;" href="carttry.php"> <i class="fas fa-shopping-basket"></i> your basket</a>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container" ng-app="shoppingCart" ng-controller="shoppingCartController" ng-init="loadProduct(); fetchCart();">
<br />
<h3 align="center">Products On Sale</h3>
<br />
<form method="post">
<div class="row">
<div class="col-md-3" style="margin-top:12px;" ng-repeat = "product in products">
<div style="box-shadow: 2px; background-color:#f1f1f1; border-radius:5px; padding:16px; height:450px;" align="center">
<img ng-src="images/{{product.image}}" class="img-responsive" style="width: 200px; height: 200px;" /><br />
<h4 class="text-info">{{product.name}}</h4>
<h4 class="text-danger">{{product.price}}</h4><br>
<input type="button" name="add_to_cart" style="margin-top:5px;" class="btn btn-warning form-control" value="Add to Cart" ng-click="addtoCart(product)" />
</div>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<script>
var app = angular.module('shoppingCart',[]);
app.controller('shoppingCartController',function($scope,$http){
$scope.loadProduct = function(){
$http.get('fetch.php').success(function(data){
$scope.products = data;
})
};
$scope.carts = [];
$scope.fetchCart = function(){
$http.get('fetch_cart.php').success(function(data){
$scope.carts = data;
})
};
$scope.setTotals = function(){
var total = 0;
for(var count = 0; count<$scope.carts.length; count++)
{
var item = $scope.carts[count];
total = total + (item.product_quantity * item.product_price);
}
return total;
};
$scope.addtoCart = function(product){
$http({
method:"POST",url:"add_item.php",data:product
}).success(function(data){
$scope.fetchCart();
});
};
$scope.removeItem = function(id){
$http({
method:"POST",url:"remove_item.php",data:id
}).success(function(data){
$scope.fetchCart();
});
};
});
</script>
这是fetch.php的代码
<?php
//fetch.php
$connect = new PDO("mysql:host=localhost;dbname=products","dpro","12345");
if($connect){
echo "connected";
}
else{
echo "ERROR: Please check connection in fetch.php";
}
$query = "SELECT * FROM tbl_product";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
?>
It is clear from this image that data has been fetched from the database
这是add_item.php的代码
<?php
//add_item.php
session_start();
$product_data = json_decode(file_get_contents("php://input"));
$product_id = $product_data->id;
$product_name = $product_data->name;
$product_price = $product_data->price;
if(isset($_SESSION["shopping_cart"]))
{
$is_available = 0;
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
if($_SESSION["shopping_cart"][$keys]['product_id'] == $product_id)
{
$is_available++;
$_SESSION["shopping_cart"][$keys]['product_quantity'] = $_SESSION["shopping_cart"][$keys]['product_quantity'] + 1;
}
}
if($is_available == 0)
{
$item_array = array(
'product_id' => $product_id,'product_name' => $product_name,'product_price' => $product_price,'product_quantity' => 1
);
$_SESSION["shopping_cart"][] = $item_array;
}
}
else
{
$item_array = array(
'product_id' => $product_id,'product_quantity' => 1
);
$_SESSION["shopping_cart"][] = $item_array;
}
//print_r($_SESSION["shopping_cart"]);
?>
在这里,当我有密码和用户名时,如何使用angularjs从数据库中显示产品。
角度js版本:angularjs / 1.5.7
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。