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

相关文章
|
1天前
|
传感器 数据采集 算法
LabVIEW无人机大气数据智能测试系统
LabVIEW无人机大气数据智能测试系统
12 3
|
1天前
|
监控 数据挖掘 定位技术
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
13 2
|
1天前
|
数据挖掘 测试技术 网络安全
LabVIEW开发卫星测试平台
LabVIEW开发卫星测试平台
|
1天前
|
算法 物联网 5G
LabVIEW开发最小化5G系统测试平台
LabVIEW开发最小化5G系统测试平台
12 0
|
1天前
|
消息中间件 测试技术 Linux
linux实时操作系统xenomai x86平台基准测试(benchmark)
本文是关于Xenomai实时操作系统的基准测试,旨在评估其在低端x86平台上的性能。测试模仿了VxWorks的方法,关注CPU结构、指令集等因素对系统服务耗时的影响。测试项目包括信号量、互斥量、消息队列、任务切换等,通过比较操作前后的时戳来测量耗时,并排除中断和上下文切换的干扰。测试结果显示了各项操作的最小、平均和最大耗时,为程序优化提供参考。注意,所有数据基于特定硬件环境,测试用例使用Alchemy API编写。
23 0
linux实时操作系统xenomai x86平台基准测试(benchmark)
|
1天前
|
传感器 Linux 测试技术
xenomai 在X86平台下中断响应时间测试
该文讨论了实时操作系统中断响应时间的重要性,并介绍了x86中断机制和Xenomai的中断管理,包括硬件中断和虚拟中断的处理。Xenomai通过I-Pipe确保实时性,中断优先级高的Xenomai先处理中断。文中还提到了中断响应时间的测试设计,分别针对I-Pipe内核间虚拟中断和硬件中断进行了测试,并给出了在不同负载下的测试结果。
11 0
xenomai 在X86平台下中断响应时间测试
|
1天前
|
JSON 测试技术 数据格式
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
15 0
|
1天前
|
Linux 测试技术 数据安全/隐私保护
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
|
1天前
|
人工智能 测试技术
测试数据不再难,人工智能批量生成给你用!
本文介绍了如何利用ChatGPT生成测试数据。测试数据是验证功能和触发异常场景的关键,设计时需全面考虑等价类、边界值和正交法。实践中,先明确数据类型、格式和需求,然后向ChatGPT提供相关信息。例如,对于只能输入中国手机号的输入框,初始提示可能只包含正常手机号,但应进一步补充异常场景,如非数字、长度错误、非中国号码、特殊字符、空输入等。此外,可通过指定yaml格式来满足代码使用需求。总结来说,生成测试数据需清晰定义需求,拆分任务,并系统测试各种变化。
25 2
|
JavaScript 网络架构 Python