我的项目是个旅游APP,有前端APP页面和管理员后台页面,我在管理员后台添加了几个景点信息后,前端uniapp运行就加载不出页面来了,是空白的一篇,原因是端口号自动变成了8081,但我在没有添加过信息的时候是可以正常加载出来的,想问问有没有人知道是什么情况。
项目前端框架:uniapp
后台框架:springboot
<!-- #ifdef MP-ALIPAY -->
<rich-text :nodes="changeText(details.text)"></rich-text>
<!-- #endif -->
/**支付宝处理富文本文件*/
changeText(html){
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性:max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
if(html!=''&&html!=undefined&&html!=null){
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
//将 HTML String转化为 nodes 数组
const content = new HTMLParser(newContent.replace()?.trim());
return content;
}else{
return html;
}
}
用到的类库 html-parser.js
这个问题可能跟端口号没直接关系,而是跟添加了景点信息后出现了其他问题。建议先排查一下添加景点信息后具体出了什么问题,看看是否与端口号有关。以下是可能的排查方向:
检查添加景点信息的接口是否有问题,可能会导致数据导入错误或导入后前端页面无法正常渲染。可以使用 postman 或类似工具模拟请求,检查接口返回的数据是否正确。
如果添加景点信息后前端页面空白,可以在浏览器控制台检查是否有报错信息,查看具体错误信息,从而判断问题的具体原因。
检查前端页面的代码,看看是否有可能因为数据格式不正确或者数据量过大等原因导致前端页面无法正确渲染。
如果添加景点信息后端口号变成了8081,可能跟启动后台服务器的端口号配置有关。可以检查 springboot 的启动配置文件(一般是 application.yml 或 application.properties 文件),看看端口号是否被设置为8081。
针对具体问题可能需要不同的解决方案,需要具体分析。