当前位置：首页 > VUE

vue和php实现商城

2026-02-22 00:26:26VUE

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 前端存储并在请求时携带。

<?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));
}

vue和php实现商城