本篇主要是介绍一下如何搭建dubbo admin,基于0.3.0版本。

源码下载

首先我们去github上下载一下dubbo-admin的源码,地址https://github.com/apache/dub...
,选择对应的版本,这里选择最新的0.3.0版本。
image.png
下载完后用idea打开
image.png
这里我们只要关注dubbo-admin-server和dubbo-admin-ui两个项目,最新版本的admin是采用前后端分离的,后台就是server项目,前端就是这个ui项目。

启动后台

我这里用idea方式启动,你也可以自己打包之后通过java -jar dubbo-admin.jar方式启动。

修改配置

找到server端的application.properties文件,修改对应的zookeeper配置地址以及端口号(如果端口号没冲突可以不改)
image.png
我本地改了zookeeper地址,另外两个地址分别是配置中心和元数据中心的,可以不动。
image.png

启动

改完之后就可以直接启动了。当然顺利的话,这里就结束了(后面可以跳过),但是我这边不是很顺利,启动失败,错误如下:
image.png
翻下去会看到这条错误,大概就是连接zookeeper失败了。
image.png
但是我们的zookeeper地址和端口通过cmd命令是通的,这时候只能调试了。
image.png
大概是这段逻辑抛出来的,这里不讲细节逻辑,大概是同步等待zookeeper连接成功,结果等待时间到了依然发现没成功,于是就抛出了失败的异常(具体原因不在这里分析)。这里我们只要延长连接等待时间即可,我这里是调整为10秒(默认是5秒)。
image.png

启动前端

前端用的是vue框架做的,这里我也没学过vue,根据github提示操作就行。没安装过npm的先安装一下。打开命令行窗口,进入到ui代码的目录下:
image.png
执行npm install,把你这个vue项目中用到的依赖都给下过来,它是基于package.json来下载对应依赖包的。
下载完成之后,执行npm run dev,该命令表示执行dev字段对应的脚本内容,这里对应的就是
image.png
执行完之后,就成功了,出现如下结果
image.png
在vue页面里,用到script时,idea默认会缩进两个空格,而eslint校验时会认为这是不符合规范的。如果你在执行过程中出现一些error,都是一些语法类的校验错误,比如expected indentation of 0 spaces but found 2可以不用理会,也可以通过idea的配置来解决
image.png
最后打开对应的地址:http://localhost:8082/
image.png
这里默认的用户名密码是root/root,当然你要改的话,就在后台那个项目的application.properties配置文件中改一下,比如我这里就把用户名改成了don
image.png
最后试下登录
image.png
完美登录!

总结

任何你认为简单的事情,在做的时候往往没有那么简单,还是需要多练练。另外这里也涉及到vue的一些知识,这个项目也可以拿来当简单的源码学习。

github地址:https://github.com/apache/dub...
npm run命令相关资料:https://www.jianshu.com/p/553...


爱炒股的程序猿
50 声望4 粉丝

每天进步一点点