正文

掌握Django与Vue.js：实战结合教程，轻松构建全栈应用

/0 浏览量
0725

在当今的Web开发领域，全栈应用的开发变得越来越流行。Django和Vue.js是两个非常流行的开源框架，分别用于后端和前端开发。本教程将带你通过实战的方式，掌握如何结合Django与Vue.js，轻松构建一个全栈应用。

第一部分：环境搭建

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

  1. 操作系统：Windows、macOS或Linux
  2. Python：Python 3.x版本
  3. Django：Django 3.x版本
  4. Node.js：Node.js 14.x版本
  5. Vue CLI：Vue CLI 4.x版本

1.1 安装Python和Django

  1. 下载Python并安装，确保在系统环境变量中添加Python路径。
  2. 打开命令行，使用以下命令安装Django：
pip install django

1.2 安装Node.js和Vue CLI

  1. 下载Node.js并安装，确保在系统环境变量中添加Node.js路径。
  2. 打开命令行，使用以下命令全局安装Vue CLI：
npm install -g @vue/cli

第二部分：Django后端开发

2.1 创建Django项目

  1. 打开命令行，使用以下命令创建一个新的Django项目：
django-admin startproject myproject
  1. 进入项目目录：
cd myproject

2.2 创建Django应用

  1. 使用以下命令创建一个新的Django应用：
python manage.py startapp myapp
  1. 在myapp/models.py中定义一个模型，例如：
from django.db import models

class Book(models.Model):
    title = models.CharField(max_length=100)
    author = models.CharField(max_length=100)
    publish_date = models.DateField()
  1. 运行以下命令生成数据库表：
python manage.py makemigrations
python manage.py migrate
  1. 在myapp/views.py中定义一个视图，例如：
from django.http import JsonResponse
from .models import Book

def book_list(request):
    books = Book.objects.all()
    return JsonResponse([book.title for book in books], safe=False)
  1. 在myapp/urls.py中配置URL：
from django.urls import path
from . import views

urlpatterns = [
    path('books/', views.book_list, name='book-list'),
]
  1. 在myproject/urls.py中包含应用URL：
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls')),
]
  1. 运行以下命令启动Django开发服务器：
python manage.py runserver

现在，你可以在浏览器中访问http://127.0.0.1:8000/api/books/，看到返回的JSON数据。

第三部分：Vue.js前端开发

3.1 创建Vue.js项目

  1. 在Django项目目录下，创建一个名为client的文件夹。
  2. 打开命令行，进入client文件夹，并使用以下命令创建一个新的Vue.js项目：
vue create vue-client
  1. 进入vue-client项目目录，并启动开发服务器：
cd vue-client
npm run serve

3.2 编写Vue.js组件

  1. 在src/components文件夹下创建一个名为BookList.vue的组件，并添加以下代码：
<template>
  <div>
    <h1>Books</h1>
    <ul>
      <li v-for="book in books" :key="book">
        {{ book }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [],
    };
  },
  created() {
    fetch('http://127.0.0.1:8000/api/books/')
      .then((response) => response.json())
      .then((data) => {
        this.books = data;
      });
  },
};
</script>
  1. 在src/App.vue中引入BookList组件：
<template>
  <div id="app">
    <BookList />
  </div>
</template>

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

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

现在，你可以在浏览器中访问http://127.0.0.1:8080/，看到包含书籍列表的Vue.js应用。

第四部分：前后端联调

  1. 在Django项目中，安装djangorestframework：
pip install djangorestframework
  1. 在myproject/settings.py中添加以下配置：
INSTALLED_APPS = [
    # ...
    'rest_framework',
    'myapp',
    # ...
]

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': [
        'rest_framework.renderers.JSONRenderer',
    ],
}
  1. 在myapp/urls.py中配置REST框架的URL：
from django.urls import path, include
from rest_framework import routers
from . import views

router = routers.DefaultRouter()
router.register(r'books', views.BookViewSet)

urlpatterns = [
    path('', include(router.urls)),
    # ...
]
  1. 在Django项目中，定义一个视图集：
from rest_framework import viewsets
from .models import Book
from .serializers import BookSerializer

class BookViewSet(viewsets.ModelViewSet):
    queryset = Book.objects.all()
    serializer_class = BookSerializer
  1. 在myapp/serializers.py中定义一个序列化器：
from rest_framework import serializers
from .models import Book

class BookSerializer(serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['title', 'author', 'publish_date']

现在，你可以在浏览器中访问http://127.0.0.1:8000/api/books/，看到返回的JSON数据。

第五部分：部署与维护

  1. 将Django项目部署到服务器，例如使用Gunicorn和Nginx。
  2. 将Vue.js项目部署到CDN或静态服务器，例如使用Netlify或Vercel。
  3. 使用Docker容器化技术，实现Django和Vue.js项目的自动化部署。
  4. 定期对项目进行代码审查和性能优化，确保项目的稳定性和安全性。

通过以上教程，你现在已经掌握了如何结合Django与Vue.js，轻松构建全栈应用。祝你编程愉快！

-- 展开阅读全文 --