项目场景:
因为此功能只做为客户方一个小模块,客户方使用的是springboot前后端不分离的架构。而我们的项目是使用前后端分离springboot+vue的架构。在接项目前,项目已经存在,所以不存在设计架构的前提。实际是在原有基础上修改的。所以不可能再重新开发。
问题描述
主要问题是,将vue打包好的前端放到springboot里静态文件以后,页面可以正常访问。但后来添加了参数以下,就无法接收到参数了。例如这样:
http://127.0.0.1:8288/xmmc/vuedist/index.html/#/home?a=1111&b=2222
原因分析:
参数是无法接收到的。模板引擎直接将#号截断了。所以直接从前端跳转,如果没有参数,是可以的。但这个功能需要嵌入到其它模块内。
function eventdxt() {
var url = "/xmmc/index.html?a=1111&b=2222";
$.modal.open("功能", url, '1100', '700');
}
解决方案:
一、将vue打包好的dist文件,放入到static下面,路径如:static/dist/.....,如下图所示:
二、将其中的 index.html 重命名如 home.html,避免和原有index.html重复,放到 src\main\resources\templates下面
三、很重要的一步,从后台跳转到前面。也就是遵从模板引擎的规划流程来走:
请求【/static下面的静态文件名/home】这个路径后,返回到 templates 下的home,也就是vue里的index.html页面,index.html页面,再去static下面找【/static下面的静态文件名/】下的静态文件。从而实现连通。前端的最终访问路径是:【/static下面的静态文件名/home?a=111&b=222】
@Controller
@CrossOrigin
public class IndexController {
@GetMapping("/static下面的静态文件名/home")
public String index(){
return "home";
}
}
最后说下:
@GetMapping("/static下面的静态文件名/home") 这个请求的配置,起着很重要的作用,配置错误,前台将会找不到静态文件。导致整体合并失败。
后台代码的合并,见另一篇文章所述:
ruoyi若依二次开发怎么添加扫描自己的controller和mapper,配置三个地方即可。-CSDN博客