(简易)测试数据构造平台: 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

相关文章
|
10月前
|
关系型数据库 MySQL 测试技术
【分享】AgileTC测试用例管理平台使用分享
AgileTC 是一个脑图样式测试用例管理平台,支持用例设计、执行与团队协作,帮助测试人员高效管理测试流程。
500 116
【分享】AgileTC测试用例管理平台使用分享
|
10月前
|
人工智能 数据可视化 测试技术
AI测试平台自动遍历:低代码也能玩转全链路测试
AI测试平台的自动遍历功能,通过低代码配置实现Web和App的自动化测试。用户只需提供入口链接或安装包及简单配置,即可自动完成页面结构识别、操作验证,并生成可视化报告,大幅提升测试效率,特别适用于高频迭代项目。
|
9月前
|
安全 数据管理 测试技术
告别蛮力:让测试数据生成变得智能而高效
告别蛮力:让测试数据生成变得智能而高效
691 120
|
10月前
|
人工智能 测试技术 调度
写用例写到怀疑人生?AI 智能测试平台帮你一键生成!
霍格沃兹测试开发学社推出AI智能测试用例生成功能,结合需求文档一键生成高质量测试用例,大幅提升效率,减少重复劳动。支持自定义提示词、多文档分析与批量管理,助力测试人员高效完成测试设计,释放更多时间投入核心分析工作。平台已开放内测,欢迎体验!
|
10月前
|
人工智能 测试技术 项目管理
测试不再碎片化:AI智能体平台「项目资料套件」功能上线!
在实际项目中,需求文档分散、整理费时、测试遗漏等问题常困扰测试工作。霍格沃兹推出AI智能体测试平台全新功能——项目资料套件,可将多个关联文档打包管理,并一键生成测试用例,提升测试完整性与效率。支持套件创建、文档关联、编辑删除及用例生成,适用于复杂项目、版本迭代等场景,助力实现智能化测试协作,让测试更高效、更专业。
|
11月前
|
存储 人工智能 算法
AI测试平台实战:深入解析自动化评分和多模型对比评测
在AI技术迅猛发展的今天,测试工程师面临着如何高效评估大模型性能的全新挑战。本文将深入探讨AI测试平台中自动化评分与多模型对比评测的关键技术与实践方法,为测试工程师提供可落地的解决方案。
|
10月前
|
存储 测试技术 API
数据驱动开发软件测试脚本
今天刚提交了我的新作《带着ChatGPT玩转软件开发》给出版社,在写作期间跟着ChatGPT学到许多新知识。下面分享数据驱动开发软件测试脚本。
409 0
|
10月前
|
人工智能 自然语言处理 测试技术
AI测试平台的用例管理实践:写得清晰,管得高效,执行更智能
在测试过程中,用例分散、步骤模糊、回归测试效率低等问题常困扰团队。霍格沃兹测试开发学社推出的AI测试平台,打通“用例编写—集中管理—智能执行”全流程,提升测试效率与覆盖率。平台支持标准化用例编写、统一管理操作及智能执行,助力测试团队高效协作,释放更多精力优化测试策略。目前平台已开放内测,欢迎试用体验!
|
11月前
|
存储 人工智能 文字识别
从零开始打造AI测试平台:文档解析与知识库构建详解
AI时代构建高效测试平台面临新挑战。本文聚焦AI问答系统知识库建设,重点解析文档解析关键环节,为测试工程师提供实用技术指导和测试方法论
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
793 2