PHP和Vue开发简单购物车功能的逻辑和示例代码
PHP和Vue开发简单购物车功能的逻辑和示例代码
www_php_cn
php中文网，官方公众号，一家 专业 免费 的php教学站，为广大自学ＰＨＰ者们提供一站式自学平台
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
)
);
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);
}
?>
your_username
”和“
your_password
”替换为您自己的MySQL用户名和密码。
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();
?>
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();
?>
orders
”表格和“
products
”表格连接起来，以便根据商品ID获取商品的名称。然后，我们使用用户ID来获取当前登录用户的购物车订单信息，并将结果返回给前端。
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();
?>
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();
?>
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
>
Vue.js
和
Axios
库，然后使用
Vue
实例来创建一个包含产品和购物车两个数组的数据对象。在页面加载时，我们通过调用相应的函数来获取产品和购物车的信息。在
Vue
实例的方法中，我们使用
Axios
来处理与后端的请求，并更新数据对象。
PHP
和
Vue.js
来开发购物车功能的示例代码。在这里，我们使用
PHP
来处理后端逻辑，包括连接数据库、插入和更新订单信息以及从数据库中检索数据。而在前端，我们使用了
Vue
来处理用户与购物车的交互，并使用
Axios
库来处理与后端的异步请求。
PHP
和
Vue.js
来开发购物车功能有所帮助。注意，以上示例代码仅为简化版本，并且可能需要根据您的具体情况进行调整和优化。
课程详询↓↓↓