昆明手机网站推荐,河海大学学风建设网站,百度做网站,做组织架构图的网站项目 后端#xff08;Django#xff09;前端#xff08;Vue 3#xff09; 后端#xff08;Django#xff09;
创建Django项目和应用#xff1a; 确保你已经安装了Django。如果没有安装#xff0c;可以使用以下命令安装#xff1a; pip install django创建一个新的Dja… 项目 后端Django前端Vue 3 后端Django
创建Django项目和应用 确保你已经安装了Django。如果没有安装可以使用以下命令安装 pip install django创建一个新的Django项目 django-admin startproject myproject进入项目目录并创建一个新的应用程序 cd myproject
python manage.py startapp myapp配置项目 在 myproject/settings.py 文件中将 myapp 添加到 INSTALLED_APPS 列表中并配置允许跨域访问因为Vue和Django可能运行在不同端口。安装 corsheaders 库 pip install django-cors-headers在 INSTALLED_APPS 中添加 corsheaders INSTALLED_APPS [...corsheaders,myapp,
]在 MIDDLEWARE 中添加 corsheaders 中间件 MIDDLEWARE [corsheaders.middleware.CorsMiddleware,django.middleware.common.CommonMiddleware,...
]配置允许所有来源访问在生产环境中请替换为实际的前端域名 CORS_ALLOW_ALL_ORIGINS True编写视图和API 在 myapp/views.py 中编写一个简单的视图函数 from django.http import JsonResponsedef get_data(request):data {message: 这是来自Django后端的数据}return JsonResponse(data)在 myapp/urls.py 中配置URL from django.urls import path
from. import viewsurlpatterns [path(api/data/, views.get_data, nameget_data),
]在 myproject/urls.py 中包含 myapp 的URL配置 from django.contrib import admin
from django.urls import path, includeurlpatterns [path(admin/, admin.site.urls),path(, include(myapp.urls)),
]运行后端python manage.py runserver前端Vue 3
创建Vue 3项目 确保你已经安装了 vuelatest。如果没有安装可以使用以下命令安装 npm create vuelatest选择默认配置或根据提示进行自定义配置。 编写Vue组件 在 src/views/Home.vue 中修改代码以调用后端API templatedivh1Vue 3与Django集成示例/h1p{{ responseData.message }}/p/div
/templatescript setup
import { ref } from vue;
import axios from axios;const responseData ref({});const fetchData async () {try {const response await axios.get(http://127.0.0.1:8000/api/data/);responseData.value response.data;} catch (error) {console.error(Error fetching data:, error);}
};fetchData();
/scriptstyle scoped
/* 样式 */
/style运行前端 在项目目录中运行以下命令启动Vue开发服务器 npm run dev现在Vue 3前端应用可以成功调用Django后端提供的API并展示返回的数据。请确保后端和前端服务器都在运行并且根据实际情况调整API的URL。
