Django3+Vue3进行前后端开发环境搭建

已于 2022-03-19 11:32:12 修改
阅读量7.2k 收藏 59
点赞数 16
分类专栏： Django + vue 文章标签： python django vue web
于 2021-08-21 19:31:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lc_buzhidao/article/details/119840745
版权

前后端开发环境搭建总结

背景

本文基于具备一定python后端基础，想通过基于Django，结合时下热门的前端框架Vue，来了解web前后端开发的角度作总结描述。
因此，本文假定已经安装好了python环境、Django模块。

环境需求

  • python开发环境
  • Django模块
  • Node.js
  • Vue-Cli

环境准备

Node.js

node.js安装参考：https://www.runoob.com/nodejs/nodejs-install-setup.html

Vue-Cli

npm安装模块速度慢，这里先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli

cnpm install -g @vue/cli

创建前端项目

cd /d D:\myProjects\vue # cd到指定目录，将在该目录下创建前端项目
vue create myfrontend #通过vue-cli创建快速创建前端项目，myFrontend是自定义的项目名字

此时出现，因为笔者安装的vue3环境，且这里仅仅为了演示环境搭建过程，所以选择Default(Vue3)。
但Manually是面向生产的项目更加需要的。
Default和Manually的区别：
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
在这里插入图片描述
等待一会，出现如下界面，这前端项目创建完成。
在这里插入图片描述
运行前端项目

cd myfrontend
npm run serve

在这里插入图片描述
访问前端项目
在这里插入图片描述
至此，前端项目创建完毕，接下来开始创建后端项目。

创建后端项目

cd /d D:\myProjects\python # cd到指定目录，在该目录下创建后端项目。
django-admin startproject myDjango # 创建后端项目
cd myDjango # cd到后端项目
python manage.py startapp myApp #为后端项目创建一个应用
python manage.py runserver #启动后端项目

在这里插入图片描述

浏览器访问：
在这里插入图片描述

至此后端项目创建完成。接下来是前后端连接了。

连接前后端

编译前端项目

Vue3直接编译后生成的dist目录，已经不包含static文件夹了，但是django访问静态资源靠一个配置：STATIC_URL，这个配置的默认值是STATIC_URL = ‘/static/’，即在static文件夹中访问静态资源。dist目录中没有static文件夹，就会出现404找不到资源的报错。
此处解决方法参考：
网络毒刘的博文：https://blog.csdn.net/qq_41856814/article/details/105834130
Django官方文档对STATIC_URL的说明：
https://docs.djangoproject.com/en/2.1/ref/settings/#std:setting-STATIC_URL
Vue关于可选配置的说明：
https://cli.vuejs.org/zh/config/#assetsdir
具体解决方法是：

  1. 在前端项目根目录（此处是D:\myProjects\vue\myfrontend）创建vue.config.js
  2. 填写如下内容，该配置指定放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir （默认是./dist）的) 目录。
module.exports = {
    assetsDir: 'static'
};

然后执行编译命令。

cd /d D:\myProjects\vue\myfrontend
npm run build

在这里插入图片描述

此时，在前端项目目录里，会出现一个dist文件夹。
在这里插入图片描述

将dist文件夹拷贝到后端项目里，本文中的位置如下：
在这里插入图片描述

修改Django项目配置

在myDjango/settings.py中修改：
在这里插入图片描述
在这里插入图片描述
在D:\myProjects\python\myDjango\myDjango\urls.py修改：
在这里插入图片描述

启动Django服务器

python manage.py runserver

在这里插入图片描述
端口是8000，说明是从后端Django服务访问到前端页面的。
前后端开发环境搭建完成。
接下来就是分别进行前端项目和后端项目的开发任务了。

个人网站

linchao.cc 欢迎交流

