spring boot+vue 的前后端分離與合并方案實(shí)例詳解
springboot和vue結(jié)合的方案網(wǎng)絡(luò)上的主要有以下兩種:
1. 【不推薦】在html中直接使用script標(biāo)簽引入vue和一些常用的組件,這種方式和以前傳統(tǒng)的開發(fā)是一樣的,只是可以很爽的使用vue的雙向數(shù)據(jù)綁定,這種方式只適合于普通的全棧開發(fā)。
2.【推薦】使用vue官方的腳手架創(chuàng)建單獨(dú)的前端工程項(xiàng)目,做到和后端完全獨(dú)立開發(fā)和部署,后端單獨(dú)部署一個(gè)純r(jià)estful的服務(wù),而前端直接采用nginx來部署,這種稱為完全的前后端分離架構(gòu)開發(fā)模式,但是在分離中有很多api權(quán)限的問題需要解決,包括部署后的vue router路由需要在nginx中配置rewrite規(guī)則。這種前后端完全分離的架構(gòu)也是目前互聯(lián)網(wǎng)公司所采用的,后端服務(wù)器不再需要處理靜態(tài)資源,也能減少后端服務(wù)器一些壓力。
一、為什么做前后端分離開發(fā)合并
在傳統(tǒng)行業(yè)中很多是以項(xiàng)目思想來主導(dǎo)的,而不是產(chǎn)品,一個(gè)項(xiàng)目會(huì)賣給很多的客戶,并且部署到客戶本地的機(jī)房里。在一些傳統(tǒng)行業(yè)里面,部署實(shí)施人員的技術(shù)無法和互聯(lián)網(wǎng)公司的運(yùn)維團(tuán)隊(duì)相比,由于各種不定的環(huán)境也無法做到自動(dòng)構(gòu)建,容器化部署等。因此在這種情況下盡量減少部署時(shí)的服務(wù)軟件需求,打出的包數(shù)量也盡量少。針對(duì)這種情況這里采用的在開發(fā)中做到前后端獨(dú)立開發(fā),整個(gè)開發(fā)方式和上面提到的第二種方式是相同的,但是在后端springboot打包發(fā)布時(shí)將前端的構(gòu)建輸出一起打入,最后只需部署springboot的項(xiàng)目即可,無需再安裝nginx服務(wù)器。
二、springboot和vue整合的關(guān)鍵操作
實(shí)際上本文中這種前后端分離的開發(fā),前端開發(fā)好后將build構(gòu)建好的dist下static中的文件拷貝到springboot的resource的static下,index.html則直接拷貝到springboot的resource的static下。下面是示例圖:
vue前端項(xiàng)目
springboot項(xiàng)目:
上面這是最簡(jiǎn)單的合并方式,但是如果作為工程級(jí)的項(xiàng)目開發(fā),并不推薦使用手工合并,也不推薦將前端代碼構(gòu)建后提交到springboot的resouce下,好的方式應(yīng)該是保持前后端完全獨(dú)立開發(fā)代碼,項(xiàng)目代碼互不影響,借助jenkins這樣的構(gòu)建工具在構(gòu)建springboot時(shí)觸發(fā)前端構(gòu)建并編寫自動(dòng)化腳本將前端webpack構(gòu)建好的資源拷貝到springboot下再進(jìn)行jar的打包,最后就得到了一個(gè)完全包含前后端的springboot項(xiàng)目了。
三、整合的核心問題處理
通過上面的整合后會(huì)出現(xiàn)兩個(gè)比較大的問題:
1. 無法正常訪問靜態(tài)資源 。
2. vue router路由的路徑無法正常解析 。
解決第一個(gè)問題,我們必須重新指定springboot的靜態(tài)資源處理前綴,代碼:
@Configuration public class SpringWebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); super.addResourceHandlers(registry); } }
解決第二個(gè)問題的方式是對(duì)vue的路由的路徑做rewrite,交給router來處理,而不是springboot自己處理,rewrite時(shí)可以考慮路由的路徑統(tǒng)一增加后最,然后在springboot中編寫過濾攔截特定后綴來做請(qǐng)求轉(zhuǎn)發(fā)交給vue的路由處理。如:
const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ { path: '/ui/first.vhtml', component: First }, { path: '/ui/second.vhtml', component: secondcomponent } ] })
后端攔截到帶有vhtml的都交給router來處理,這種方式在后端寫過濾器攔截后打包是完全可行的,但是前端開發(fā)的直接訪問帶后綴的路徑會(huì)有問題。
另外一種方式是給前端的路由path統(tǒng)一加個(gè)前綴比如/ui,這時(shí)后端寫過濾器匹配該前綴,也不會(huì)影響前端單獨(dú)開發(fā)是的路由解析問題。過濾器參考如下:
/** * be used to rewrite vue router * * @author yu on 2017-11-22 19:47:23. */ public class RewriteFilter implements Filter { /** * 需要rewrite到的目的地址 */ public static final String REWRITE_TO = "rewriteUrl"; /** * 攔截的url,url通配符之前用英文分號(hào)隔開 */ public static final String REWRITE_PATTERNS = "urlPatterns"; private Set<String> urlPatterns = null;//配置url通配符 private String rewriteTo = null; @Override public void init(FilterConfig cfg) throws ServletException { //初始化攔截配置 rewriteTo = cfg.getInitParameter(REWRITE_TO); String exceptUrlString = cfg.getInitParameter(REWRITE_PATTERNS); if (StringUtil.isNotEmpty(exceptUrlString)) { urlPatterns = Collections.unmodifiableSet( new HashSet<>(Arrays.asList(exceptUrlString.split(";", 0)))); } else { urlPatterns = Collections.emptySet(); } } @Override public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) req; String servletPath = request.getServletPath(); String context = request.getContextPath(); //匹配的路徑重寫 if (isMatches(urlPatterns, servletPath)) { req.getRequestDispatcher(context+"/"+rewriteTo).forward(req, resp); }else{ chain.doFilter(req, resp); } } @Override public void destroy() { } /** * 匹配返回true,不匹配返回false * @param patterns 正則表達(dá)式或通配符 * @param url 請(qǐng)求的url * @return */ private boolean isMatches(Set<String> patterns, String url) { if(null == patterns){ return false; } for (String str : patterns) { if (str.endsWith("/*")) { String name = str.substring(0, str.length() - 2); if (url.contains(name)) { return true; } } else { Pattern pattern = Pattern.compile(str); if (pattern.matcher(url).matches()) { return true; } } } return false; } }
過濾器的注冊(cè):
@SpringBootApplication public class SpringBootMainApplication { public static void main(String[] args) { SpringApplication.run(SpringBootMainApplication.class, args); } @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { return (container -> { ErrorPage error401Page = new ErrorPage(HttpStatus.UNAUTHORIZED, "/errors/401.html"); ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/errors/404.html"); ErrorPage error500Page = new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/errors/500.html"); container.addErrorPages(error401Page, error404Page, error500Page); }); } @Bean public FilterRegistrationBean testFilterRegistration() { FilterRegistrationBean registration = new FilterRegistrationBean(); registration.setFilter(new RewriteFilter());//注冊(cè)rewrite過濾器 registration.addUrlPatterns("/*"); registration.addInitParameter(RewriteFilter.REWRITE_TO,"/index.html"); registration.addInitParameter(RewriteFilter.REWRITE_PATTERNS, "/ui/*"); registration.setName("rewriteFilter"); registration.setOrder(1); return registration; } }
這時(shí)springboot就可以將前端的路由資源交給路由來處理了。至此整個(gè)完整前后端分離開發(fā)合并方案就完成了。這種方式在后期有條件情況下也可以很容易做到前后端的完全分離開發(fā)部署。
總結(jié)
以上所述是小編給大家介紹的spring boot+vue 的前后端分離與合并方案,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Java中調(diào)用SQL Server存儲(chǔ)過程詳解
這篇文章主要介紹了Java中調(diào)用SQL Server存儲(chǔ)過程詳解,本文講解了使用不帶參數(shù)的存儲(chǔ)過程、使用帶有輸入?yún)?shù)的存儲(chǔ)過程、使用帶有輸出參數(shù)的存儲(chǔ)過程、使用帶有返回狀態(tài)的存儲(chǔ)過程、使用帶有更新計(jì)數(shù)的存儲(chǔ)過程等操作實(shí)例,需要的朋友可以參考下2015-01-01通過實(shí)例了解java checked和unchecked異常
這篇文章主要介紹了通過實(shí)例了解checked和unchecked異常,Java異常分為兩種類型,checked異常和unchecked異常,另一種叫法是異常和錯(cuò)誤。下面小編就帶大家來一起學(xué)習(xí)一下吧2019-06-06Spring動(dòng)態(tài)監(jiān)聽Nacos配置中心key值變更的實(shí)現(xiàn)方法
Nacos本身提供支持監(jiān)聽配置變更的操作,但在使用起來,個(gè)人感覺不是很友好,無法精確到某個(gè)key的變更監(jiān)聽,所以本文小編給大家介紹了Spring動(dòng)態(tài)監(jiān)聽Nacos配置中心key值變更的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08SpringBoot整合Servlet和Filter和Listener組件詳解
這篇文章主要介紹了SpringBoot整合Servlet和Filter和Listener組件詳解,在整合某報(bào)表插件時(shí)就需要使用Servlet,Spring Boot中對(duì)于整合這些基本的Web組件也提供了很好的支持,需要的朋友可以參考下2024-01-01Java基礎(chǔ)之多線程的三種實(shí)現(xiàn)方式
這篇文章主要介紹了Java基礎(chǔ)之多線程的三種實(shí)現(xiàn)方式,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java基礎(chǔ)的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-04-04Java實(shí)戰(zhàn)寵物醫(yī)院預(yù)約掛號(hào)系統(tǒng)的實(shí)現(xiàn)流程
只學(xué)書上的理論是遠(yuǎn)遠(yuǎn)不夠的,只有在實(shí)戰(zhàn)中才能獲得能力的提升,本篇文章手把手帶你用java+JSP+Spring+SpringBoot+MyBatis+html+layui+maven+Mysql實(shí)現(xiàn)一個(gè)寵物醫(yī)院預(yù)約掛號(hào)系統(tǒng),大家可以在過程中查缺補(bǔ)漏,提升水平2022-01-01