『赠书第 2 期』- 『Django+Vue.js商城项目实战』

在现代 web 开发中，后端框架 Django 与前端框架 Vue.js 的结合越来越受到开发者的青睐。Django 强大的后台管理和 RESTful API 能力，再加上 Vue.js 提供的灵活和高效的前端开发体验，使得开发一个完整的商城项目成为可能。本文将通过一个简单的商城项目示例，展示如何将 Django 与 Vue.js 结合使用。

一、项目结构

在本项目中，我们将创建一个基本的 Django API 服务器和一个 Vue.js 前端应用。项目结构如下：

my_shop/
├── backend/
│   ├── manage.py
│   ├── shop/
│   │   ├── migrations/
│   │   ├── models.py
│   │   ├── serializers.py
│   │   ├── views.py
│   │   └── urls.py
│   ├── settings.py
│   └── urls.py
└── frontend/
    ├── src/
    │   ├── components/
    │   ├── App.vue
    │   ├── main.js
    ├── package.json
    ├── vue.config.js
    └── index.html

二、后端 - Django

首先，我们在 Django 中创建一个基础的商品模型，以便我们可以管理商品信息。

1. 创建 Django 项目

django-admin startproject my_shop backend
cd backend
python manage.py startapp shop

2. 定义模型

在 shop/models.py 中，我们定义一个简单的商品模型：

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    description = models.TextField()

    def __str__(self):
        return self.name

3. 创建序列化器

接下来，在 shop/serializers.py 中创建一个序列化器，以便将模型实例转换为 JSON 格式：

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = '__all__'

4. 创建视图和路由

在 shop/views.py 中创建视图以处理 API 请求：

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

在 shop/urls.py 中添加路由：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ProductViewSet

router = DefaultRouter()
router.register(r'products', ProductViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

最后，在项目的 backend/urls.py 中包含 shop 应用的路由：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('shop.urls')),
]

三、前端 - Vue.js

接下来，我们将使用 Vue.js 创建前端应用。

1. 创建 Vue 项目

在项目根目录中使用 Vue CLI 创建一个新项目：

vue create frontend
cd frontend

2. 安装 Axios

我们需要安装 Axios 来进行 API 请求：

npm install axios

3. 创建 API 请求

在 src/main.js 中配置 Axios 的基本路径：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
Vue.prototype.$http = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');

4. 创建组件

在 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>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      this.$http.get('products/')
        .then(response => {
          this.products = response.data;
        })
        .catch(error => {
          console.error('有错误发生:', error);
        });
    }
  }
}
</script>

最后，在 App.vue 中引入 ProductList 组件：

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

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

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

四、运行项目

1. 启动 Django 服务器：

cd backend
python manage.py migrate
python manage.py runserver

1. 启动 Vue.js 开发服务器：

cd frontend
npm run serve

总结

通过以上步骤，我们实现了一个简单的 Django + Vue.js 商城项目。后端使用 Django 提供 API 接口，前端使用 Vue.js 显示商品列表。这个项目可以作为构建更复杂电商平台的基础，开发者可以在此基础上进一步扩展功能，如用户认证、购物车管理、订单处理等。