手把手教你商城小程序源码搭建开发

随着电商的发展，小程序作为一种新的应用形式逐渐受到欢迎。利用 ThinkPHP 框架、MySQL 数据库、Vue 前端和 APP 后端，我们可以快速搭建一个商城小程序。本文将详细介绍搭建的步骤及代码示例。

一、环境准备

在开始之前，我们需要准备好环境：

1. 安装 PHP：建议使用 PHP 7.2 以上版本。
2. 安装 Composer：用于管理 PHP 依赖。
3. 安装 MySQL：用作后端数据存储。
4. 安装 Node.js 和 npm：用于 Vue 项目构建。
5. 安装 Vue CLI：终端中执行 npm install -g @vue/cli。

二、搭建后端

1. 使用 ThinkPHP 创建后端项目

在命令行中执行以下命令，使用 Composer 创建 ThinkPHP 项目。

composer create-project topthink/think myshop
cd myshop

2. 数据库设计

进入 MySQL，创建一个名为 myshop 的数据库，并创建商品表 products：

CREATE DATABASE myshop;
USE myshop;

CREATE TABLE products (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    price DECIMAL(10,2) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. 创建商品模型

在 application/model 目录下创建 Product.php 文件，内容如下：

<?php
namespace app\model;

use think\Model;

class Product extends Model {
    protected $table = 'products';
}

4. 创建商品控制器

在 application/controller 目录下创建 ProductController.php，内容如下：

<?php
namespace app\controller;

use app\model\Product;

class ProductController {
    public function list() {
        $products = Product::all();
        return json($products);
    }

    public function create() {
        $data = request()->post();
        $product = new Product();
        $product->save($data);
        return json(['status' => 'success']);
    }
}

5. 设置路由

在 route/app.php 文件中添加路由：

use think\facade\Route;

Route::group('product', function() {
    Route::get('list', 'ProductController/list');
    Route::post('create', 'ProductController/create');
});

三、搭建前端

1. 创建 Vue 项目

在另一个目录下执行以下命令，创建 Vue 项目：

vue create myshop-frontend
cd myshop-frontend

2. 安装 Axios

Axios 是用于发送 HTTP 请求的库，安装命令如下：

npm install axios

3. 创建商品列表组件

在 src/components 目录下创建 ProductList.vue：

<template>
  <div>
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}元
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('http://localhost/myshop/public/product/list')
        .then(response => {
          this.products = response.data;
        });
    }
  }
};
</script>

4. 在主应用中注册组件

在 src/App.vue 中添加 ProductList 组件：

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList
  }
};
</script>

四、启动项目

1. 启动 ThinkPHP 后端，在项目根目录输入：

php think run

1. 启动 Vue 前端，在 myshop-frontend 目录执行：

npm run serve

现在你可以在浏览器中访问 http://localhost:8080 查看商品列表。

总结

通过以上步骤，你可以完成一个基本的商城小程序的搭建。后续可以根据需求扩展更多功能，如用户登录、下单、支付等。希望本教程能够帮助你更好地进行商城小程序的开发！