webstorm 引用mongo可视化插件 Mongo Plugin

这个插件可以在各大编辑器中使用,这里介绍在webstrom中的安装

1、文件 -- > 设置         打开设置


webstorm 引用mongo可视化插件 Mongo Plugin_第1张图片

设置 --> plugins --> 搜索中输入 mongo  ,会看到搜索结果,1、没有结果,就点击中间的  蓝色链接  browse(然后看下一步的操作)  2、如果有结果,就点击install plugin安装(一般都是第一种情况)


webstorm 引用mongo可视化插件 Mongo Plugin_第2张图片

 然后就可以看到搜索的结果,点击右边的 install plugin  ,提示是否安装,点击安装,即可出现下下图的安装进度  


webstorm 引用mongo可视化插件 Mongo Plugin_第3张图片
webstorm 引用mongo可视化插件 Mongo Plugin_第4张图片

安装完成后,点击窗口右下角的关闭按钮,然后在设置窗口点击确定按钮,点击后会提示是否重启,点击重启webstrom重启。


webstorm 引用mongo可视化插件 Mongo Plugin_第5张图片
webstorm 引用mongo可视化插件 Mongo Plugin_第6张图片



重启webstrom以后

在右上角可以看到一个mongoExplorer,点击展开,

如果没有这个按钮,是因为隐藏了,点击左下角的展开侧边栏图标,就可以出现了(位置如下下图)


webstorm 引用mongo可视化插件 Mongo Plugin_第7张图片

 在展开的mongoExplorer 中,点击设置图标 如图:

会弹出设置弹窗,在弹窗中点击右边的添加 加号。  添加我们需要连接的数据库


webstorm 引用mongo可视化插件 Mongo Plugin_第8张图片

 在弹窗中,输入label (名字任意),勾选自动启动,然后点击test connection,如果弹出提示连接成功与否,成功之后,直接确定就可以了。


webstorm 引用mongo可视化插件 Mongo Plugin_第9张图片


 确定之后,可以看到多了一条连接,然后点击下面的确定  ,   { 以后如果要修改,以后就点击那条连接,点击右边那个  笔状图标,就可以弹出编辑界面(这里就不演示了)}


webstorm 引用mongo可视化插件 Mongo Plugin_第10张图片

 然后就可以看到 mongoExplorer的展开界面中,出现了一个test的东西,点击左边的小三角就可以展开看到所有的数据库和数据库里的表,双击表,就可以在界面中打开这个表,看到表的说有数据了。


webstorm 引用mongo可视化插件 Mongo Plugin_第11张图片

这样既不的安装就完成了,当通过node操作了mongo的数据以后,重新点击右边的表打开数据,就能看到修改后的数据了 


增删改

双击 _id,就可以看到下面出现对应的编辑界面,单击值,就可以输入新的值,然后点击左下角的保存,数据就会保存。


webstorm 引用mongo可视化插件 Mongo Plugin_第12张图片


添加数据


webstorm 引用mongo可视化插件 Mongo Plugin_第13张图片

添加字段,在编辑界面右键,会出现添加字段的输入框,输入字段名和值,保存即可。


webstorm 引用mongo可视化插件 Mongo Plugin_第14张图片

 插件的 github地址如下,有兴趣的可以去了解下

https://github.com/dboissier/mongo4idea

你可能感兴趣的:(webstorm 引用mongo可视化插件 Mongo Plugin)