介紹最近在工作中做個(gè)新項(xiàng)目，后端選用Spring Boot，前端選用Vue技術(shù)。眾所周知現(xiàn)在開發(fā)都是前后端分離，本文就將介紹一種前后端分離方式。 常規(guī)的開發(fā)方式采用Spring Boot 開發(fā)項(xiàng)目開發(fā)項(xiàng)目常規(guī)的方式其實(shí)很簡單，無非還是采用原來Spring Mvc那一套，建控制器（Controller）然后建方法（action）再添加模板引擎（spring boot 推薦使用thymeleaf）這樣開發(fā)開起來其實(shí)也沒有大問題，畢竟是采用了MVC的思想，在一定程度上開發(fā)起來還是很方便的。但是如果在分工很細(xì)的情況下，這里前端后端是是分離開的，那么假如前端的同學(xué)需要加個(gè)頁面那么就要找后端得到同學(xué)給他加，想想一個(gè)復(fù)雜的項(xiàng)目，好多頁面，這樣開發(fā)方式肯定不是一個(gè)好的方案，如何解決這個(gè)問題呢？讓我們慢慢的一步一步的深入解答。 MVVM什么是MVVM？其實(shí)這是一個(gè)前端概念，本人是后端開發(fā)，其實(shí)對(duì)前端不是很了解，但是本人也是.Net開發(fā)人員，.Net中的WPF中其中一個(gè)核心是MVVM，最近手上一個(gè)項(xiàng)目也在用WPF，所以對(duì)MVVM還是有點(diǎn)個(gè)人的理解。從表面上理解Model-View-ViewModel那就是實(shí)體-視圖-視圖實(shí)體，好像有點(diǎn)明白，是不是實(shí)體可以到視圖，視圖也可以到實(shí)體，在想下，是不是數(shù)據(jù)可以從實(shí)體到視圖，也可以從視圖到實(shí)體，在用一個(gè)高大上的名字，那就是數(shù)據(jù)雙向綁定。是的MVVM其實(shí)就是一種數(shù)據(jù)雙向綁定的思想。 SPA(Single Page Application)SPA翻譯成中文就是單頁面應(yīng)用，其實(shí)從名字也可以看出來，所謂的單頁面應(yīng)用，就是整個(gè)web項(xiàng)目只需要一個(gè)頁面就可以，這個(gè)怎么實(shí)現(xiàn)的呢。我想起了我之前用jquery的時(shí)候（似乎現(xiàn)在說寫jquery有點(diǎn)被鄙視，哈哈），用jquery寫過瀑布流，瀑布流的思想很簡單，就是下拉觸發(fā)一個(gè)事件，在這個(gè)事件里面請(qǐng)求一個(gè)后臺(tái)接口，然后得到結(jié)果，將結(jié)果append到頁面上。那單頁面是不是跟append效果類似?？赡軆?yōu)化了性能。（前端的同學(xué)可能要噴我，本來高大上的東西，被我說的這么low）。我已知的前端的單頁面框架有：vue，AngularJS。我們使用的是vue，這個(gè)東西不管前端還是后端估計(jì)不知道的人很少了。 Spring Boot + Vue 使前后端分離之前說過了，常規(guī)的spring mvc 開發(fā)其實(shí)也很難完全的前后端分離。前端的同學(xué)要加頁面需要找后端的同學(xué)給加。那么我們可以只建一個(gè)頁面，前端使用vue，構(gòu)建一個(gè)單頁面應(yīng)用。這樣前端可以完全不用依賴后端了，在項(xiàng)目創(chuàng)建的時(shí)候，就創(chuàng)建一個(gè)頁面，也不需要把js，css等靜態(tài)資源加到spring boot項(xiàng)目里面，把靜態(tài)資源放到靜態(tài)資源服務(wù)器上（可以放到CDN上），前端去維護(hù)靜態(tài)資源就好了。那么其實(shí)只要在我們創(chuàng)建的一個(gè)頁面上加上一個(gè)總的JS，總的CSS，再在js里面引用其他的js或者css，這樣在一個(gè)頁面上其實(shí)加的東西不多，這樣做前端對(duì)后端的依賴大大減少。那么問題來了，就是都這樣，為何不干脆不完全的把前端和后端分離開，后端連一個(gè)頁面都不用了，只提供接口。前端自己弄個(gè)服務(wù)來承載就好了。其實(shí)這樣行不行？ Show Code俗話說的好，別總BB，show your code。下面我開始搭建一個(gè)demo。在搭建之前先來在討論下vue，vue開發(fā)的時(shí)候需要自建一個(gè)服務(wù)，來開發(fā)調(diào)試，開發(fā)完成了可以將vue打包編譯成普通的靜態(tài)資源js或者css。在正式的項(xiàng)目中將打包編譯后的靜態(tài)資源放到靜態(tài)資源服務(wù)器上或者cnd上，我們直接用打包編譯后的靜態(tài)資源就好了。這樣在開發(fā)的時(shí)候，前端需要開啟一個(gè)服務(wù)來開發(fā)和測(cè)試，那么在開發(fā)調(diào)試的時(shí)候要調(diào)用后端的接口，就會(huì)出現(xiàn)跨域情況，所以在開發(fā)過程需要解決跨域問題。這在后面會(huì)配置一個(gè)nginx用以解決跨域問題。 后端搭建創(chuàng)建Spring boot 項(xiàng)目我就不說了。我直接搭建展示目錄。  后端目錄 直接運(yùn)行結(jié)果：  后端運(yùn)行 vue項(xiàng)目搭建關(guān)于vue項(xiàng)目搭建我直接百度的（哈哈）。我在這裝X總結(jié)下。
如下圖是我創(chuàng)建后的vue項(xiàng)目，已經(jīng)運(yùn)行結(jié)果。  vue項(xiàng)目目錄  運(yùn)行結(jié)果 編譯之后的文件路徑：  編譯之后的 我們看下index.html的內(nèi)容。 <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width,initial-scale=1'><title>front</title><link href=/static/css/app.46520b505f33694e3eee33aba78b61eb.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.3322ba91290e7480ffb3.js></script><script type=text/javascript src=/static/js/vendor.13ccb5cb8cfc8644879c.js></script><script type=text/javascript src=/static/js/app.3c073d6bceb68d30b32f.js></script></body></html>其實(shí)就是引用js或者css文件,沒有其他的，這相當(dāng)與vue項(xiàng)目的入口，只引用一些主要的js或者的css，其他的js或者css，會(huì)在主要的js里面import（java里面叫添加包，其實(shí)應(yīng)該是類似的概念） 反正文件都是這樣的，據(jù)說可以設(shè)置。 在spring boot 引入靜態(tài)文件為了演示一個(gè)靜態(tài)資源服務(wù)器，我在本機(jī)開啟一個(gè)nginx，來承載靜態(tài)資源。 運(yùn)行一下看下效果：  nginx上的效果 現(xiàn)在在后端spring boot 里面引入靜態(tài)資源。上面已經(jīng)講了，index.html相當(dāng)于vue的入口，那么這個(gè)入口文件的代碼直接拷貝到后臺(tái)spring boot 里面提供的一個(gè)頁面其實(shí)就能把后臺(tái)的這個(gè)頁面當(dāng)成vue的啟動(dòng)文件。改造后的后臺(tái)頁面如下：  后臺(tái)頁面改造 改造完成點(diǎn)擊運(yùn)行，運(yùn)行結(jié)果為：  改造運(yùn)行結(jié)果 |
|
|
