这是你想要的 @ 某人的功能
259

是时候给博客加个新功能了,比如@某人 。
这个功能应该说在回复中使用比较多。比如这样的。
file

显示效果就是这样的
file

这是我在本地随便发的几条评论,从这个评论里,你可以清楚的看到每一条回复是回复给谁的,当然,@谁就是回复给谁。
ok,我们现在开工吧,。

准备

要做某一个功能前,程序员最喜欢的是 百度、谷歌、github,果然,github 上已经有很多人帮我们实现了,虽然 github 被微软收购了,很多人吵着要逃离 github,我就不明白了,你一天吃着20块不到的午餐,操心别人上百亿的生意干嘛?
废话真多,总之,我找到了它 ichord/At.js, 这里 可以查看例子,效果不错。我们只需要三个文件就可以了。
css : https://github.com/ichord/At.js/raw/master/dist/css/jquery.atwho.min.css
js :https://github.com/ichord/At.js/raw/master/dist/js/jquery.atwho.min.js
js:https://github.com/ichord/Caret.js/raw/master/dist/jquery.caret.min.js

当然,你可以把他们下载到本地再引入到模板文件里就OK了。

测试功能

文档给了一个很简单的例子

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>
$('#inputor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

这里的前提是你要有一个 textarea 或者 input
看效果
file

效果就出来了。

实现

大概的样式出来了,剩下的就是实现功能了,
js文件

$('#inputor').atwho({
  at: "@",
  callbacks: {
    remoteFilter: function(query, callback) {
      $.getJSON("/usersjson", {q: query}, function(data) {
        callback(data)
      });
    }
  }
});

这里使用了callbacks下的 remoteFilter,也就是从远程获取数组给到jsjs会自动把他显示到弹窗里。但是这里要注意,远程返回的是json格式。
routes/web.php

Route::get('usersjson','UsersController@usersjson')->name('users.json');

app/Http/Controllers/UsersController.php

public function usersjson(Request $request)
    {
        $name = $request->q;
        $users  =User::where('name','like',$name."%")->pluck('name')->toArray();
        return response()->json($users);
    }

这里我只是简单写了个功能,具体实现逻辑可根据你的需求进行更改。
看下效果
file

现在所有功能就算实现了。

PS

这里只是简单的介绍了一下使用方法。你可以进行扩展,

比如某用户@过的用户名数组可以在本地和后台都存上一份,这样直接从缓存中读取速度要快得多。
比如在发送回复后,给@的某人发送消息提醒或是邮件通知等等。

更多功能等你实现。

有好的想法请留言给我。

有同学问我具体实现,可以直接去看我的博客源码,虽然代码很烂,但也要记得Star!
github:https://github.com/jourdon/qiehe

作者: Jourdon
本文地址: https://www.qiehe.net/posts/7/this-is-what-you-want-at-someones-function
转载请注明出处!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
file

Good Good Study , Day Day Up!!

本帖由 Summer 于 4个月前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 52

我一直找这插件没找到 :grinning:

4个月前
BradStevens

好东西,谢谢分享

4个月前
Jourdon

@JaguarJack 所以标题没起错,确实是你想要的。

4个月前

:+1: 少了一步:给 @ 的用户加上跳转到个人中心的链接

4个月前

还剩一步正则匹配评论内容获取用户并通知 :blush:

4个月前
Jourdon

@LiLiKiLL 后台的逻辑就看大家发挥了

4个月前

刚想睡觉就递了个枕头过来,十分感谢。

4个月前

正好,今晚给它加上。谢谢:smile:

4个月前

如果用户昵称是可以重复的,只有用户id是唯一的,这个时候该怎么处理呢

4个月前
Jourdon

@生活无限好 看你的个人需求,简单来说,就是需要你把昵称和用户id或者用户简介关联起来一起显示出来,这样@时就可以选择你要选择的人,不知道能不能帮到你。

4个月前
oyghan

非常实用的一个功能,谢谢分享。

4个月前

我就不明白了,你一天吃着20块不到的午餐,操心别人上百亿的生意干嘛?

确实如此。。

4个月前

很好啊

4个月前
luphp_安轮粉丝

@茄子 点赞,并测试

4个月前
SD

实用 谢谢分享!

4个月前
Destiny

:+1: :kissing_heart:

4个月前

大佬,请问回显要怎么处理?我现在也是在为这个烦恼,用的vue-at https://github.com/fritx/vue-at

4个月前
Jourdon

@sethhu 我可不是什么大佬,你可以去看下 ichord/At.js 的文档中的callback,也就是我上面给出的那段js代码。

$('#inputor').atwho({
  at: "@",
  callbacks: {
    remoteFilter: function(query, callback) {
      $.getJSON("/usersjson", {q: query}, function(data) {
        callback(data)
      });
    }
  }
});

这里的data就是回显的数据。

4个月前

@truesnow 对的,怎么给用户名带上连接啊?

4个月前

@Jourdon 怎么给用户名带上连接呢?

4个月前
Jourdon

@赖皮小鳄鱼 后台通过正则去匹配到用户名,数据库查找是否有这个用户,有的话替换加上链接存到数据库。

4个月前

@Jourdon 我也是这么想的,刚在这上面测试了下,应该也是这么操作的。谢谢啊

4个月前
joylee109

@赖皮小鳄鱼 还有一种做法,在前端通过js 的正则表达式进行匹配 @user ,将users 加上链接user 然后在jump 方法中去搜索用户的真是链接,在进行redirect() 的302 操作。
在fly.layui.com 的回复评论中就是就是这么做的。

4个月前

@joylee109 @Jourdon
我是在后端进行查找替换的,可能比较笨,还有就是只能给一个@用户带上链接。

// php截取指定两个字符之间字符串 
function get_between($input, $start, $end) {
    $substr = substr($input, strlen($start)+strpos($input, $start),(strlen($input) - strpos($input, $end))*(-1));
    return $substr;
}

//这是后端保存
public function store(ReplyRequest $request,Reply $reply)
{
    $username = get_between($request->text,'@',' ');
    $uid = User::where('name',$username)->pluck('id')->toarray();
    $replace = "<a href='/users/".$uid[0]."' title='"."$username'>@".$username."</a>";
    $content = str_replace('@'.$username,$replace,$request->text);
    $reply->content = $content;
    $reply->user_id = Auth::id();
    $reply->topic_id = $request->topic_id;
    $reply->save();
    return redirect()->to($reply->topic->link())->with('success','成功回复。');

}
4个月前
Jourdon

@赖皮小鳄鱼 只@一个人是没问题了,但是如果@两个人呢?

还有,替换后的结果你有测试吗,@符号似乎没有了。

4个月前
Jourdon

@joylee109 这是个好方法

4个月前

@Jourdon 丢了个@符号,我已经修改了。

4个月前

@Jourdon 编辑器里面假如只显示用户的昵称,这样怎样提交的时候怎样获取到昵称对应的id呢,或者有没有其他的思路

4个月前
Jourdon

@生活无限好 评论里已经写了思路。

4个月前

:stuck_out_tongue_closed_eyes: Vue 版的 Textcomplete,了解一下。

4个月前

这几天就在搞这个,你真棒,关注了 :kissing_heart:

4个月前

@Jourdon 想了解一下 @ 的时候不是需要把昵称放到编辑器的输入框里面吗

file

比如这样的,这个时候有没有什么办法可以将 昵称 和 id 对应提交呢,如果在昵称后面加上昵称 如: @Jourdon(ID:123)

这样去提交,有个问题就是如果有人的昵称就是这样的时候,我在处理的时候可能会出问题

4个月前
Jourdon

@生活无限好 昵称要和ID对应就直接查数据库啊,这会有什么问题?

4个月前

厉害哦

4个月前
Jourdon

@鲁初雪 你也很历害哦,真希望这是你的真名 :smirk:

4个月前

很赞哦 :+1:

4个月前
Jourdon

@JokerLinly 哇,会长大人还亲自回复的啊,厉害了!

4个月前
Jourdon

@Prefect丶 现在可以通知多个人了,并且根据作者和@的人发送不同的通知,可以参考github源码,

4个月前

@Jourdon 老哥解决速度真快

4个月前

@Jourdon 不是服务端的问题,而是前台页面展示的问题,怎样把昵称和id对应提交到服务器

4个月前
Jourdon

@生活无限好 我没明白你意思,在textarea里@别人时只知道昵称,不知道ID,ID需要去后端取,

4个月前

@Jourdon 如果不是提交的时候有 id ,后台是不知道要操作哪个 id 的

4个月前
Jourdon

@生活无限好 什么意思?我在@你的时候,我只能看到你的名子,那我就没办法@你了?我还要知道你的ID才能@你吗?

4个月前

:joy:

3个月前

这个跟当前网站的是不是有差异啊,感觉当前网站只能@ 作者跟评论过的人? @Mr_lan 试试

3个月前
Jourdon

@Mr_lan 你是说LC?

3个月前

@Jourdon 是的,@的时候弹出的框是跟当前文章有关系的

3个月前
Jourdon

@Mr_lan 这个功能可以自己完善嘛,比如曾经@过的人,有对话的人,当然文章评论过的人,看个人需求嘛

3个月前
装逼侠

好棒棒

3个月前

用作者推荐的 js 组件实现了一个 https://laravel-china.org/topics/15832 :stuck_out_tongue_winking_eye:

2个月前
sushengbuhuo

很6

2个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!