django+vue项目-制作一个简单的购物网站

为了创建一个简单的购物网站，我们可以使用Django作为后端框架和Vue作为前端框架。以下是一个简化的项目结构和基本的代码示例。

后端（Django）:

1. 安装Django:

pip install django

2. 创建新的Django项目和应用:

django-admin startproject shop_backend
cd shop_backend
python manage.py startapp products

3. 在products/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()

4. 在products/serializers.py中创建序列化器:

from rest_framework import serializers
from .models import Product
 
class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = '__all__'

5. 在products/views.py中创建视图:

from rest_framework import viewsets
from .models import Product
from .serializers import ProductSerializer
 
class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

6. 在shop_backend/urls.py中配置路由:

from django.urls import include, path
from rest_framework import routers
from products.views import ProductViewSet
 
router = routers.DefaultRouter()
router.register(r'products', ProductViewSet)
 
urlpatterns = [
    path('', include(router.urls)),
]

前端（Vue）:

1. 安装Vue CLI:

npm install -g @vue/cli

2. 创建新的Vue项目:

vue create shop_frontend
cd shop_frontend

3. 添加Vue Router和Axios:

vue add router
npm install axios

4. 在src/components/ProductList.vue中创建组件来显示商品列表:

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      try {
        const response = await axios.get('http://localhost:8000/products/');
        this.products = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

5. 在src/router/index.js中配置路由:

import Vue from 'vue';
import VueRouter from 'vue-router';
impor