創建一個新的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
結束