創建一個新的maveb項目,做一個admin的管理界面

用angular寫前面的頁面。
先把dependcency引用引進來。

前端的插件能幫我在springboot里面搭建出一個nodeJS的環境來。最近這里的引用可以插件最終的源代碼。

這是node.js的版本


多出一個node的文件夾來。

有了node環境以后 ,還需要npm的命令。新建一個文件

文件就叫做npm,

一會我們用這個命令來裝angular。
下面的是告訴它到哪去執行命令,實際上就是node/node_modules/npm/bin/npm-cli.js這個路徑。到這去執行nom的命令。

有了這個文件后,在文件這里右鍵

目前是在is-admin這個目錄下面。

npm的版本是6.9

下面去安裝angular。安裝angular cli腳手架。

提示這個就算是下載完成了。上面可能會有一些警告,不用管。

創建一個叫做ng的文件。


告訴它執行ng這個命令 到下面這個路徑下執行。

刷新一下

node的旁邊多了個node_modules文件夾





創建angular項目。css選擇最原始的CSS

刷新下,這里多了個aaa的目錄。

把里面的文件提到根目錄下

選擇Skip All

拷到這個src下,上面剛才給忽略掉了因為文件夾的沖突。

這個目錄可以刪掉了。選擇ok

安裝bootstrap3 然后jquery的版本。

依賴的根目錄下引入bootstrap.css



可以理解為java的公用的import的文件。里面有很多的依賴。

這是一個總的依賴的管理CodeMix

編輯器內有語法提示 是因為安裝了個插件


數據綁定

運行程序之前有幾個地方要改,熟悉spring boot的人都知道這個resources下的文件在瀏覽器上訪問是可以直接訪問的到的。

每次改了文件都需要編譯,編譯也是需要觸發的。這里我們做一個熱部署。
--watch這行他就是在監控着我的源碼的目錄。一旦源碼有變化就會自動去編譯。編譯后的靜態文件,就放在剛才我們配置的地方。

這樣就是編譯好了。

比如修改標題。

這邊就會自動觸發編譯

src/main/resources/static的目錄下 就已經有了編譯后的文件。



is-admin的pom.xml相關目錄下

運行測試

直接訪問8080

結束
