手把手教你使用Django_◆_Vue.js_快速构建项目

简介

Django是一个Python Web框架,Vue.js是一个流行的前端框架.Django◆Vue.js的组合可以快速构建一个全栈Web应用程序.攻略主要包括以下步骤：

创建Django项目

创建Vue.js项目

使用Django Rest Framework创建API

使用Vue.js进行前端开发

将Django和Vue.js集成到一起

示例一：创建一个简单的Todo List

步骤一：创建Django项目

首先在命令行中输入以下代码来创建一个Django项目：

django-admin startproject todo_list

然后进入todo_list目录：

cd todo_list

此时此刻呢,我们需要创建一个Django应用程序.在终端中输入以下命令：

python manage.py startapp todo

现在我们已经有了一个名为todo的Django应用程序,此时此刻呢我们需要在todo目录下创建一个models.py文件,该文件将定义我们的Todo项目模型.

from django.db import models

class TodoItem(models.Model):
title = models.CharField(max_length=200)

此时此刻呢,我们需要创建一个serializers.py文件来创建一个关于Todo项目的序列化类.

from rest_framework import serializers
from .models import TodoItem

class TodoItemSerializer(serializers.ModelSerializer):
class Meta:
    model = TodoItem
    fields = '__all__'

完成序列化器之后,我们可以开始构建API视图.在todo目录下创建views.py文件：

from rest_framework import generics
from .models import TodoItem
from .serializers import TodoItemSerializer

class TodoList(generics.ListCreateAPIView):
queryset = TodoItem.objects.all()
serializer_class = TodoItemSerializer

添加一个URL模式到todo应用中的urls.py：

from django.urls import path
from .views import TodoList

urlpatterns = [
path('api/todo', TodoList.as_view())
]

现在我们已经完成了Django的设置,现在便是Vue.js的设置.

步骤二：创建Vue.js项目

为了使用 Vue.js,你需要首先安装 Node.js.在命令行中输入以下命令来确保 Node.js 已经正确安装：

node -v

此时此刻呢,我们需要安装 Vue.js.输入以下命令：

npm install vue

此时此刻呢,我们需要安装一个CLI命令行工具来创建和管理Vue项目.输入以下命令：

npm install -g vue-cli

现在我们可以创建Vue应用程序了.在终端中,输入以下命令：

vue init webpack todo_list_frontend

在创建过程中,你会被询问一些问题,如项目名称和包的类型.完成之后,在命令行中输入以下命令来安装依赖项：

cd todo_list_frontend
npm install

步骤三：使用Django Rest Framework创建API

我们已经在示例一中为Django项目创建了API视图,现在我们需要在Vue.js项目中使用这个API视图.我们首先需要安装axios库,用于在JavaScript中访问我们的API视图.在命令行中输入以下命令来安装：

npm install axios

在Vue.js项目中创建一个store.js文件,用于管理Todo项目的状态.

import axios from 'axios'

const state = {
  items: []
}

const mutations = {
  setItems(state, items) {
state.items = items
  },
  addItem(state, item) {
state.items.push(item)
  }
}

const actions = {
  async loadItems({commit}) {
const response = await axios.get('/api/todo/')
const items = response.data
commit('setItems', items)
  },
  async addItem({commit}, title) {
const response = await axios.post('/api/todo/', {title})
const addedItem = response.data
commit('addItem', addedItem)
  }
}

export default {
  state,
  mutations,
  actions
}

我们现在需要更新App.vue以使用Vuex存储Todo项目状态：

现在,我们已经完成了Todo List项目的配置.此时此刻呢,我们将学习如何将Django和Vue.js集成到一起.

步骤四：将Django和Vue.js集成到一起

我们需要使用Django来运行Vue.js应用程序.我们可以通过在Django中创建一个视图来完成这一操作.

在todo应用程序的views.py文件中,添加以下代码：

from django.views.generic import TemplateView

