angular8与springboot的整合及分离
Spring boot+angular 8前后端分离及前后端合并
angular 8
nginx部署前端项目⾸先确保你已悉知如何使⽤angular 8并且已配置好proxy代理⽂件，angular框架在本地开发时，请求后台会涉及到跨域问题，angular 官⽅解决办法为加载时使⽤proxy代理⽂件来配置跨域请求，使请求能够避免浏览器同源策略带来的拦截。但proxy代理⽂件的有效范围是在angular框架⾃服务内的，也就是npm run start。我们在开发完成后，需要对angular 项⽬进⾏打包，命令为 ng build --prod 此时angular会将你所写的angular风格代码进⾏转换（本地开发时angular服务启动后默认帮你转换你的代码）最后打包成⼀个可以部署在第三⽅服务器内的静态资源⽂件，这时代理已经失效，如’/api’已经⽆法被angular正确代理到‘127.0.0.1:8080’了，此时我们需要将打包出的静态⽂件放⼊NGINX中
nginx
nginx是⼀个功能很强⼤的web容器，它启动后成为⼀个服务，能够⽤以承载angular打包出的静态资源⽂件，这样在访问nginx地址后浏览器将会展⽰你的前端页⾯，但此时所有发送给后端的请求路径都是⽆效的，所以我们可以在nginx中配置请求规则，⽤以代理到正确的spring boot controller层中。具体代理配
置⽅法⽹上有很多可以⾃⾏搜索，不过请注意代理地址后是否应该加’/’，这对nginx的请求代理影响很⼤，区别为直接替换，或者是拼接。
前后端合并
其实讲到这⾥，前后端分离思路已经说完了，就是nginx做前端容器，将build出来的静态⽂件引⼊，再使⽤nginx内置的代理来实现angular 内置代理相同的作⽤。
现在来说⼀下前后端合并，springboot中引⼊静态资源⽂件的位置是/resources下的static⽂件夹，这个静态资源⽂件夹可以放⼊angular 打包出的静态资源⽂件，但此时路由权限在刷新页⾯时由springboot接管了，所以会造成⼀个现象：点击按钮或链接可以正确跳转到angular 中配置好的路由，但是刷新页⾯时页⾯显⽰springboot的404提⽰，原因就是在springboot接管url是在controller中并未到你的angular路由，解决办法为在angular路由中启⽤hash路由 百度关键词 ：angular 6 hash路由
这样在浏览器访问时地址会由127.0.0.1:8080/abc>>>>>127.0.0.1:8080/#/abc 避免spring boot接管angular 的路由导致出错。
总结
以上是我个⼈在开发angular 6.0x以上项⽬时碰到的问题和解决⽅式，以及开发思路（⾮商业性⽹站）
仅供参考！只希望能够防⽌⾃⼰忘记以及帮助更多的⼈

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。