需求是这样的:
原本有一套后台的前后端混编的系统,先准备将前后端分离,前端用vue,但以后工作排期的问题,将这个事情开发了几个功能之后去弄别的了,但现在又有新的后台页面需要开发,因为不想先写在老的系统里面,到时候新系统开发的时候又写一遍,所以打算直接写在新系统里面,然后在老系统中把相关的页面嵌套进来。嵌套的仅仅是正文部分。
过程:
1,先将新系统的前后台开发好,然后将build后的dist目录放到老系统的public目录下
2,新建一个view文件存放dist目录下的index.html的内容,比如view的文件目录是resources/views/admin//dist/index.blade.php,注意这里可能需要修改这个文件中对应的css.js的引用目录
2,新的功能还是需要在老的系统中加上相应的路由,以及对应的控制器和view的,只是view中只有一个框架,正文部分用iframe引进来,类似下面这样。这里的/abc是vue项目的路由。
<iframe src="/abc" style="width: 100%;height: 1000px; " frameborder="0" scrolling="no"></iframe>
3,app/Exceptions/Handler.php文件的render方法中对NotFoundException做处理,跳转到第二步建的view文件,类似
if ($exception instanceof NotFoundHttpException) {
return response()->view('admin.dist.index');
}
这样当访问/abc时,会先跳到admin.dist.index这个view中,然后对应的就会加载vue的路由了
需要注意的是,因为是嵌的iframe,所以在vue的view里面如果需要跳转到后台原有的路由,则需要跳出当前iframe,类似
let url = "/admin/order/getActivityOrderDetailNew?orderSn=" + sn;
if (window.top !== window.self) {
window.top.location.href = url;
} else {
location.href = url;
}
这里有个问题,就是两套系统的认证是不一样的,这里统一都用jwt来实现认证。就是用jwt生成一个token之后在两套系统中都可以使用。这里需要保证配置的JWT_SECRET和auth配置文件中的model的命名空间必须在两套系统中一致
另外vue中的token是存在cookie中的,所以需要在老的项目中登录时存一个和vue中相同的cookie信息