Vue+ElementUI+Springboot的基礎(chǔ)知識(shí)是什么

這篇“Vue+ElementUI+Springboot的基礎(chǔ)知識(shí)是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue+ElementUI+Springboot的基礎(chǔ)知識(shí)是什么”文章吧。

一、舊世界的Web

后端

（1）剛開(kāi)始，web后端基本都是php寫(xiě)的，腳本化的語(yǔ)言，嵌入到HTML里面很方便。

（2）然后Java開(kāi)始發(fā)力，JSP+Servlet成為主流。

（3）發(fā)現(xiàn)Java又臭又長(zhǎng)，開(kāi)始把一些常用的思路封裝成類(lèi)，于是Spring成長(zhǎng)了起來(lái)，且具有兩個(gè)核心概念A(yù)OP切面、IoC控制反轉(zhuǎn)。這兩個(gè)思想簡(jiǎn)直無(wú)敵。

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

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

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

（5）未來(lái)：肯定是Go的天下呀。

前端

（1）最開(kāi)始：HTML+CSS+JS三大金剛

（2）發(fā)現(xiàn)JS滿足不了欲望了，想發(fā)展更方便腳本，于是Jquery出來(lái)了。

（3）然后覺(jué)得HTML重復(fù)語(yǔ)句太多了，于是有了前后端結(jié)合語(yǔ)言：JSP等等。即使是現(xiàn)在，Springboot也有thymeleaf，專(zhuān)門(mén)給寫(xiě)后端的前端小白用的。

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

二、打開(kāi)新世界Vue的大門(mén)

1、基本概念

• node.js：就是javascript的運(yùn)行時(shí)，專(zhuān)門(mén)用來(lái)運(yùn)行js的。例如node xxx.js，像不像java -jar xxx.jar

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

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

• Babel：用來(lái)將ES6、ES7等高級(jí)版本js轉(zhuǎn)為低級(jí)版本js語(yǔ)言，便于兼容各種運(yùn)行平臺(tái)的腳本

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

• vue-router：前端有個(gè)重要的概念叫做“路由”，其實(shí)就是管頁(yè)面URL怎么跳轉(zhuǎn)的，這是vue的路由組件。

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

2、npm

由于npm非?；?，在高版本的node.js里面，已經(jīng)集成了npm

3、Vue

大概了解下vue是什么。

• 語(yǔ)法：vue在語(yǔ)法上類(lèi)似標(biāo)簽版本的JSP動(dòng)態(tài)網(wǎng)頁(yè)語(yǔ)言，或者非常類(lèi)似themeleaf。

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

• 路由：本質(zhì)就是，給什么URL，應(yīng)該返回什么組件。

• 封裝好的一些功能：比如mounted可以在網(wǎng)頁(yè)加載時(shí)處理內(nèi)容，data可以定義一些變量且發(fā)生改動(dòng)的時(shí)候自動(dòng)渲染局部組件，methods可以定義一些js函數(shù)等等

CSS你可以用SCSS等語(yǔ)言來(lái)編寫(xiě)，可以加scope關(guān)鍵字來(lái)限制css的作用范圍，且只需要import就可以引用任何其他的組件，定義好的組件可以直接以HTML標(biāo)簽的形式來(lái)書(shū)寫(xiě)，通過(guò)data來(lái)傳參，例如：

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

核心就是用高級(jí)語(yǔ)言更懶地去寫(xiě)HTML+CSS+JS……

4、element-ui

element-ui是餓了么出的一個(gè)前端UI，它已經(jīng)設(shè)定好了一些精美的組件，你只需要把這些組件拼湊成一個(gè)個(gè)網(wǎng)頁(yè)，而不需要從頭自己一個(gè)一個(gè)去寫(xiě)組件了。

比如像這種單選框、表格、進(jìn)度條等等，樣式都很好看，只需要把數(shù)據(jù)傳進(jìn)去就可以顯示了。如果覺(jué)得有不好看的地方，可以自己覆寫(xiě)CSS來(lái)更換，對(duì)于功能需求強(qiáng)烈、界面設(shè)計(jì)無(wú)所謂的中臺(tái)頁(yè)面、后臺(tái)頁(yè)面而言，十分方便。

5、為什么不用layui

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

以上就是關(guān)于“Vue+ElementUI+Springboot的基礎(chǔ)知識(shí)是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。