vue和php实现商城
Vue 和 PHP 实现商城系统
技术栈选择
Vue.js 作为前端框架，负责用户界面和交互逻辑。PHP 作为后端语言，处理业务逻辑和数据存储。MySQL 作为数据库管理系统，存储商品、订单和用户信息。
前端开发（Vue.js）
使用 Vue CLI 初始化项目结构，安装必要的依赖如 Vue Router 和 Vuex。创建组件化页面，包括商品列表、购物车、订单管理和用户中心。
商品列表组件示例代码：
<template>
<div class="product-list">
<div v-for="product in products" :key="product.id">
<h3>{{ product.name }}</h3>
<p>价格: {{ product.price }}</p>
<button @click="addToCart(product)">加入购物车</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products: []
}
},
mounted() {
this.fetchProducts()
},
methods: {
fetchProducts() {
axios.get('/api/products')
.then(response => {
this.products = response.data
})
},
addToCart(product) {
this.$store.dispatch('addToCart', product)
}
}
}
</script>后端开发（PHP）
建立 RESTful API 接口，使用 Laravel 或原生 PHP 框架处理请求。创建商品管理、订单处理和用户认证等模块。
商品 API 示例代码：
<?php
header("Content-Type: application/json");
require_once 'db_connect.php';
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$query = "SELECT * FROM products";
$result = $conn->query($query);
$products = [];
while ($row = $result->fetch_assoc()) {
$products[] = $row;
}
echo json_encode($products);
}
$conn->close();
?>数据库设计
创建必要的表结构，包括用户表、商品表、订单表和购物车表。
商品表 SQL 示例：
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
stock INT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);前后端交互
使用 Axios 进行 HTTP 请求，实现前后端数据交换。配置跨域请求处理，确保 Vue 前端能访问 PHP 后端 API。
跨域处理示例（PHP）：
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type");用户认证
实现 JWT 或 Session 方式的用户登录验证。PHP 后端生成 token，Vue 前端存储并在请求时携带。
登录 API 示例（PHP）：
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$data = json_decode(file_get_contents('php://input'), true);
$username = $data['username'];
$password = $data['password'];
// 验证用户
$query = "SELECT * FROM users WHERE username = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
$user = $result->fetch_assoc();
if (password_verify($password, $user['password'])) {
$token = generateToken($user['id']);
echo json_encode(['token' => $token]);
}
}
}
?>支付集成
选择第三方支付平台如支付宝或微信支付，实现支付接口。PHP 后端处理支付回调，更新订单状态。
支付回调处理示例：
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$orderId = $_POST['out_trade_no'];
$paymentStatus = $_POST['trade_status'];
if ($paymentStatus === 'TRADE_SUCCESS') {
$query = "UPDATE orders SET status = 'paid' WHERE id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("i", $orderId);
$stmt->execute();
}
}
?>部署方案
前端构建静态文件部署到 Nginx 或 Apache。PHP 后端部署到支持 PHP 的服务器环境，配置数据库连接。
Nginx 配置示例：
server {
listen 80;
server_name yourdomain.com;
root /var/www/html/dist;
index index.html;
location /api {
try_files $uri $uri/ /api/index.php?$query_string;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php7.4-fpm.sock;
}
}性能优化
前端使用 Vue 的懒加载和代码分割。PHP 后端启用 OPcache，优化数据库查询，使用 Redis 缓存热门商品数据。
Redis 缓存示例：
$redis = new Redis();
$redis->connect('127.0.0.1', 6379);
$key = 'hot_products';
if (!$redis->exists($key)) {
$products = getHotProductsFromDB();
$redis->setex($key, 3600, json_encode($products));
} else {
$products = json_decode($redis->get($key));
}
