Vue.js Heroku: Django Rest Framework + Vue应用部署指南

在本文中，我们将介绍如何在Heroku上部署一个使用Django Rest Framework和Vue.js构建的应用。我们将逐步指导您完成创建、配置和部署的过程，并提供示例代码作为参考。

阅读更多：Vue.js 教程

准备工作

在开始之前，您需要安装以下工具和环境：

1. Node.js：用于运行和构建Vue.js应用
2. Python和Django：用于构建和管理后端API
3. Heroku CLI：用于部署应用到Heroku

确保您的开发环境和命令行都能正常使用这些工具。

创建项目

首先，让我们创建一个新的Django项目。在命令行中运行以下命令：

django-admin startproject myproject

接下来，进入项目目录并创建一个应用：

cd myproject
python manage.py startapp api

然后，修改settings.py文件，将我们的应用添加到INSTALLED_APPS列表中：

INSTALLED_APPS = [
    ...
    'api',
    ...
]

配置后端API

现在，我们可以定义我们的API模型和视图。在api/models.py文件中，创建一个简单的模型：

from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=100)
    published_date = models.DateField()

然后，在api/serializers.py文件中创建一个与模型对应的序列化器：

from rest_framework import serializers
from .models import Book

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = '__all__'

接下来，在api/views.py文件中创建一个视图类。这个视图类将处理与图书相关的HTTP请求：

from rest_framework import viewsets
from .models import Book
from .serializers import BookSerializer

class BookViewSet(viewsets.ModelViewSet):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

最后，在api/urls.py文件中定义URL路由：

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

router = DefaultRouter()
router.register('books', BookViewSet)

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

创建Vue.js应用

接下来，让我们创建一个新的Vue.js应用。在命令行中运行以下命令：

vue create frontend

选择默认配置，并等待Vue CLI创建应用。完成后，进入应用目录：

cd frontend

配置前端应用

我们需要安装一些依赖项来集成Vue.js和Django Rest Framework。然后运行以下命令：

npm install axios
npm install vue-router

现在，让我们创建一个API模块来处理与后端API的交互。在src目录中，创建一个名为api.js的文件，并添加以下内容：

import axios from 'axios';

const apiClient = axios.create({
    baseURL: '/api/'
});

export default {
    getBooks() {
        return apiClient.get('books/');
    },
    createBook(book) {
        return apiClient.post('books/', book);
    },
    updateBook(book) {
        return apiClient.put(`books/{book.id}/`, book);
    },
    deleteBook(id) {
        return apiClient.delete(`books/{id}/`);
    }
};

接下来，让我们在src目录中创建一个名为routes.js的文件，并添加以下内容：

import Books from './views/Books.vue';

const routes = [
    {
        path: '/',
        name: 'books',
        component: Books
    }
];

export default routes;

现在，让我们在src目录中创建一个名为App.vue的文件，并添加以下内容：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

最后，让我们在src/views目录中创建一个名为Books.vue的文件，并添加以下内容：

<template>
  <div>
    <h1>Books</h1>
    <ul>
      <li v-for="book in books" :key="book.id">
        {{ book.title }} - {{ book.author }}
        <button @click="deleteBook(book.id)">Delete</button>
      </li>
    </ul>
    <form @submit.prevent="createBook">
      <input v-model="newBook.title" placeholder="Title" required>
      <input v-model="newBook.author" placeholder="Author" required>
      <button type="submit">Add Book</button>
    </form>
  </div>
</template>

<script>
import api from '../api';

export default {
  name: 'Books',
  data() {
    return {
      books: [],
      newBook: {
        title: '',
        author: ''
      }
    };
  },
  mounted() {
    this.getBooks();
  },
  methods: {
    getBooks() {
      api.getBooks()
        .then(response => {
          this.books = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    createBook() {
      api.createBook(this.newBook)
        .then(() => {
          this.newBook.title = '';
          this.newBook.author = '';
          this.getBooks();
        })
        .catch(error => {
          console.error(error);
        });
    },
    deleteBook(id) {
      api.deleteBook(id)
        .then(() => {
          this.getBooks();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

配置Heroku

现在，我们已经完成了应用的开发和配置。接下来，让我们将它部署到Heroku上。

首先，登录到Heroku账户并创建一个新的应用。然后，在命令行中运行以下命令以部署应用：

heroku login
heroku git:remote -a your-app-name
git add .
git commit -m "Initial commit"
git push heroku master

等待部署完成后，运行以下命令以执行数据库迁移：

heroku run python manage.py migrate

完成后，您可以在您的Heroku应用URL上访问部署的应用。

总结

在本文中，我们介绍了如何使用Vue.js和Django Rest Framework构建一个应用，并在Heroku上进行部署。通过遵循本指南的步骤，您可以成功创建和部署一个使用Vue.js和Django Rest Framework的应用，并能在Heroku上运行它。希望这篇文章对您有所帮助！