spring + spring mvc + mybatis + react + reflux + webpack Web工程例子

前言

最近寫了個Java Web工程demo，使用maven構建；

後端使用spring + spring mvc + mybatis；

前端使用react + react-router+ webpack，使用ES6語法；順帶用了下jquery，echarts等插件，寫了幾個小demo

第一版，還需不斷完善。

先來個總體感受吧

貼幾張圖：

後端，熟悉的人天然熟悉：

前端，網上關於react，reflux不少都是單頁應用，我這個多頁應用的目錄本身設計的，參考後端，一個功能一個目錄~~~

有沒感受前端的寫法愈來愈像後端了，對於我這種業餘前端選手來講，挺喜歡這種目錄結構和語法的，哈哈哈：

運行效果：

後端說明

後端就是常見的spring+spring mvc+mabatis了，怎麼說呢，主要是寫配置文件了，spring的配置、mybatis的配置，spring mvc的配置，web.xml配置，pom.xml配置等等，有興趣的能夠把源碼下載下來，挺容易看懂的；

後端的主要功能就是給前端提供請求服務，前端經過ajax向後端發送請求，後端返回json格式的數據給前端，這裏也沒用spring mcv的視圖解析器，固然想用的話，能夠本身添加，我的以爲好像也不必。

後端專門加了個servlet用於處理url請求，很簡單就是forward到指定的html頁面；在這個servlet裏能夠添加一些權限控制、過濾相關的東西。

前端說明

一、先安裝nodejs，而後打開cmd，cd到\webapp目錄，輸入npm install，安裝一堆的模塊，這裏須要安裝的模塊是參考package.json配置文件的，話說package.json配置文件跟pom.xml的功能挺類似的，都會配置各類依賴，工程信息，工程build等一堆東西；

二、而後輸入npm run build，使用webpack打包一下，webpack是什麼不清楚的，能夠百度一下，反正它是能夠加載各類模塊，即便這些模塊是使用JSX語法寫的，它也有對應的loader會處理編譯它們；

反正每次寫完代碼後，輸入npm run build構建一下，而後在html裏引入打包好的js便可；

另外，關於react，reflux的說明，感受要說的太多了，本菜鳥也只是瞭解各大概，內容都是參考自網絡再加上本身的判斷，會使用，這裏就不詳細說了；

簡單說下我的理解：

react主要涉及虛擬dom和React.Component組件，每一個React組件都有一個state，state變化後會從新調用組件的 render 方法渲染整個組件的 UI，這裏不是直接操做dom，而是經過diff算法對虛擬dom進行一次計算，獲得須要更新的dom，而後把須要更新的那部分dom寫入到真正地dom裏。另外組件是能夠複用的；

reflux是flux思想的一種實現，別的實現還有redux什麼的，

網上偷了張圖，大概就是這麼個意思：

PS：後端有什麼MVC思想，前端也得來個什麼相似的吧，固然，flux跟mvc仍是有點不同的

另外，要使用jquery，bootstrap也很方便，安裝相應的組件，直接import使用便可；

實際項目效果

源碼參考

https://github.com/peterchenhdu/webbf

 僅供參考~