class Home(TemplateView):
template_name = 'home.html'

然后,创建一个home.html文件,该文件将通过Django提供的URL路由将Vue.js项目呈现在页面上.

在urls.py文件中添加以下代码来指定一个URL路由：

from django.urls import path
from .views import TodoList, Home

urlpatterns = [
path('api/todo/', TodoList.as_view()),
path('', Home.as_view(), name='home')
]

现在你可以运行Django服务器并访问Vue.js应用程序了.

python manage.py runserver

示例一创建的Todo List项目完成.

示例二：创建一个单页面应用程序

步骤一：创建Django项目

同样,我们需要使用Django创建一个Web应用程序.输入以下命令：

django-admin startproject single_page_app

CD进入应用程序目录：

cd single_page_app

创建一个应用程序：

python manage.py startapp api

在应用程序的目录下,创建一个serializers.py文件：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
class Meta:
    model = Post
    fields = '__all__'

在api应用中创建views.py,并添加以下代码：

from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostList(generics.ListCreateAPIView):
queryset = Post.objects.all()
serializer_class = PostSerializer

class PostDetail(generics.RetrieveUpdateDestroyAPIView):
queryset = Post.objects.all()
serializer_class = PostSerializer

我们需要在api/urls.py中添加路由：

from django.urls import path
from .views import PostList, PostDetail

urlpatterns = [
path('api/posts', PostList.as_view()),
path('api/posts/', PostDetail.as_view())
]

定义模型,我们可以在models.py文件中定义Post模型：

from django.db import models

class Post(models.Model):
title = models.CharField(max_length=200)
content = models.CharField(max_length=500)

为了支持Vue.js的前端部分,我们还需要为Django设置Cors头.我们将安装django-cors-headers：

pip install django-cors-headers

在settings.py文件中,添加以下代码：

INSTALLED_APPS = [
# ...
'corsheaders',
# ...
]

MIDDLEWARE = [
# ...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
# ...
]

CORS_ORIGIN_ALLOW_ALL = True

完成所有设置后,我们将创建Vue.js前端部分.

步骤二：创建Vue.js项目

在命令行中,通过以下命令安装Vue.js：

npm install vue

创建一个Vue.js项目：

vue init webpack single_page_app_frontend

安装所有依赖项：

cd single_page_app_frontend
npm install

在App.vue中输入以下代码：

在src/router/index.js中添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Posts from '@/components/Posts'
import PostDetail from '@/components/PostDetail'

Vue.use(Router)

export default new Router({
  routes: [
{
  path: '/',
  name: 'Posts',
  component: Posts
},
{
  path: '/post/:id',
  name: 'PostDetail',
  component: PostDetail
}
  ]
})

然后在src/store.js中添加以下代码：

const state = {
  posts: []
}

const mutations = {
  setPosts(state, posts) {
state.posts = posts
  }
}

const actions = {
  async loadPosts({commit}) {
const response = await axios.get('/api/posts/')
const posts = response.data
commit('setPosts', posts)
  }
}

export default {
  state,
  mutations,
  actions
}

完整的示例二已经准备好了,我们可以将Django和Vue.js集成起来.

步骤三：将Django和Vue.js集成到一起

首先,在Vue.js项目中,创建一个新的入口文件index.html,并将其放到根目录下：

我们还需要创建一个Django视图来向前端传递静态HTML：

from django.views.generic import TemplateView

class Home(TemplateView):
template_name = 'index.html'

在urls.py文件中,我们需要添加以下路由：

from django.urls import path
from .views import Home, PostList, PostDetail

urlpatterns = [
path('api/posts/', PostList.as_view()),
path('api/posts//', PostDetail.as_view()),
path('', Home.as_view(), name='home'),
]

再次运行Django服务器：

python manage.py runserver

以上便是"手把手教你使用Django ◆ Vue.js 快速构建项目"的完整攻略.