(简易)测试数据构造平台: 3 (vue打通django)

简介: (简易)测试数据构造平台: 3 (vue打通django)

【本节目标】实现前后端连调成功

   【依赖包】django-cors-headers (pip直接下载)


   第一二节课,我们成功的搞定了django后端,和vue前端。但是他们并不难简单的通过http就实现成功连调。如果想实现前端打包后让django单独服务就能启动整个平台的效果,那就需要合二为一,也就是本节课的目标,不管这段话你看的懂看不懂,都不重要,只要你先照葫芦画瓢往下跟,要不了几节课你就会突然大悟。


   首先,先处理一下django项目:


   urls.py:


   这里我们指定vue项目打包好后的文件地址的入口index.html 。


image.png


   然后打开settings.py:


把我们刚刚pip下载好的插件塞进去:(注意位置第三行,主要解决跨域)

image.png


然后是html寻址路径,这里加上指向vue项目打包后的路径:

image.png


最后是在settings.py结尾处加上vue项目的静态资源路径:

image.png

(之后的截图都会包含上下文,以便同学们找到新增/修改代码的具体位置,而当事代码我会有那个红框或红线标记)


django的部分到此结束,下面开始vue项目的部分:


首先在v_project目录下创建一个名为vue.config.js的文件,用来加入配置。

然后再在这个文件内输入:

module.exports = {
    // 输出目录
    assetsDir: 'static',
};

保存后如图:

image.png

这个操作的目的是给之后打包的前端静态资源指定一个具体文件夹static内。毕竟我们django项目刚刚设置静态资源寻找路径就是从这个static内。


然后我们要手动去public文件夹下创建一个static的文件夹:

image.png

这个操作的目的是,我们之后把自己的第三方资源都放在这里,然后打包的时候,系统会从这个public/static文件夹内取资源 打包到 dist/static内,以供django调用。


然后我们给vue安装一些常见插件:(vue的命令/npm的命令,都要先进入v_project项目根目录!!!)


jquery: (请耐心等待几十秒的下载和安装结束)

image.png


axios:

image.png


执行完后,我们打开package.json看看 是不是出现了这俩个插件,出现即代表安装成功:

image.png


然后基本上就完成了本节课任务。

最后我们要测试一下,进行vue的第一次打包:npm run build


image.png


打包完成后,检查下目录,看看是否有这个dist文件夹:

image.png


然后我们在pycharm右上角 启动django项目

image.png


关注下控制台输出:

image.png


然后输入网址:127.0.0.1:8000/home/ 看看进入的是不是vue的页面:

image.png

相关文章
|
3天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
25天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
29 6
|
27天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
28 1
|
1月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
1月前
|
SQL 监控 数据库
深入探索Django ORM:高效数据操作的秘诀与实践####
在当今的Web开发领域,提升数据访问层的效率是优化应用性能的关键。本文旨在通过剖析Django框架中的ORM(对象关系映射)机制,揭示其如何简化数据库交互,并探讨一系列高级技巧与策略,帮助开发者构建更高效、可维护的数据访问代码。我们不涉及安装步骤或基础概念,而是聚焦于实战经验分享,旨在为中高级开发者提供深度洞见。 ####
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
133 1
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
77 2
|
2月前
|
存储 测试技术 数据库
数据驱动测试和关键词驱动测试的区别
数据驱动测试 数据驱动测试或 DDT 也被称为参数化测试。
36 1
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
64 0
|
2月前
|
机器学习/深度学习 监控 计算机视觉
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
本文介绍了如何使用YOLOv7进行目标检测,包括环境搭建、数据集准备、模型训练、验证、测试以及常见错误的解决方法。YOLOv7以其高效性能和准确率在目标检测领域受到关注,适用于自动驾驶、安防监控等场景。文中提供了源码和论文链接,以及详细的步骤说明,适合深度学习实践者参考。
539 0
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
下一篇
DataWorks