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项目的名称.

③ 合并前后端

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

import os

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

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

④ 接口调用

在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组件：

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

2. 使用Django的CORS支持

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

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

pip install django-cors-headers

INSTALLED_APPS = [
...
'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True

此时,Django项目就可以支持跨域请求了.

总结

今天小编给大家带来得是如何使用Python框架Django和JavaScript框架Vue结合进行前后端分离.通过示例,我们了解到了如何创建前后端分离项目、如何进一步优化前后端分离项目的结构.希望这篇文章能对使用Django和Vue进行前后端分离开发的开发者有所启发.

以上就是土嘎嘎小编为大家整理的python框架django中结合vue进行前后端分离相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用,就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！