flask--前端样式无法显示问题,解决思路

今天写flask。无论咋整,样式就是不显示
看了资料,得到解决方案
思路:一步步排查
这是我写的登陆前端页面,从这里可见继承common下的这个公共模板
在这里插入图片描述
找到公共模板,可见我们的样式加载在这里
在这里插入图片描述
那么可见,一定是href请求中发生错误导致无法加载成功
检查统一路径管理,我们前端请求地址是用的这个方法,传入了个path,对static路径进行拼接,从而加载static下的css文件
在这里插入图片描述
我们吧前端path拿过来试调用一下
在这里插入图片描述
这时对比我们的MVC结构树来看,有毛病了,static和templates不在工程目录下
在这里插入图片描述
从flask的源码来看,static_folder和template_folder,是默认的,也就是只能去static和tempaltes下去找css,js和html,我这在web下,所以要重构一下
在这里插入图片描述
将templates的默认查找目录改为web下的templates,并且将static的默认查找目录改写为None
在这里插入图片描述

这里我们知道前端是这样写的
在这里插入图片描述

这样请求的一个get
在这里插入图片描述
这样我们可以写一个蓝图,让每次请求css的时候,也就是url_prefix=‘/static’的时候,就做一个拼接返给端
在这里插入图片描述
在这里插入图片描述

下边是请求是path,css,js传过去,处理,返回的文件
path是前端进来的参数
在这里插入图片描述
filename是处理完返回的文件
在这里插入图片描述
日志加载进去,端上自然成功渲染
在这里插入图片描述

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flask中实现前端实时显示后端处理进度可以通过使用WebSocket技术来实现。WebSocket是一种基于TCP的协议,可以实现双向通信,使得前后端能够在同一个连接上进行实时的数据交换。 首先,我们需要在Flask中使用WebSocket,可以使用Flask-SocketIO来方便地实现WebSocket功能。安装Flask-SocketIO后,我们可以在Flask应用中使用socketio对象来实现WebSocket的功能。 在后端代码中,我们可以通过在任务处理函数中发送进度信息给前端。例如,我们可以在任务处理函数的循环中,使用socketio的emit函数发送当前任务的进度信息。前端页面将通过监听WebSocket消息的方式接收进度信息。 在前端代码中,我们需要在页面中引入SocketIO的JavaScript库,并创建一个SocketIO对象。然后,我们可以使用socket.on()函数来监听后端发送的进度信息,并根据接收到的进度信息来更新前端页面上的进度显示。 需要注意的是,为了防止过多的WebSocket连接导致性能问题,我们可以考虑使用Flask-SocketIO提供的命名空间和房间功能。通过使用命名空间和房间,我们可以将客户端分组,只向特定的客户端发送进度信息。 总结起来,实现Flask前端实时显示后端处理进度的关键步骤是:在Flask应用中使用Flask-SocketIO实现WebSocket功能,后端任务处理函数中使用socketio对象发送进度信息,前端页面中使用SocketIO对象监听进度信息并更新页面显示。这样就能够实现前端实时显示后端处理进度的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值