Spring cloud微服務安全實戰-5-2前端頁面改造



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

結束

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM