1、首先，需要创建一个数据库来存储用户的订单信息和商品信息。可以使用MySQL来创建一个名为“cart”的数据库，并创建两个表格，一个用于存储用户订单的信息，“orders”表格，另一个用于存储商品的信息，“products”表格
CREATE DATABASE cart;
USE cart;
CREATE TABLE orders(
id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT,
product_id INT,
quantity INT,
price DECIMAL(10,2),
total DECIMAL(10,2)
);
CREATE TABLE products(
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255),
price DECIMAL(10,2)
);
2、接下来，将使用PHP来处理后端逻辑。首先，需要创建一个数据库连接文件，可以命名为“db_connect.php”，并在文件中添加以下内容：
<?php
$hostname = "localhost";
$username = "your_username";
$password = "your_password";
$database = "cart";
$conn = new mysqli($hostname, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
3、请确保将“your_username”和“your_password”替换为您自己的MySQL用户名和密码。
接下来，我们将创建四个PHP文件用于处理以下四种功能——添加商品到购物车、获取购物车中的商品、更新购物车中的商品数量和从购物车中删除商品。
4、首先，我们将创建一个名为“add_to_cart.php”的文件，用于将商品添加到购物车中：
<?php
require 'db_connect.php';
$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];
$sql = "SELECT * FROM products WHERE id = $product_id";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$price = $row['price'];
$total = $price * $quantity;
$sql = "INSERT INTO orders (user_id, product_id, quantity, price, total)
VALUES (1, $product_id, $quantity, $price, $total)";
if ($conn->query($sql) === TRUE) {
echo "Product added to cart successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
5、首先获取通过POST请求传递的商品ID和数量，然后从数据库中获取商品的价格。接下来，我们将计算商品的总价，并在数据库中插入用户的订单信息。
6、接下来，我们将创建一个名为“get_cart.php”的文件，用于获取购物车中的商品信息并将其返回给前端：
<?php
require 'db_connect.php';
$sql = "SELECT orders.id, products.name, orders.quantity, orders.total
FROM orders
INNER JOIN products ON orders.product_id = products.id
WHERE user_id = 1";
$result = $conn->query($sql);
$cart = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$cart[] = $row;
}
}
echo json_encode($cart);
$conn->close();
?>
7、使用内部连接（INNER JOIN）来将“orders”表格和“products”表格连接起来，以便根据商品ID获取商品的名称。然后，使用用户ID来获取当前登录用户的购物车订单信息，并将结果返回给前端。
8、接下来，将创建一个名为“update_cart.php”的文件，用于更新购物车中商品的数量：
<?php
require 'db_connect.php';
$order_id = $_POST['order_id'];
$quantity = $_POST['quantity'];
$sql = "UPDATE orders SET quantity = $quantity WHERE id = $order_id";
if ($conn->query($sql) === TRUE) {
echo "Cart updated successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
9、首先获取通过POST请求传递的订单ID和数量。然后，使用订单ID来更新数据库中相应的订单信息。
10、最后，我们将创建一个名为“delete_from_cart.php”的文件，用于从购物车中删除商品：
<?php
require 'db_connect.php';
$order_id = $_POST['order_id'];
$sql = "DELETE FROM orders WHERE id = $order_id";
if ($conn->query($sql) === TRUE) {
echo "Product deleted from cart successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
11、首先获取通过POST请求传递的订单ID，然后使用该订单ID从数据库中删除相应的订单信息。
12、现在已经完成了后端逻辑部分，接下来将介绍如何使用Vue.js来处理前端逻辑。首先，需要创建一个HTML文件，可以命名为“index.html”，并在文件中添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h2>Products:</h2>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }} - ${{ product.price }}
<input type="number" v-model="product.quantity" min="1" max="10">
<button @click="addToCart(product.id, product.quantity)">Add to Cart</button>
</li>
</ul>
<h2>Cart:</h2>
<ul>
<li v-for="order in cart" :key="order.id">
{{ order.name }} - ${{ order.total }}
<input type="number" v-model="order.quantity" min="1" max="10">
<button @click="updateCart(order.id, order.quantity)">Update</button>
<button @click="deleteFromCart(order.id)">Delete</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
products: [],
cart: []
},
mounted() {
this.getProducts();
this.getCart();
},
methods: {
getProducts() {
axios.get('get_products.php')
.then(response => {
this.products = response.data;
})
.catch(error => {
console.log(error);
});
},
addToCart(product_id, quantity) {
axios.post('add_to_cart.php', {
product_id: product_id,
quantity: quantity
})
.then(response => {
console.log(response.data);
this.getCart();
})
.catch(error => {
console.log(error);
});
},
getCart() {
axios.get('get_cart.php')
.then(response => {
this.cart = response.data;
})
.catch(error => {
console.log(error);
});
},
updateCart(order_id, quantity) {
axios.post('update_cart.php', {
order_id: order_id,
quantity: quantity
})
.then(response => {
console.log(response.data);
this.getCart();
})
.catch(error => {
console.log(error);
});
},
deleteFromCart(order_id) {
axios.post('delete_from_cart.php', {
order_id: order_id
})
.then(response => {
console.log(response.data);
this.getCart();
})
.catch(error => {
console.log(error);
});
}
}
});
</script>
</body>
</html>
13、总结：
首先引入了Vue.js和Axios库，然后使用Vue实例来创建一个包含产品和购物车两个数组的数据对象。在页面加载时，通过调用相应的函数来获取产品和购物车的信息。在Vue实例的方法中，使用Axios来处理与后端的请求，并更新数据对象。
至此，已经完成了使用PHP和Vue.js来开发购物车功能的示例代码。在这里，使用PHP来处理后端逻辑，包括连接数据库、插入和更新订单信息以及从数据库中检索数据。而在前端，使用了Vue来处理用户与购物车的交互，并使用Axios库来处理与后端的异步请求。