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

相关文章
|
2天前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
47 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
23天前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
25 4
|
23天前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
23 4
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
70 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
30天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
111 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
29 3
|
30天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
35 0
|
Python
django创建项目案例1获取并传递数据续04
继续django创建项目案例1续02的后续 继续项目:修改index.
1135 0
|
2天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
66 44