部署DeepSeek模型,进群交流最in玩法!
立即加群
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【deepseek用例生成平台-03】前后端分离的@vue/cli和django如何连接?

【deepseek用例生成平台-03】前后端分离的@vue/cli和django如何连接?

作者头像
我去热饭
发布于 2025-02-27 03:14:05
发布于 2025-02-27 03:14:05
12500
代码可运行
举报
文章被收录于专栏:测试开发干货测试开发干货
运行总次数:0
代码可运行

之前我们已经成功启动了django后端和vue前端,本节课就要来联通这俩个部分了:

还记得我们之前pip install 了一个库:django-cors-headers 了么?

这个就是用来处理前后端连接的一个中间件

随后我们还把它写进了settings.py中:

好到此,我们要开始今天的工作了:

首先,在这个下面加上下面三句,千万别抄错:

位置在这里:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = ('*') #允许所有的请求头
CORS_ALLOW_CREDENTIALS = True # 允许cookie

然后我们还要在settings.py的TEMPLATES={} 里修改一个参数:DIRS

改成如下:(静态模版的寻址位置指向了vue项目的打包目录)

然后在settings.py文件底部,增加上这俩句:(静态资源的位置指向了vue的打包目录的静态资源目录static)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import os
STATICFILES_DIRS = [os.path.join(BASE_DIR,'v_project/dist/static')]

然后打开urls.py文件,修改如下:(空path的时候自动进入index.html,而这个index.html就会根据前面设置的静态模版路径,去vue的dist打包目录中招,vue打完包的入口文件就叫index.html)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from django.views.generic import TemplateView
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
path('',TemplateView.as_view(template_name='index.html')),

然后就是vue项目的改动:

打开vue.config.js,添加如下内容(意思是把各种静态资源都弄到dist打包目录下一个static的文件,前面我们正好设置后台要去这个static文件夹去找静态资源,这不就连上了么)

到此,算是全部设置完了,接下来就进行联调测试:

先点击pycharm右上角启动器,来启动django后台服务:

然后在Terminal面板中,先进入v_project目录下,然后执行打包命令(只有打了包,才能让django去调用,才能让用户通过django后台路由进入页面),打包命令为:npm run build

打完包后显示如下:

看上图,打完包成功后,这个dist文件夹才会出现哦!里面的index.html也出现了。

然后要用django后台的路由和端口(127.0.0.1:8000),打开浏览器,能看到的不是django,而是Vue的欢迎页,这就算成功了!

这里需要注意的点:

1. 打开浏览器的俩个地址,只有端口号不同。

127.0.0.1:8000 这个是我们正式的地址,通过后端进入的地址,也必须前端打包后才能让前端改动生效的地址。但这不是我们常用的开发环境,也不需要前端vue服务启动。

http://localhost:8080/#/ 这个是我们前端调试用的地址。等价于(127.0.0.1:8080),前端的改动不用打包即可生效,也是我们常用来开发调试的环境。但需要前端启动服务:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm run serve

至于0.0.0.0:8000 这个就放弃别用了 ,虽然会在django启动后的控制台自动展示,但这不是作为应该访问的地址,是因为我们改动了启动器后产生的,大家尽量不要点这个进去,否则之后请求前端的请求大概率会出现各种问题。

所以综上所述,我们就用127.0.0.1:8080这个地址进行学习和开发了。所以最后让我们启动前端:

输入 npm run serve ,回车,启动成功如下:

然后点击 http://localhost:8080/#/ 这个蓝色地址,打开浏览器。

显示如下,这就是我们今后常用的学习开发的地址了哈

之后就用这个开始搞了啊!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-02-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发干货 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
教你玩转Vue和Django的前后端分离
今天中秋节,先祝大家节日愉快,不在父母身边的都打个电话关心一下吧,我们最容易忽略的人恰恰是最爱我们的父母。
somenzz
2020/11/25
3.1K0
教你玩转Vue和Django的前后端分离
用 Vue 和 Django 快速搭建前后端分离项目
Web 开发中前后端分离已经是常规性做法,但是不少初学者不太熟悉如何前后端分离,搭建 Demo 的时候遇到的问题也比较多,今天就来分享一下如何用 Vue 和 Django 快速搭建前后端分离项目。
somenzz
2022/10/25
5.1K0
用 Vue 和 Django 快速搭建前后端分离项目
如何创建Vue项目并与后端django联调
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
梦无矶小仔
2022/06/30
1.3K0
如何创建Vue项目并与后端django联调
(简易)测试数据构造平台: 3 (vue打通django)
第一二节课,我们成功的搞定了django后端,和vue前端。但是他们并不难简单的通过http就实现成功连调。如果想实现前端打包后让django单独服务就能启动整个平台的效果,那就需要合二为一,也就是本节课的目标,不管这段话你看的懂看不懂,都不重要,只要你先照葫芦画瓢往下跟,要不了几节课你就会突然大悟。
我去热饭
2022/05/20
4331
(简易)测试数据构造平台: 3  (vue打通django)
整合 Django + Vue.js 框架快速搭建web项目
.╂遊牧
2017/08/08
33.3K9
整合 Django + Vue.js 框架快速搭建web项目
Django + Vue 快速实现前后端分离的用户认证
Web 后端在主流场景下,注定成为了仅仅提供 API 接口和进行一些需要消耗服务器性能和后端计算载体;
州的先生
2021/07/20
5.5K0
Django + Vue 快速实现前后端分离的用户认证
Django+Vue部署 原
M(Django) + C(Django) + MVVM (Vue.js) = M + MVVM + C = MMVVMC
晓歌
2018/08/15
1K0
Django+Vue部署
                                                                            原