阿刁阿
关注
专栏目录
Vue3 与 django 进行前后端数据交互之(django向Vue上传数据)
sw_dl的博客
09-04 2942
前端像后端表单传递数据//router目录下的 index.tspath: '/',},
Python+Django+vue3全栈开发商城项目.zip
10-05
Python+Django+vue3全栈开发商城项目，包含用户、订单、购物车、商品等模块，后端代码均有注释，是学习python项目开发良好案例
Python Web 框架 django-vue3-admin前后端项目运行完整步骤
最新发布
学亮编程手记
08-14 859
在这种情况下，如果我们dvadmin3更新了代码，你可以使用gitee仓库功能进行强制同步最新代码至你的仓库，后面再合并最新代码至你的MyDev分支便可。可以先Fork仓库至你项目，然后再基于dev创建你自己的分支，比如创建一个基于官方dev的MyDev分支，接着你再下载拉取你的项目仓库代码至工作目录，最后切换至MyDev分支进行开发便可。开发环境必配置的地址VITE_API_URL，请配置至自己的开发环境的后端。，主要是配置``VITE_API_URL`地址为生产环境的后端地址。
Vue3 + Django 前后端分离项目实现密码认证登录
Python技术探索
03-23 3212
Vue3 + Django 前后端项目实现密码认证登录
【无标题】从0到1 搭建一个vue3+Django项目
weixin_45286211的博客
12-05 1739
从0到1搭建一个vue3+Django项目
django3与vue3本地搭建
LuiChun
12-05 1187
在虚拟环境中安装django与vue 安装django pip insstall django 创建django项目 django-admin startproject djangovue 进入djangovue项目里面 cd djangovue 进行应用迁移 python manage.py migrate 运行一下服务器(这里的使mac电脑) ./manage.py runserver 创建一个文件夹，（manage.py同目录下） mark templates 并且在templates文件夹下创建一个
Vue3 与 django 进行 前后端数据交互之(Vue 上传)
sw_dl的博客
09-03 1452
<div> // 通过一个button 组件和一个 input 组件完成前端上传的HTML部分</div>"/>// 去除input 外观
Django+Vue开发环境框架
05-08
总结来说，这个“Django+Vue开发环境框架”提供了一个稳定的开发起点，帮助开发者快速搭建前后端分离的Web应用。通过理解和熟练运用Django和Vue.js，你可以构建出响应式、高性能的Web应用，并且随着对这两个框架的...
基于python3+django+Vue自动化测试平台开发
09-29
在构建“基于Python3+Django+Vue自动化测试平台”的过程中，我们将涉及到多个技术栈的知识点，涵盖了后端开发、前端开发以及项目整合等多个方面。下面将详细阐述这些关键技术及其应用。 1. Python3：Python3是这个...
django+vue分离项目实战.rar
09-03
- 安装并配置好Python、Django、Node.js和Vue.js的开发环境。 - 创建Django项目和应用，设置好数据库连接。 - 使用DRF构建API接口。 - 在Vue项目中配置axios，设置API请求路径。 - 设计并实现Vue组件，使用eli-ui...
Django+vue+ElementUi 实现前后端分离项目
vincent的博客
10-28 4622
![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200616914-384109510.png) ![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200630022-562388827.png) 本文主要分为五个部分，逐一进行讲解前后端分离项目环境搭建流程，主要有：环境搭建、Django、vue、整合、总结； 一..
Django+Vue.js搭建前后端分离项目的示例
10-19
根据提供的文件内容，以下是有关使用Django和Vue.js搭建前后端分离项目的关键知识点： ### Django后端开发 1. **创建Django项目：** - 使用Django的管理命令 `django-admin startproject ulb_manager` 创建项目。...
【服务器部署】两个Vue3+Django+Celery+Websocket部署
weixin_53950583的博客
11-12 1218
django+celery+websocket的部署
【web系列十】Vue3+Django+MySQL搭建前后端框架
Nicholson的博客
07-05 8139
这篇文章主要介绍前端、后端和服务器间的通信，如果有对这三个部分还不了解的或者不知道怎么搭建工程的可以去看博主的这三篇文章，希望能对你有帮助。
Vue3+Django
qq_35090060的博客
02-07 718
学习资料 菜鸟教程 Vue3官网教程 组件库 Elements
vue3+django+mysql实现一个简单的前后端分离的小案例
irving725的博客
07-26 906
前端主要是使用了vue3的基本框架，首先是创建一个vue3项目，这里我是使用的vite+vue创建的项目，比较方便，在vscode里边几行代码就可以创建起来，这里有我遇到的一个坑是关于vscode，就是下面这种错误，在cmd终端执行指令的时候是可以的，但是在vscode里边就会出现这种错误，然后我使用管理员打开vscode这种错误就取消了，这是我的解决方案，对于其他设备可能会有不同的解决方案。app01是自己在创建项目是注册的app，注意要在创建完app后，在settings.py里边加上对应的配置文件。
django和vue3通信
m0_61657859的博客
01-28 647
django和vue通信小测试。
教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）
boxuestudio的博客
09-25 2865
【代码】教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）
VUE3脚手架 + Django3.2前后端分离运动会赛事管理系统(尚未完工，待更新...)
qq_16674623的博客
07-20 8511
VUE3脚手架 + Django3.2前后端分离运动会赛事管理系统前期准备需求文档数据库表设计功能设计接口文档运动员登录运动员注册学院名查询比赛查询报名表查询投诉申请新闻发布新闻发布环境搭建前端：创建VUE3脚手架项目准备环境：搭建项目：后端：创建Django3项目代码编写前端后端项目部署项目测试 前期准备 需求文档 利用脑图简单绘制一下业务功能 数据库表设计 用PowerDesigner简单先设计一下需要用到的表（因为后端我用的是Django，所以不要把所有的表都设计一遍，只要简单把业务层的表设计
django+vue3+elementplus前后端分离demo
05-18
很高兴为你提供一个Django+Vue3+ElementPlus前后端分离的demo。 ## 后端部分 首先，我们需要创建一个Django项目。在命令行中输入以下命令： ``` django-admin startproject project_name ``` 然后，我们需要创建一个应用程序。在命令行中输入以下命令： ``` python manage.py startapp app_name ``` 接下来，我们需要安装一些必要的库。在命令行中输入以下命令： ``` pip install djangorestframework django-cors-headers ``` 接下来，我们需要在`settings.py`文件中添加以下代码： ```python INSTALLED_APPS = [ ... 'rest_framework', 'corsheaders', 'app_name', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True ``` 现在，我们已经完成了后端部分的设置。我们可以开始编写API。 在`app_name`中创建一个名为`api.py`的文件，并编写以下代码： ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello_world(request): return Response({"message": "Hello, World!"}) ``` 这是一个简单的API，当我们向`/api/hello`发送GET请求时，它将返回一个JSON响应，其中包含“Hello, World!”消息。 最后，在`urls.py`文件中添加以下代码： ```python from django.urls import path from . import api urlpatterns = [ path('api/hello', api.hello_world), ] ``` 现在，我们已经完成了后端部分的设置。我们可以在终端中运行`python manage.py runserver`命令来启动服务器。 ## 前端部分 首先，我们需要安装Vue CLI。在命令行中输入以下命令： ``` npm install -g @vue/cli ``` 然后，我们需要创建一个Vue项目。在命令行中输入以下命令： ``` vue create project_name ``` 接下来，我们需要安装ElementPlus。在命令行中输入以下命令： ``` npm i element-plus -S ``` 接下来，我们需要在`main.js`文件中添加以下代码： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 现在，我们已经完成了前端部分的设置。我们可以开始编写页面。 在`src`中创建一个名为`HelloWorld.vue`的文件，并编写以下代码： ```vue <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: '' } }, created() { fetch('http://localhost:8000/api/hello') .then(response => response.json()) .then(data => this.message = data.message) } } </script> ``` 这是一个简单的页面，它将从我们的API中获取消息并显示在页面上。 最后，在`App.vue`文件中添加以下代码： ```vue <template> <HelloWorld /> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld } } </script> ``` 现在，我们已经完成了前端部分的设置。我们可以在终端中运行`npm run serve`命令来启动前端服务器。 现在，我们可以在浏览器中访问`http://localhost:8080`，应该可以看到一个页面，其中包含“Hello, World!”消息。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值