Vue+ElementUI+Springboot的基礎知識有哪些

本篇內容介紹了“Vue+ElementUI+Springboot的基礎知識有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、舊世界的Web

后端

（1）剛開始，web后端基本都是php寫的，腳本化的語言，嵌入到HTML里面很方便。

（2）然后Java開始發力，JSP+Servlet成為主流。

（3）發現Java又臭又長，開始把一些常用的思路封裝成類，于是Spring成長了起來，且具有兩個核心概念AOP切面、IoC控制反轉。這兩個思想簡直無敵。

AOP：例如，我們程序的每個地方都可能拋異常，以前每個地方都要try、catch十分繁瑣，且catch后的處理大同小異。如果有一個切面，把Web的出口攔截了，所有流量都會經過這個切面，一旦攔截到異常拋出，則返回對應的錯誤碼，這樣很多地方都只需要拋異常，不需要catch了，少些好多代碼不說，還統一了異常處理的方式。這只是AOP最簡單的一個應用。

IoC：Spring提供了一個容器的概念，把所有需要實例化的類都new出來一個對象，稱為Bean（類似豌豆里面的億速云），當類A需要類B的時候，就把管理的類B對象像擠億速云一樣注入到類A里面去。這樣解開了類之間的耦合，想要什么就拿什么，相互之間沒有前置的依賴關系，我獲得類A的時候不需要去管類A的構造方法里面還需要先實例化一個類B、一個類C…當然實際上類之間有很多復雜的引用關系，實例化的先后順序以及依賴循環異常交給Spring來管理就好。

（4）由于人繼續變懶，Spring的XML也不想寫了，于是出了Springboot這種東西，口號是“約定大于配置”，把一些基本的參數都設定好了，如果不需要改的話直接引用pom就可以使用了，如果要改的話，只需要配置application.yml文件里面的可選參數就可以了，如果還想更深地自定義的話，就寫一個config bean就好了，所有的config bean和application.yml都會被自動注入，不需要再寫XML說哪個bean所在的類叫什么名字，id是什么，怎么初始化等等。至此，配合Jetbrains的IDEA集成開發環境，寫java十分輕松，代碼量又少又好維護。

（5）未來：肯定是Go的天下呀。

前端

（1）最開始：HTML+CSS+JS三大金剛

（2）發現JS滿足不了欲望了，想發展更方便腳本，于是Jquery出來了。

（3）然后覺得HTML重復語句太多了，于是有了前后端結合語言：JSP等等。即使是現在，Springboot也有thymeleaf，專門給寫后端的前端小白用的。

（4）前端大佬們看到前端的門檻太低了，于是提高了門檻……其實是想把重復的代碼用“組件”的思想管理起來。比如我好不容易用HTML+CSS+JS寫了一個非常漂亮的Table，但是每次使用我都要復制所有的代碼過去，有一點點改動就要改所有復制的地方。如果這個Table是一個組件，我只需要引用它，然后把數據傳給它，它就可以自動渲染成HTML，并引用相關CSS和JS，該多好。另外，每次都要去考慮兼容什么瀏覽器，多麻煩，如果有個腳本，輸入要支持哪些版本的哪些瀏覽器，用一種高級點的語言寫，然后編譯的時候自動轉換成兼容各種瀏覽器的原生HTML+CSS+JS，這樣難道不香嗎。這就出來了現代前端語言。現代前端語言的基礎是React，用JS編織一切。React還是比較原生，所以在其之上衍生出了各種框架，出名的有Vue和Ant Design，它們封裝好了一些常用的思路，以及JS生成HTML這種基本操作。我真的想說，入門難度太高了……

二、打開新世界Vue的大門

1、基本概念

• node.js：就是javascript的運行時，專門用來運行js的。例如node xxx.js，像不像java -jar xxx.jar

• npm：node.js包管理。有很多寫好的js，引用也需要版本控制，就有了npm，概念上和java的maven、gradle類似。

• ES6：ECMAScript 6，就是javascript的新版本，比原生javascript更好寫。

• Babel：用來將ES6、ES7等高級版本js轉為低級版本js語言，便于兼容各種運行平臺的腳本

• vue-cli：就是vue的命令行工具

• vue-router：前端有個重要的概念叫做“路由”，其實就是管頁面URL怎么跳轉的，這是vue的路由組件。

• webpack：將所有的前端項目代碼打包和壓縮到一起，可以編譯高級語言（比如CSS的高級語言SCSS、LESS）、降低代碼冗余、按需加載文件，還可以區分多個環境配置，還可以壓縮圖片、字體等文件，還能熱加載（保存代碼后立刻顯示到瀏覽器而無需重啟服務）

2、npm

由于npm非常火，在高版本的node.js里面，已經集成了npm

3、Vue

大概了解下vue是什么。

• 語法：vue在語法上類似標簽版本的JSP動態網頁語言，或者非常類似themeleaf。

• 組件：vue的一切都是組件，你可以把HTML+CSS+JS封裝在一起自定義一個組件。

• 路由：本質就是，給什么URL，應該返回什么組件。

• 封裝好的一些功能：比如mounted可以在網頁加載時處理內容，data可以定義一些變量且發生改動的時候自動渲染局部組件，methods可以定義一些js函數等等

CSS你可以用SCSS等語言來編寫，可以加scope關鍵字來限制css的作用范圍，且只需要import就可以引用任何其他的組件，定義好的組件可以直接以HTML標簽的形式來書寫，通過data來傳參，例如：

<mytitle title="123"></mytitle>

核心就是用高級語言更懶地去寫HTML+CSS+JS……

4、element-ui

element-ui是餓了么出的一個前端UI，它已經設定好了一些精美的組件，你只需要把這些組件拼湊成一個個網頁，而不需要從頭自己一個一個去寫組件了。

比如像這種單選框、表格、進度條等等，樣式都很好看，只需要把數據傳進去就可以顯示了。如果覺得有不好看的地方，可以自己覆寫CSS來更換，對于功能需求強烈、界面設計無所謂的中臺頁面、后臺頁面而言，十分方便。

5、為什么不用layui

從我接觸前端以來，一直用的都是layui。后面發現它更適合于在原生HTML+CSS+JS/Jquery基礎上來優化頁面顯示效果，而不太兼容現代前端語言的思路。它自帶了一些初始化以及事件觸發的jquery，和vue的寫法不太契合。另外，組件并不齊全，像tooltip、popover是沒有的。

“Vue+ElementUI+Springboot的基礎知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！