[MySym] - 自定义 Sym 论坛编辑器中 emoji 列表提示

本贴最后更新于 3205 天前,其中的信息可能已经时过境迁

通过问 D 大,得知 ctrl+/的代码在 common.js 里,搜索 emoji 关键字找到 emojiString,此处存放了所有 emoji 名称的字符串(老长了 D 大怎么做到的……)
于是在此处添加 ajax 方法,以从后台获取该用户相关的 emoji 列表:

$.ajax({ async: false, url: Label.servePath + "/users/emotions", type: "GET", success: function (result) { console.log('ajax:'+result.emotions); emojString=result.emotions; } });

其实我不太清楚 async 的含义,也懒得管,能用就行 0.0~
这里其实用了一个 CodeMirror 的插件(似乎是做代码自动补全的,D 大将它用到了表情符号上👍)
鉴于这块代码内也有其他 ajax 并且调用了 UserProcessor(类似于 Controller),我也将 emotion 获取的 controller 写在了这里(因为是获取该用户的 emoji,所以也不算打乱,应该是吧)

@RequestProcessing(value = "/users/emotions", method = HTTPRequestMethod.GET) public void getEmotions(final HTTPRequestContext context, final HttpServletRequestrequest,final HttpServletResponse response) throws Exception { String emotions; context.renderJSON();//context包含request和resposne对象,不知道是否一致 final JSONObject currentUser = (JSONObject) request.getAttribute(User.USER); //获到的包含用户信息的JSON对象 final String userId = currentUser.optString(Keys.OBJECT_ID); //取得用户ID1470108766562 emotions=emotionQueryService.getEmotions(userId);//保存 context.renderJSONValue("emotions",emotions); }

这段代码是拷贝的其他方法里的再做修改,注释是我通过调试读取到的值,以明白这段代码是用来做什么的(这段时间工作的新技能,不必探查源码考究代码的功能,通过调试知道其能获取什么值就直接拿来用好了)
可以看到,这里建立了 emotionQueryService,需要如下引入:

@Inject private EmotionQueryService emotionQueryService;

虽然这个 ajax 是 void 类型的,不过可以通过 context.renderJSONValue 方法将值带回去(这个是向 D 讨教类似功能的代码得出的结论)
于是,进入 getEmotions 方法。
在论坛上问过 D 大 Service,Repository,Cache,以及 Model 类的关系(查看帖子
如 D 所言,Repository 就是执行数据库查询操作的 DAO,不过我得说,Service 也有 Query 代码,这属于分层不够明确:P
Service 是服务类,按我的理解就是调用 Repository 以完成 Processing 需要的动作,Cache,D 大的解释是放入内存,有些操作就是先对内存数据进行操作,完后再写回数据库的,如此大概会提高速度(积分就是如此,以至于直接通过该数据库库字段的话,积分不会变化,需要重启服务才能生效)
于是,我照着原有规则,写了一个 EmotionQueryService 和 EmotionMgmtService,目前只用到了前者:
完整代码由于包含完整 emoji 列表比较长,就不贴了,关键代码如下:

try { String emojis=emotionRepository.getUserEmotions(userId); if(emojis!=null&&emojis.length()!=0) return emojis; } catch (final RepositoryException e) { LOGGER.log(Level.ERROR, e.getMessage()); return allEmojis; }

这块没什么可说的了,关键在于 Repository 里面:

@Repository public class EmotionRepository extends AbstractRepository { public EmotionRepository() { super("emotions");//此处据我推测应该与repository.json里的name有关 } public String getUserEmotions(final String userId) throws RepositoryException { final PropertyFilter pf=new PropertyFilter(Emotion.EmotionUser, FilterOperator.EQUAL, userId);//定义查询条件 final Query query = new Query().setFilter(pf);//添加查询条件 final JSONObject result = get(query);//执行查询 final JSONArray array = result.optJSONArray(Keys.RESULTS); if (0 == array.length()) { return null; } String resultString=""; try { for(int i=0;i<array.length();i++){ resultString+=array.optJSONObject(i).get("emotionName").toString(); if(i!=array.length()-1) resultString+=","; } } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } return resultString; } }

Query 或者 Filter 的具体逻辑无需关心,直接可用(一般情况下应该很容易吧,再复杂我还没有考虑过,我这里只需要通过 userid 获取到所有结果就行)
这个项目 json 处处可见,此处亦然,只定义 Repository 还不行,还需要在 repository.json 里添加数据表的对应:

{ "name": "emotions", "keys": [ { "name": "oId", "type": "String", "length": 19 }, { "name": "user_oId", "type": "String", "length": 19 }, { "name": "emotionName", "type": "String", "length": 25 }, { "name": "emotionSort", "type": "int" }, { "name": "emotionType", "type": "int" } ] }

第一个 name 疑似 repository 的 super 里传入的参数,其他的则对应数据表的列名了。
如此,emoji 快捷键调出来的 emoji 列表就掌握在自己手中了,还有相应的管理等功能,尚未完成,装逼要趁早,所以先写了个这个流水账。实际开发的流程其实是逆推过来的,先模拟了 service,repository 等再反过来向上写。

  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 706 关注

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • ZephyrJung

    PS. 我觉得微博分享应该来个长图生成之类的(类似于简书)

  • ZephyrJung

    PS2. D 大,代码格式怎么整 orz @88250

  • 714593351 1

    async: false 同步调用

    默认 async: true,异步

  • 88250 1

    @Zephyr 用 GFM 语法

  • 88250

    刚刚看完主贴,首先多谢你抽出时间来帮忙完善 Sym 👍

    提点疑问:对于表设计,emotionName 这个字段是做什么的?存的是表情的字符集么?

  • ZephyrJung

    @88250 emotionName 就是表情的名字,比如👍,就是 +1,我是讲所有 emotionName 取出来然后加上逗号,组成原先的 emojiString 的

  • 88250

    @Zephyr 哦,明白了。也为了扩展考虑,要不这个字段用 text 吧(repository.json 里面长度设置为 1024 或者更大,生成的时候就是 text 了),里面也可以存上传的图片地址(自定义表情)。

  • ZephyrJung

    @88250 我觉得 name 也有点快捷键的意思吧,如果保存上传地址什么的,可以再加字段

  • 88250

    @Zephyr 能一次性弄好就一次性吧~

  • ZephyrJung

    @88250 发现了一个小 bug,不过我觉得可以忽略。。ctrl+/后,输入-,列表消失,再输入 1,列表又显示,并且选中正确的 emoji,然而回车会变成-:-1(:)

请输入回帖内容 ...
ZephyrJung
一切有为法,如梦幻泡影,如露亦如电,应作如是观 北京

推荐标签 标签

  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 167 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    184 引用 • 1020 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 609 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 108 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 413 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 7 关注
  • Excel
    31 引用 • 28 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 249 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    557 引用 • 675 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 113 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 543 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 622 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 38 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    949 引用 • 1460 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    369 引用 • 1846 回帖 • 3 关注
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 273 关注
  • CodeMirror
    2 引用 • 17 回帖 • 162 关注