测试同学动手搭个简易web开发项目
node.js, vue.js, axios, python, django, orm, restful api, djangorestframework, mysql, nginx, jenkins.
dongfanger
2020/09/23
7500
测试同学动手搭个简易web开发项目
前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中
     由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢?
人生不如戏
2018/12/14
3.4K0
【测开中台教程-03】打通django和vue的链接。
以后本号的这个教程会在每天的早上九点左右发出,大家在工作中有闲暇的就打开这个项目跟一跟,几分钟就看完了。每天学一点点,几个月后就大不相同了!
我去热饭
2024/09/17
1000
【测开中台教程-03】打通django和vue的链接。
海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js
    随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依赖和被依赖关系,这就会带来一个世界性难题,项目部署的时候需要运维来手动配制服务之间通信的协议和地址,稍有不慎就会导致服务异常,同时如果服务器因为坏道或者其他原因导致更换物理机,重新部署新环境的成本也会非常之高。因此,我们就会寄希望于Docker这种的容器技术可以让我们构建产品所需要的所有的服务能够迅速快捷的重新部署,并且可以根据需求做横向扩展,且能够保证稳定的容灾性,在出现问题的时候可以利用守护进程自动重启或者启动容灾备份。
用户9127725
2022/08/08
7440
海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js
从零开始 - Docker部署前后端分离项目(三)
整个项目文件,里面有两个文件夹,nginx_docker用于存放前后端静态文件,XZAndroidPlatform是整个django项目文件。
梦无矶小仔
2022/08/22
2.1K0
从零开始 - Docker部署前后端分离项目(三)
【deepseek用例生成平台-01】学前准备和django项目创建初始化
写在开头:本教程完全免费(点赞转发),并且学习门槛为初级学者,旨在传播python-django-vue-elementUI技术栈,帮助小白快速学习测试平台的开发过程,并引入本地deepseek,包括其使用/训练/调参的页面交互功能和具体举例项目的实践操作,也为了让粉丝在今后的职业生涯中简历亮点添加上AI的一笔。(若是之后出现了更简单、效果更好、性价比更高的可免费本地部署的蒸馏模型,应具备可随时替换底层deepseek引擎的能力)。 因之前在收费培训中已讲过用gpt/文心/自建模型为底层的用例生成平台,所以算是有了一些经验,本次公众号deepseek版本大概2月内更新完毕。
我去热饭
2025/02/27
1660
【deepseek用例生成平台-01】学前准备和django项目创建初始化
Django 系列博客(二)
今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳。
py3study
2020/01/19
7200
(简易)测试数据构造平台: 5 (首页部分)
我们现在要做一个首页的前端部分,这个页面的内容主要是我们的工具列表,可以方便进入的用户直接选中工具来进入工具详情页。
我去热饭
2022/05/20
8160
(简易)测试数据构造平台: 5 (首页部分)
Python53前后端分离项目上线
创建Django项目 购买服务器 连接服务器 服务器命令 管理员权限 配置终端 重要 更新系统软件包 安装软件管理包和可能使用的依赖 安装Mysql 安装Redis 安装Python3.6 配置pip源:阿里云不用配置,默认配置阿里源 安装uwsgi 安装虚拟环境 了解:服务器运行测试Django项目 安装Nginx Nginx命令 了解:Nginx & uwsgi 运行Django 路飞项目部署:Nginx
DriverZeng
2022/10/31
4100
WEB平台DJANGO&VUE配置部署生产环境
nginx可以新建一个配置,放在项目目录,暂时不修改nginx的默认配置,端口号可以换一个,然后在/etc/nginx/conf.d/内新建一个软链接指向该配置文件,这样nginx在读取配置时会将该配置一起读进去。这样,访问端口号8080的请求便会指向我们自己的这个配置。
fanspring
2018/12/06
2.3K0
WEB平台DJANGO&VUE配置部署生产环境
从零搭建一个django项目-4-搭建vue环境
1、首先安装node.js,官网地址:https://nodejs.org/zh-cn/download/
怪盗LYL
2022/06/13
6840
从零搭建一个django项目-4-搭建vue环境
flask搭建一个前后端分离的系统
我们通常说三端,pc端,android端和ios端。如果前后端不分离,相当是要做三套系统。如果前后端分离的话,可以共用一个后端,前端各自做自己的,不用管后端。
赵云龙龙
2020/03/26
2.8K0
flask搭建一个前后端分离的系统
Vue+Koa2 前后端分离项目线上部署
昨天尝试部署一个 Vue+Koa2 的前后端分离项目,没想到因为前端项目部署的问题,卡了一整天,今天才终于找到了问题所在,成功解决。这篇文章主要谈谈:
Chor
2020/08/02
2.6K0
Vue+Koa2 前后端分离项目线上部署
相关推荐
教你玩转Vue和Django的前后端分离
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验