專案下載
專案地址:https://github.com/apache/dubbo-admin
如下圖,使用git地址直接構建或者下載zip包構建原始碼都可以,我用的是下載的zip包,
專案架構說明
dubbo-admin-distribution:用於存放一些專案配置相關。如果不定製自己的類容,我們不用去動它。
dubbo-admin-server:用作後端微服務。我們本地啟動時,主要是修改它的配置檔案
dubbo-admin-ui:用於頁面渲染顯示。需要修改一下index.js檔案。
dubbo-admin-server專案配置
我們使用的是遠端的zookeeper,那麼需要修改相應的配置,開啟dubbo-admin-server模組,找到application.properties配置檔案,修改相應的zookeeper地址,如下:
上圖中的ip,替換為自己安裝zookeeper的主機ip即可。
這樣就完成了前後端的對接。
修改完畢,即可啟動server中的DubboAdminApplication,在瀏覽器中輸入localhost:9999/swagger-ui.html
可以看見Swagger文件,若成功顯示,這說明後端程式執行成功。
dubbo-admin-ui專案配置
安裝nodejs
由於前端頁面使用到了vue框架,所以需要下載nodejs,進入官網,進行下載。如果已經安裝有Vue,可忽略此操作。
下載地址:http://nodejs.cn/download/
下載解壓,安裝完畢後,配置環境變數:
1)修改使用者變數PATH:新建變數,內容為"D:\node\nodejs"。
2)新增系統變數NODE_PATH:設定為:“D:\node\nodejs\node_modules"。
開啟cmd,使用命令:node -v
與npm -v
,如果出現版本號,則說明安裝成功!如下圖。
執行(網上有很多方案,我選用下面的)
1)使用命令npm congfig get registry,結果為http://registry.npmjs.org,由於是國外的映象,下載速度很慢,使用set命令npm config set registry http://registry.npm.taobao.org將其換成淘寶的映象。
2)使用cd命令,進入檔案dubbo-admin-ui目錄,使用命令npm install,進行安裝。安裝完畢如下圖所示。
成功之後顯示如下
然後直接訪問此路徑即可看到dubboAdmin:http://localhost:9998/
最後:當第再次啟動的時候,dubbo-admin-server的啟動方式不用變,啟動dubbo-admin-ui 頁面的用命令:npm run dev啟動即可。