使用Python、Django和Vue搭建前后端分离项目

引言

在本文中，我将向你介绍如何使用Python、Django和Vue来搭建一个前后端分离的项目。无论你是一个刚入行的小白，还是一个有经验的开发者，这篇文章都会帮助你快速入门并理解整个搭建过程。

整体流程

下面是整个项目搭建的步骤概述：

步骤 操作
步骤一 创建Django项目
步骤二 配置Django后端
步骤三 创建Vue项目
步骤四 配置Vue前端
步骤五 连接前后端

接下来，我们将详细介绍每个步骤所需的操作和代码。

步骤一：创建Django项目

首先，我们需要创建一个Django项目。打开命令行，并执行以下命令：

django-admin startproject myproject

这将创建一个名为myproject的Django项目。

步骤二：配置Django后端

接下来，我们需要配置Django后端。进入项目目录，并在settings.py文件中进行如下设置：

# settings.py

INSTALLED_APPS = [
    ...
    'rest_framework',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_ALLOW_ALL = True

以上配置中，我们添加了rest_framework应用，以及允许跨域请求的corsheaders中间件。

步骤三：创建Vue项目

现在，我们需要创建一个Vue项目。在命令行中执行以下命令：

vue create myproject-frontend

这将创建一个名为myproject-frontend的Vue项目。

步骤四：配置Vue前端

进入Vue项目目录，并打开src/main.js文件，在文件开头添加以下代码：

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

以上代码中，我们引入了axios库并将其设置为Vue的插件，以便于进行HTTP请求。

步骤五：连接前后端

现在，我们需要将前后端连接起来。在Vue项目中，打开src/App.vue文件，并添加以下代码：

<template>
  <div id="app">
    <button @click="getData">获取数据</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    getData() {
      this.axios.get('http://localhost:8000/api/data/')
        .then(response => {
          this.data = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

以上代码中，我们向Vue模板中添加了一个按钮，点击按钮后会通过后端API获取数据，并在页面上展示。

在Django项目中，打开views.py文件，并添加以下代码：

# views.py

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def get_data(request):
    data = [
        {'id': 1, 'name': '数据1'},
        {'id': 2, 'name': '数据2'},
        {'id': 3, 'name': '数据3'}
    ]
    return Response(data)

以上代码中，我们创建了一个API视图函数，该函数返回了一些模拟数据。

最后，在Django项目中的urls.py文件中，添加以下代码：

# urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('api/data/', views.get_data),
]

以上代码中，我们在URL配置中为API视图函数添加了一个路径。

结论

到此为止，我们已经完成了一个基本的前后端分离项目的搭建。通过以上步骤，我们创建了一个Django后端项目