springboot和vue結(jié)合的方案網(wǎng)絡(luò)上的主要有以下兩種：
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，成都網(wǎng)站制作、做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
1. 【不推薦】在html中直接使用script標(biāo)簽引入vue和一些常用的組件，這種方式和以前傳統(tǒng)的開發(fā)是一樣的，只是可以很爽的使用vue的雙向數(shù)據(jù)綁定，這種方式只適合于普通的全棧開發(fā)。
2.【推薦】使用vue官方的腳手架創(chuàng)建單獨的前端工程項目，做到和后端完全獨立開發(fā)和部署，后端單獨部署一個純restful的服務(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è)中很多是以項目思想來主導(dǎo)的，而不是產(chǎn)品，一個項目會賣給很多的客戶，并且部署到客戶本地的機房里。在一些傳統(tǒng)行業(yè)里面，部署實施人員的技術(shù)無法和互聯(lián)網(wǎng)公司的運維團(tuán)隊相比，由于各種不定的環(huán)境也無法做到自動構(gòu)建，容器化部署等。因此在這種情況下盡量減少部署時的服務(wù)軟件需求，打出的包數(shù)量也盡量少。針對這種情況這里采用的在開發(fā)中做到前后端獨立開發(fā)，整個開發(fā)方式和上面提到的第二種方式是相同的，但是在后端springboot打包發(fā)布時將前端的構(gòu)建輸出一起打入，最后只需部署springboot的項目即可，無需再安裝nginx服務(wù)器。
二、springboot和vue整合的關(guān)鍵操作
實際上本文中這種前后端分離的開發(fā)，前端開發(fā)好后將build構(gòu)建好的dist下static中的文件拷貝到springboot的resource的static下，index.html則直接拷貝到springboot的resource的static下。下面是示例圖：
vue前端項目
springboot項目：
上面這是最簡單的合并方式，但是如果作為工程級的項目開發(fā)，并不推薦使用手工合并，也不推薦將前端代碼構(gòu)建后提交到springboot的resouce下，好的方式應(yīng)該是保持前后端完全獨立開發(fā)代碼，項目代碼互不影響，借助jenkins這樣的構(gòu)建工具在構(gòu)建springboot時觸發(fā)前端構(gòu)建并編寫自動化腳本將前端webpack構(gòu)建好的資源拷貝到springboot下再進(jìn)行jar的打包，最后就得到了一個完全包含前后端的springboot項目了。
三、整合的核心問題處理
通過上面的整合后會出現(xiàn)兩個比較大的問題：
1. 無法正常訪問靜態(tài)資源 。
2. vue router路由的路徑無法正常解析 。
解決第一個問題，我們必須重新指定springboot的靜態(tài)資源處理前綴，代碼：
重慶分公司
重慶分公司
@Configuration
public class SpringWebMvcConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
super.addResourceHandlers(registry);
}
}解決第二個問題的方式是對vue的路由的路徑做rewrite，交給router來處理，而不是springboot自己處理，rewrite時可以考慮路由的路徑統(tǒng)一增加后最，然后在springboot中編寫過濾攔截特定后綴來做請求轉(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ā)的直接訪問帶后綴的路徑會有問題。
另外一種方式是給前端的路由path統(tǒng)一加個前綴比如/ui，這時后端寫過濾器匹配該前綴，也不會影響前端單獨開發(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通配符之前用英文分號隔開
*/
public static final String REWRITE_PATTERNS = "urlPatterns";
private Set 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 請求的url
* @return
*/
private boolean isMatches(Set 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;
}
} 過濾器的注冊：
@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());//注冊rewrite過濾器
registration.addUrlPatterns("/*");
registration.addInitParameter(RewriteFilter.REWRITE_TO,"/index.html");
registration.addInitParameter(RewriteFilter.REWRITE_PATTERNS, "/ui/*");
registration.setName("rewriteFilter");
registration.setOrder(1);
return registration;
}
}這時springboot就可以將前端的路由資源交給路由來處理了。至此整個完整前后端分離開發(fā)合并方案就完成了。這種方式在后期有條件情況下也可以很容易做到前后端的完全分離開發(fā)部署。
總結(jié)
以上所述是小編給大家介紹的spring boot+vue 的前后端分離與合并方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
