正文

新手必学：Django框架与Vue.js实战结合，轻松打造全栈项目实例教程

/0 浏览量
0725

引言

在当前的前后端分离的开发模式中，Django框架和Vue.js都是非常受欢迎的技术。Django以其强大的后端功能，如ORM、认证系统、中间件等，而Vue.js则以其简洁的语法、高效的组件化开发以及双向数据绑定等特性受到前端开发者的喜爱。本文将带您通过一个实例教程，学习如何将Django与Vue.js结合，打造一个全栈项目。

一、项目准备

1.1 环境搭建

首先，确保您的计算机上已安装Python 3.6及以上版本。然后，通过以下命令安装Django和Vue.js：

pip install django
npm install vue

1.2 创建Django项目

创建一个名为myproject的Django项目：

django-admin startproject myproject

进入项目目录：

cd myproject

1.3 创建Django应用

在myproject目录下创建一个名为myapp的Django应用：

python manage.py startapp myapp

1.4 配置Django项目

在myproject/settings.py中，将myapp添加到INSTALLED_APPS列表中：

INSTALLED_APPS = [
    ...
    'myapp',
]

二、Django后端开发

2.1 创建模型

在myapp/models.py中定义一个模型Book：

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()

2.2 创建视图

在myapp/views.py中创建一个视图book_list：

from django.http import JsonResponse
from .models import Book

def book_list(request):
    books = Book.objects.all().values('title', 'author', 'publish_date')
    return JsonResponse(list(books), safe=False)

2.3 配置URL

在myapp/urls.py中配置URL：

from django.urls import path
from . import views

urlpatterns = [
    path('books/', views.book_list, name='book-list'),
]

在myproject/urls.py中包含myapp的URL配置：

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('books/', include('myapp.urls')),
]

三、Vue.js前端开发

3.1 创建Vue项目

使用Vue CLI创建一个名为myvue的Vue项目：

vue create myvue

进入项目目录：

cd myvue

3.2 安装axios

安装axios用于发送HTTP请求：

npm install axios

3.3 编写Vue组件

在src/components/BookList.vue中编写一个组件：

<template>
  <div>
    <h1>Book List</h1>
    <ul>
      <li v-for="book in books" :key="book.id">
        {{ book.title }} - {{ book.author }} ({{ book.publish_date }})
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      books: [],
    };
  },
  created() {
    this.fetchBooks();
  },
  methods: {
    fetchBooks() {
      axios.get('/books/')
        .then(response => {
          this.books = response.data;
        })
        .catch(error => {
          console.error('Error fetching books:', error);
        });
    },
  },
};
</script>

3.4 配置Vue Router

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

import Vue from 'vue';
import Router from 'vue-router';
import BookList from '@/components/BookList.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'BookList',
      component: BookList,
    },
  ],
});

3.5 运行Vue项目

在终端中运行以下命令启动Vue项目：

npm run serve

四、项目测试与部署

4.1 测试项目

在浏览器中访问http://localhost:8080/，您应该能看到包含书籍列表的页面。

4.2 部署项目

您可以使用Docker将项目容器化，然后部署到服务器。这里不再详细说明部署过程。

总结

通过本文，您已经学会了如何将Django框架与Vue.js结合，打造一个全栈项目。在实际开发中，您可以根据需求对项目进行扩展和优化。希望这篇文章对您有所帮助！

-- 展开阅读全文 --