django和vue的前端分离开发,django前端

django和vue的前端分离开发,django前端

首先，进去django项目的项目目录中，执行：vue-init webpack firstvue## firstvue为前端项目的名称，可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。my所以，本文希望通过一个简单的demo,讲一讲基于Django+Vue的前后端分离开发，将Django作为一个纯后端的服务，为前端Vue页面提供数据支持。本文采用的django版本号2.2.5,Vue版本2.9.6。

⊙▽⊙ Django+Vue+Celery Environment For Django: Python, Django, MySQL, etc. Using pip to install modules including Django and MySQL is recommended; For VuPython全栈开发可以通过以下方式实现：使用Django框架：Django提供完整的Web开发框架，包括后端和前端开发所需的主要组件。通过Django可以更高效地开发全栈应用程序。使用Python前端

1、在django_vue项目根目录下，创建前端工程appweb vue-init webpack appweb 2、安装VUE依赖模块npm install npm install vue-resource npm install element-ui 3、启动前端工程np开发环境下，vue 会占用一个端口，这里是localhost:5173,而djangorestframework 也会占用一个端口，比如localhost:8000,那么localhost:5137 需要获取localhost:8000 的数据进行联

前端开发工具使用IntelliJ IDEA或VS Code 安装好后执行如下操作# 前端项目创建# cd到要创建项目的路径npm init vite@latest# 根据提示选择√ Project name: vite-project √ S模版用前端框架Vue代替，这里介绍url路由7 [T]在backend新增一个urls.py文件，把我们新增的两个接口添加到路由里。在后端项目的url中设置如下from django.urls import path from b