手把手教你使用Django + Vue.js 快速构建项目

我来为你讲解"手把手教你使用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项目状态：

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addItem">
      <input type="text" placeholder="Add a todo item" v-model="newItemTitle">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="item in items" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'app',
  data() {
    return {
      newItemTitle: ''
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    ...mapActions(['loadItems', 'addItem']),
  },
  computed: {
    ...mapState(['items'])
  }
}
</script>

现在，我们已经完成了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项目呈现在页面上。

<!DOCTYPE html>
<html>

<head>
  <title>Todo List</title>
</head>

<body>
  <div id="app"></div>
  <script src="{% static 'js/app.js' %}"></script>
</body>

</html>

在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/<int:pk>', 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中输入以下代码：

<template>
  <div>
    <h1>Single Page App</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{post.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    axios.get('/api/posts/')
      .then(response => this.posts = response.data)
      .catch(error => console.log(error))
  }
}
</script>

在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，并将其放到根目录下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Single Page App</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app"></div>
    <script src="{% static 'js/manifest.js' %}"></script>
    <script src="{% static 'js/vendor.js' %}"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</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/<int:pk>/', PostDetail.as_view()),
    path('', Home.as_view(), name='home'),
]

再次运行Django服务器：

python manage.py runserver

现在打开浏览器并前往http://localhost:8000。您应该能够看到示例二的Single Page App项目。

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

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：手把手教你使用Django + Vue.js 快速构建项目 - Python技术站

手把手教你使用Django + Vue.js 快速构建项目

简介

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

步骤一：创建Django项目

步骤二：创建Vue.js项目

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

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

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

步骤一：创建Django项目

步骤二：创建Vue.js项目

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

相关文章