老哥们，我是一个前端，老板现在要我做一个网页版的 Navicat,其中 sql 编辑器和下面的结果返回，没有头绪啊，有老哥说一下，我这工作才半年，哎

老哥

编辑器

Navicat

SQL

33 条回复 • 2020-09-19 11:30:15 +08:00

1

liuxey

2018-12-12 11:58:53 +08:00

2

编辑器用个开源的 web 编辑器就行了，至于下面的结果返回？调用 sql 语句查结果会吧？ html/table 会吧？难点无非就是从 sql api 里获取 meta 信息展示表头，这个搜索下半天也就差不多了。
更多进阶的功能慢慢来，当你做完这个东西获得的经验值比 CRUD 2 年还高，努力吧，少年！

2

Heavytiger

2018-12-12 12:00:14 +08:00

2

phpmyadmin 现成的拿来用，开源的

3

xiri

2018-12-12 12:07:11 +08:00 via Android

给 phpmyadmin 套个壳？

4

moocean

OP

2018-12-12 12:09:16 +08:00

@liuxey 老哥，我之前用 Codemirror 试过，里面的代码提示，我要提示表里面的字段，有点难搞，下面的表我会弄，让后台把信息给我返回来，我自己做展示，老板对编辑器的要求，代码高亮，代码提示，代码格式化，自动缩进，很头大，我自己用 vue 写了一个 demo，可是效果不理想，除了 CodeMirror 还有其他好用的编辑器吗

5

Raisu

2018-12-12 12:10:42 +08:00

做个大概的不难，怕就怕每个细节，功能都要涉及到

6

liuxey

2018-12-12 12:14:14 +08:00

1

@moocean #4 我没做过 web 编辑器方面的产品，不过你可以看下 vscode 使用的 https://microsoft.github.io/monaco-editor/
或者去看看现在一些云平台使用的编辑器解决方案

7

tomoya92

2018-12-12 12:21:18 +08:00 via iPhone

at.js

8

xenme

2018-12-12 12:26:38 +08:00 via iPhone

编辑器丢个 input 拉大就行了
结果直接一个 div 显示出来执行结果完结。

再送老板一个 execute 按钮。

让你做语法解析提示啥的，就说不会。

9

shenyu1996

2018-12-12 12:27:01 +08:00 via Android

编辑器的话看看 ace.js 呢 codemirror 也有对应的语法提示呀

10

xiaoxinshiwo

2018-12-12 13:32:52 +08:00

https://github.com/JavaScriptor/js-sql-parser

11

passerbytiny

2018-12-12 13:37:37 +08:00

@moocean #4 你需要的是换个老板。Navicat 光 mysql，一个标准版授权 1499 （超过 MS Office 全套），那是能说做就做出来的，而且还想要 web 版的。

12

suzic

2018-12-12 13:40:31 +08:00

同意楼上。做个 Navicat，咋不做个 windows 呢

13

loading

2018-12-12 13:48:07 +08:00 via Android

做出来简单，做好挺难。

后端呢

14

liprais

2018-12-12 13:50:36 +08:00

hue 或者 superset 搞一个就行了

15

freeman983

2018-12-12 14:05:40 +08:00

我们有现成的产品,wx:freeman983

16

moocean

OP

2018-12-12 14:11:35 +08:00

@loading 先让我搞个 demo 出来，看能做不，后台现在还不启动这个

17

moocean

OP

2018-12-12 14:15:24 +08:00

@liprais 谢谢老哥，我去看看

18

liprais

2018-12-12 14:16:14 +08:00

1

@moocean sql editor 开源的一大堆，上 github 搜搜就行了
话说为啥不用 zeppelin

19

moocean

OP

2018-12-12 14:39:56 +08:00

@liprais 多谢老哥指点迷津，我们老板开始只给我一个 Codemirror 让我看，我用了，代码提示，高亮，这些都能搞出来，可是就是提示字段名字没有，今天来这里问有学到很多，我先都查查看看，再选一个用吧，老板事项弄个类似阿里云 RDS 那样的数据库管理系统，哎，我这菜鸟好心累，老哥您说的 zeppelin 我之前也没听过，我现在主要用 vue,要是能和 vue 结合用就最好了

20

jookr

2018-12-12 14:42:08 +08:00

https://www.adminer.org/
单文件管理 mysql

21

liprais

2018-12-12 14:43:36 +08:00

@moocean
phpmyadmin 对着抄就行了

22

moocean

OP

2018-12-12 14:44:25 +08:00

忘了说了，我要对应 10 个 java

23

moocean

OP

2018-12-12 14:45:26 +08:00

@liprais 嗯嗯，谢谢老哥

24

Cbdy

2018-12-12 19:14:25 +08:00 via Android

字段提示先去数据库把 ddl 捞出来，然后解析输入的 sql，根据 ddl 提示

25

moocean

OP

2018-12-13 14:24:11 +08:00

@Cbdy @liprais 我用了 ace 编辑器，结合 vue，实现了代码高亮提示，然后自定义提示也做到了，拿数据库的表名，我自己用 node 写了个服务，show table 拿到表名，字段名，然后页面画了个树展示，mysql 的结果也画个表格展示，目前来说已基本实现 demo 所需功能，非常感谢各位老哥，目前唯一的就是大写提示，搜索了谷歌，只有一个记录，也是没有解决的，这个可能我自己看看源代码改改了，再次感谢

26

fm983

2019-04-08 11:07:04 +08:00

@moocean https://mp.weixin.qq.com/s/Sd1wD4rgqLeMbbGdcKkcBg

27

moocean

OP

2019-04-08 12:00:51 +08:00

@fm983 老哥，100 天过去了，你发的链接我刚才看了，连接上面介绍的，我们也都实现了，支持各种数据源，脱敏，受限，权限，导出，还有报表啥的，结果集编辑，多表查询，但是，老哥，有个最重要的问题，我想问一下，你们 sql 编辑器用的啥，我用了 ace，但是没有上下文支持，比如输入 select 就出来表名，还有对各种数据库支持，高亮，提示，ace 没有 mongodb 的插件，你们是自己写的吗，老哥，还有一个 codemirror，老男了，我还没搞出来，100 天啊，难受死我了

28

fm983

2019-04-08 13:13:28 +08:00

@moocean 我们用的也是 ace，上下文是可以做的。mongodb 我们之前做了一版是用 sql 语法访问的，但是效果不好，后边准备也做原生的 mongodb 语法支持。

29

moocean

OP

2019-04-08 14:02:57 +08:00

@fm983 老哥，能请教一下吗，那个上下文是用 ace 的啥做的，之前我做的使用添加智能提示的方法，一股脑全部怼上了，我有点菜，上下文还不行，可以指导下吗，老哥

30

fm983

2019-04-08 14:10:57 +08:00

@moocean 加微信说吧，freeman983

31

moocean

OP

2019-04-08 14:21:55 +08:00

@fm983 加你了，老哥，求通过

32

fm983

2020-09-03 13:58:36 +08:00

后边有做相关产品可以看下 sqldev.info

33

chenshun00

2020-09-19 11:30:15 +08:00

codemirror 可以吧表和字段设置成动态，就可以自动提示了