首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【实战】我是如何在输入框实现@ At功能的

作者:InfinityTomorrow 授权转载 链接:https://juejin.cn/post/6982251438332182542 一、前言 最近接手了一个需求,在评论框中实现 @At通知用户的功能...这个可以说是我的知识盲点了,但是其实很多应用都有这类功能了,例如:QQ空间、微博搜索、企业微信的TAPD...但是一看就不想不做~(产品经理ps:为什么别人可以做你不可以做?)...contenteditable-MDN contenteditable实现编辑器,光标、输入法处理 基于contenteditable技术实现@选人功能 富文本 (例:企业微信TAPD) 支持 文本、...important; border-radius: 4px; overflow-y: auto; } 四、@的功能的实现 按住shift + @ 的时候,弹出通知人列表...我就就可以做到:随时@ 随时插入的功能拉~ 五、Android、IOS、Web显示多端一致 每个端使用富文本都是不一样的、那我们应该如何做到统一数据统一呢?

2.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    不装了,我摊牌了!人像卡通化的功能我实现了

    不装了,我摊牌了!辰哥实现了人像卡通化的功能,玩了绝对上瘾! 今天咱们来搞点有趣的事情:人像卡通化。...本文的人像卡通化功能没有使用第三方接口功能,辰哥知道百度有提供接口,并且十来行代码就可以搞定,但是有使用次数限制,所以辰哥就通过搭建神经网络模型,借助数据集进行训练,最后得到模型。...这样得到的人像卡通化的功能可以顺便使用,并且还可以通过提高数据集的质量或者调整参数,让生成的卡通人像更加逼真!...整个过程还是比较简单的,没有学过深度学习的小伙伴也可以将代码跑起来!! 03、小结 本文中教会了大家如何通过一张真人图去生成对应的动漫图,在文中也详细地讲解了如何去搭建环境,并代码跑起来。...鉴于可能很多读者不是学习深度学习方向的,所以文中就不太细于讲解代码,只是教会大家如何将代码跑起来,感兴趣的读者可以自己尝试! 一定要动手尝试 !一定要动手尝试 !一定要动手尝试!

    79420

    不装了,我摊牌了!人像卡通化的功能我实现了

    大家好,我是辰哥! 不装了,我摊牌了!辰哥实现了人像卡通化的功能,玩了绝对上瘾! 今天咱们来搞点有趣的事情:人像卡通化。...本文的人像卡通化功能没有使用第三方接口功能,辰哥知道百度有提供接口,并且十来行代码就可以搞定,但是有使用次数限制,所以辰哥就通过搭建神经网络模型,借助数据集进行训练,最后得到模型。...这样得到的人像卡通化的功能可以顺便使用,并且还可以通过提高数据集的质量或者调整参数,让生成的卡通人像更加逼真! 先来看一下效果: ? 看完效果之后,是不是觉得很神奇?...03 小结 本文中教会了大家如何通过一张真人图去生成对应的动漫图,在文中也详细地讲解了如何去搭建环境,并代码跑起来。...鉴于可能很多读者不是学习深度学习方向的,所以文中就不太细于讲解代码,只是教会大家如何将代码跑起来,感兴趣的读者可以自己尝试! 一定要动手尝试!一定要动手尝试!一定要动手尝试!

    89230

    我想到的Netty功能,别人已经实现了

    Netty是年初最先学习的框架,近期的图书租借系统想要用上聊天功能,实现一对一对话聊天,在用户登录服务端时,获取用户ip与id绑定,放入channelgroup,每次循环遍历这个ip对应的channel...1.一对一聊天 2.展示在线人数 3.登录验证 4.输入框优化 5.可支持表情 开源万岁 当寻找Netty一对一聊天功能实现的时候,除了重温下功能点,还能发现新的东西,一个小小的demo,别人却不是这么做的...,细化到验证,还考虑到性能,看下实现效果页面 ?...如何发送消息?...触发定时消息广播,遍历size 处理消息ctx.fireChannelRead(frame.retain()); 此时广播用户计数broadCastPing userCount: 1 websocket实现了真正意义上的客户端与服务器端的长连接

    1.3K10

    我是如何通过IPC连接关掉老师电脑的

    挺久没更新了,今天来更新一篇IPC连接操作,为了这篇文章我差点没嗝屁 首先,IPC连接命令直接贴给你们了 net use ipipc$ user 建立IPC空链接 net use ipipc$ 密码...net pause 服务名 暂停某服务 net send ip 文本信息 向对方发信息 net ver 局域网内正在使用的网络连接类型和信息 net share 查看本地开启的共享 net share...% (这里面%ip%代表要连接到的电脑IP,%password%表示要连接到的电脑密码,%user%表示要连接到的电脑名称) 如果不知道电脑名称的话就用net view来看看 image.png 我这里就不看了...,如命令 shutdown -m \\%ip% -s -t 0 (%ip%代表要连接到的电脑IP) 然后就妙了,老师一脸懵,同学一阵欢呼 ---- 其实IPC连接不仅仅是只有这个功能,可以搞个极域电子教室玩玩...,看看里面有什么功能你就会知道IPC有多么的有用 ---- 防护篇 如何关闭IPC空密码连接呢(电脑没有密码就连接不到你) 粘贴到记事本后缀名改成bat运行 reg add "HKEY_LOCAL_MACHINE

    2K63

    我使用延迟队列实现商品的竞拍成交功能

    背景 我们平时开发可能要求实现这样的需求:用户可以在有效的时间内进行商品竞拍,当有效时间过了之后,取竞拍价最高的用户成交。...对于上面的需求,我决定使用延迟对列实现。...实现的逻辑为: 当系统启动时,扫描已经发布的商品,并将商品id存放入Redis的延迟队列 如果有新商品发布,将新商品id存入延迟队列 启动一个常驻线程,扫描延迟队列,获取已到竞拍时间结束的商品,并获取对应商品的竞拍信息...关于Redis的Zset实现延迟队列,有兴趣的同学可以看看我写的这篇文章: “Redis实现延迟队列 代码实现 我们先来写一个Redis的工具类RedisDelayingQueue,用于将数据放入...看数据库中商品的状态也改变了。 交易结果也插入了相关的商品信息。 到这里我们就实现了商品竞拍成交功能。 如果你有更好的想法,欢迎评论给出意见。如果这篇文章对你有帮助,欢迎点赞转发。

    35740

    面试官:如何实现一个连接池,我当场懵了

    1.1 结构连接池对外提供接口:获得连接归还连接暴露客户端可配置的参数:最小空闲连接数最大连接数内部实现功能:连接建立连接心跳保持连接管理空闲连接回收连接可用性检测1.2 连接池结构示意图2 客户端SDK...是否基于连接池使用三方客户端进行网络通信时,先要确定客户端SDK是否基于连接池技术实现。...3 TCP连接的客户端SDK,对外提供API的方式3.1 连接池和连接分离XXXPool类,负责连接池实现:先从其获得连接XXXConnection再用所获连接请求服务端完成后归还连接XXXPool须线程安全...4.3 SDK没有实现连接池通常不是线程安全的,而且短连接的方式性能不高,使用时需考虑是否自己封装一个连接池。5 Jedis类属于哪种类型API?...多线程复用一个连接会产生什么问题如何用最佳实践来修复此问题向Redis初始化2组数据,Key=a、Value=1,Key=b、Value=2:@PostConstructpublic void init

    1.7K51

    我是如何实现Go性能5倍提升的?

    目录 1 为什么要进行性能优化 2 Go中如何对性能进行度量与分析 3 常用结构、用法背后的故事 4 空间与布局 5 并发编程 6 其他 01、为什么要进行性能优化 对 Golang 程序进行性能优化,...读=写时,建议用 courrentMap 3.3 hash 的实现: index vs map 在使用到 hash 的场景,除了 map,我们还可以基于 slice 或者数组索引的方式实现另外一种...string 的拼接 当前 Golang 中字符串拼接方式,主要包含: 使用+连接字符串; 使用 fmt.Sprintf; 使用运行时提供的工具类,strings.Builder 或者 bytes.Buffer...目前对+的处理,编译后其处理函数位于 string.go,当要连接的字符串长度>32时,每次会进行空间的分配和拷贝处理,其处理如下: func concatstrings(buf *tmpBuf, a...其他的一些更为详细的测试参见:string连接。

    2K40

    我是如何熟读源码,并到手写实现的

    因为项目需要和面试需求,越来越多的小伙伴想要通过源码来提升自己,因此,我经常会带大家手写一些源码,比如React、Redux、React-Redux、React-Router、Form、Formily等等...授人以鱼不如授人以渔,接下来,我来分享下我是如何从熟读源码,再到手写实现的。 1. 找文档 我们要学习一套源码之前,首先要先了解它是干嘛的,这个时候很多人的第一反应是先上掘金、语雀、知乎等找文档。...示例代码通常在examples文件夹下,这个里可以比较下官方实现与自己实现: 单元测试是验证源码逻辑的代码,如果你对某个API用法不确定准确逻辑,可以去看看单元测试代码或者调试下试试: 3. vscode...比如我想看createForm的实现逻辑,但是不知道代码在哪儿: 排序md的文档和test的测试文件,很容易就能找到了。 5....那写一个吧,写不出来就是不会~ 其实手写我通常是一步步实现,比如先写个最简单的demo,然后把api全部换掉,换成自己手写的,然后再挨个实现,一边看源码,一边整理思路,直到呈现和源码一样的实现。

    56140

    ArrayList和LinkedList如何实现的?我看你还有机会!

    中的具体源码实现,寻找两者的不同之处,最后思考它们使用时的注意事项。...图我就不画了,像下面这样。 ? 双向链表 可以发现链表不必连续内存存储了,因为链表是通过节点指针进行下一个或者上一个节点的,只要找到头节点,就可以以此找到后面一串的节点。...ArratList 上面介绍了线性表的概念,并举出了两个线性表的实际实现例子,既数组和链表。...,它的作用是把从要插入的坐标开始的元素都向后移动一位,这样才能给指定下标腾出空间,才可以放入新增的元素。...总结 不管是 ArrayList 还是 LinkedList 都是开发中常用的集合类,这篇文章分析了两者的底层实现,通过对底层实现的分析我们可以总结出两者的主要优缺点。

    54410

    你知道 HTTP 是如何使用 TCP 连接的吗?今天我就来告诉你!

    1、HTTP 是如何使用 TCP 连接的; 世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的,TCP/IP 是全球计算机及网络设备都 在使用的一种常用的分组交换网络分层协议集。...TCP API 隐藏了所有底层网络协议的握手细节,以及 TCP 数据流与 IP 分组之间的分段和重装细节。 TCP 客户端和服务器是如何通过 TCP 套接字接口进行通信的 ?...上图中说明了可以怎样通过套接字 API 来凸显客户端和服务器在实现 HTTP 事务时所应执行的步骤。 2、TCP 连接的握手 TCP 连接握手需要经过以下几个步骤。如图所示: ?...TCP 慢启动 TCP 数据传输的性能还取决于 TCP 连接的使用期(age)。TCP 连接会随着时间进行自 我“调谐”,起初会限制连接的最大速度,如果数据成功传输,会随着时间的推移提高传输 的速度。...,接下来我分几个内容给大家讲述 HTTP 对连接上的处理。

    4.7K30

    我麻了,京东一面:守护线程如何实现的?

    守护线程的 DaemonTask 会不断地输出消息,模拟后台任务的执行。当主线程结束后,你会注意到守护线程 DaemonTask 不再输出消息,因为它被 JVM 中止了。...(相信很多很多小伙伴遇到这个题都会直接懵,属于低频但重点的考点) 我们看下 JVM 源码 thread.cpp 文件,这里是实现线程的代码。...可以盲猜有一段代码监测着当前非守护线程的数量,不然怎么知道现在只剩下守护线程呢?很有可能是在移除线程的方法里面,跟着这个思路,我们看看该文件的 remove() 方法。...代码如下 我在里面加了一些注释,可以发现,果然是我们想的那样,里面有 _number_of_non_daemon_threads 记录着非守护线程的数量,而且当非守护线程数为 1 时,就会唤醒在 destory_vm...这时候又有一个点需要搞清楚,就是什么时候调用的 destroy_vm() 方法呢?还是通过查看代码以及注释,发现是在 main() 方法执行完成后触发的。

    24120

    我是如何用树莓派 + Docker 轻松实现人脸识别应用的?

    本文使用 https://github.com/ageitgey/facerecognition 开源框架,基于 dlib(Deep Metric Learning)支持人脸识别功能。...facerecognition的应用开发极为简单,只用几行 Python 命令行就可以轻松实现人脸识别应用,而且也提供了树莓派的支持。...cpuset cgroup_memory=1" echo $orig | sudo tee /boot/cmdline.txt sudo reboot 3、安装 Raspberry Camera ,我用的是...基于 examples/facereconraspberry_pi.py 我修改了一个面部识别应用供参考,其实现如下: # This is a demo of running face recognition...最后来晒一下我的树莓派3配置,除了Camera之外还加装了一个液晶显示屏,通过GPIO驱动,可以方便地通过编程来显示CPU/Memory/温度等各种信息。 ?

    2.2K10

    springsecurity框架的学习,根据操作修改后台ssm项目进行学习,实现记住我的功能(实现流程)(九)

    前面已经分析的源码,现在开始说使用流程 1 前端按照人家框架的原则进行书写 name值必须是那个,value的值必须是源码里面的那几个,现在是选择了true ...type="checkbox" name="remember-me" value="true"> 记住 下次自动登录 2 手动开启记住我功能的过滤器...token-validity-seconds="60" remember-me-parameter="remember-me"/> 以上就实现了记住我的功能...NULL, `last_used` timestamp NOT NULL, PRIMARY KEY (`series`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 修改记住我的配置...-- 开启remember me过滤器, data-source-ref="dataSource" 指定数据库连接池 token-validity-seconds="60" 设置token存储时间为60

    41720

    我在B站学知识之小米手机如何查看曾经所有连接过的Wifi密码

    ---- 我在B站学知识之小米手机如何查看曾经连接过WIFI的密码 描述: 在使用小米、红米手机的童鞋,有两种方式获取连接过的WiFi密码: 第一种方式,是非常的简单但是只能查看当前连接到的WIFI密码...第二种方式,是在您想要查看曾经连接过的所有WIFI集齐对应的密码。...方式1.查看并分享当前连接到的WIFI密码 具体操作流程如下所示: 点击设置 点击WLAN 点击当前连接的WIFI(分享密码) 截取带二维码的屏幕 打开小米自带的浏览器 点击右上角的扫码图标...分享当前连接到的WIFI密码 方式2.备份导出手机中所有连接过WIFI的密码 我们可以通过手机自带的备份功能来备份手机的WALN数据,以查看手机中连接过WIFI的所有密码。...具体操作流程如下所示: 点击设置 点击我的设备 点击数据与恢复 (PS: 也可在设置中直接搜索备份与恢复) 选择手机备份恢复 1-4 输入锁屏密码 取消默认勾选只选择其他系统应用数据中的

    1.7K10

    BuildAdmin16:边栏隐藏、页面全屏,我用vue是如何实现的

    前言 弹出框的五个标签功能,重新加载、关闭标签、关闭其他标签、关闭所有标签都已经实现了,现就剩下当前标签全屏标签还没有实现。 在BuildAdmin中,一共实现了两种全屏。...隐藏aside、header 去看aside.vue中菜单栏aside是如何隐藏的。...header和aside同样的实现方式。 这样就实现了header和aisde隐藏、main全屏的功能。接下来就是实现取消全屏。...close-full-screen-on 第三个div(.close-full-screen-on),刚开始看代码的时候,我没明白这个div是干什么的,后来在自己实现这一块代码时,才恍然大悟这个div是用来增加...结语 至此,弹出框的设计和功能实现已经全部完成了,在BuildAdmin管理系统页面设计架构,只剩下导航菜单栏这部分还没有写。

    73700

    【Nginx】如何使用Nginx实现MySQL数据库的负载均衡?看完我懂了!!

    作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,具有精准的定时任务和延迟队列处理功能。...写在前面 Nginx能够实现HTTP、HTTPS协议的负载均衡,也能够实现TCP协议的负载均衡。那么,问题来了,可不可以通过Nginx实现MySQL数据库的负载均衡呢?答案是:可以。...接下来,就让我们一起探讨下如何使用Nginx实现MySQL的负载均衡。...前提条件 注意:使用Nginx实现MySQL数据库的负载均衡,前提是要搭建MySQL的主主复制环境,关于MySQL主主复制环境的搭建,后续会在MySQL专题为大家详细阐述。...192.168.1.100 3306 Nginx实现MySQL负载均衡 nginx在版本1.9.0以后支持tcp的负载均衡,具体可以参照官网关于模块ngx_stream_core_module的叙述

    4.6K20
    领券