python框架django中结合vue进行前后端分离

使用Python框架Django和JavaScript框架Vue结合进行前后端分离，能够提高开发效率，优化代码结构和分工。下面是一个详细的攻略，分为两个示例说明。

示例一：前后端分离项目创建

1. 创建Django项目

使用Django的脚手架 django-admin 可以快速创建一个Django项目，命令如下：

django-admin startproject project_name

2. 创建Vue项目

使用Vue的官方命令行工具Vue CLI可以快速创建一个Vue项目，命令如下：

npm install -g vue-cli
vue init webpack client

其中，client 是Vue项目的名称。

3. 合并前后端

将Vue项目生成的dist文件夹中的全部文件拷贝到Django项目的根目录下，然后在Django项目的 settings.py 文件中添加以下代码：

import os

# 设置静态文件路径
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "dist/static"),
]

此时，可以通过启动 Django 项目来查看效果。

4. 接口调用

在Vue项目中，可使用Axios对后端进行接口调用。例如：

import axios from 'axios'

axios.get('/api/example/')
    .then(response => {
        console.log(response.data)
    })

在Django项目中，可使用类视图和REST框架对接口进行处理，例如：

from rest_framework.views import APIView
from rest_framework.response import Response

class ExampleApi(APIView):
    def get(self, request, *args, **kwargs):
        return Response({'message': 'Hello, world!'})

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

from django.urls import path
from .views import ExampleApi

urlpatterns = [
    path('api/example/', ExampleApi.as_view())
]

此时，Vue项目中的Axios调用将会连接到Django项目中的 ExampleApi 类视图。

示例二：前后端分离项目优化

1. 使用Django的Webpack Loader插件

使用Webpack Loader插件，可以将Vue项目中的Webpack打包结果直接嵌入到Django项目中，进一步优化前后端分离项目的结构。

在Django项目中执行以下命令，安装Webpack Loader插件：

pip install django-webpack-loader

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

INSTALLED_APPS = [
    ...
    'webpack_loader',
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'client', 'webpack-stats.json'),
    }
}

在Vue项目中，使用Webpack打包时，需要加上一些配置项，例如：

module.exports = {
    // ...
    output: {
        path: __dirname + '/../dist/',
        publicPath: '/static/',
        filename: 'js/[name].[hash].js',
    },
}

然后，在Django项目的HTML模板文件中，使用以下代码嵌入Vue组件：

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Django Vue</title>
</head>
<body>
    <div id="app"></div>

    {% render_bundle 'app' %}
</body>
</html>

此时，Django项目会自动嵌入Vue组件，无需手动将Vue项目中的dist文件夹拷贝到Django项目中。

2. 使用Django的CORS支持

在前后端分离项目中，通常需要使用跨域资源共享（CORS）来支持跨域请求。

在Django项目中执行以下命令，安装CORS支持：

pip install django-cors-headers