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

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

显示效果就是这样的
file

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

准备

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

当然,你可以把他们下载到本地再引入到模板文件里就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...
转载请注明出处!

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
Good Good Study , Day Day Up!!
本帖由 Summer 于 5年前 加精
Jourdon
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 57
JaguarJack

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

5年前 评论

好东西,谢谢分享

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论
JaguarJack

@Jourdon :joy:

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论
oyghan

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

5年前 评论
幽弥狂

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

确实如此。。

5年前 评论
ThinkQ

很好啊

5年前 评论
luphp_安轮粉丝

@茄子 点赞,并测试

5年前 评论
SD

实用 谢谢分享!

5年前 评论
Destiny

:+1: :kissing_heart:

5年前 评论

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

5年前 评论
Jourdon

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

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

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

5年前 评论

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

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论

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

5年前 评论

@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','成功回复。');

}
5年前 评论
Jourdon

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

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

5年前 评论
Jourdon

@joylee109 这是个好方法

5年前 评论

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

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论

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

5年前 评论

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

file

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

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

5年前 评论
Jourdon

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

5年前 评论
Jourdon

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

5年前 评论
Jourdon

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论

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

5年前 评论
Jourdon

@Mr_lan 你是说LC?

5年前 评论

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

5年前 评论
Jourdon

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

5年前 评论
装逼侠

好棒棒

5年前 评论

用作者推荐的 js 组件实现了一个 链接:在教程二的基础上添加了 @ 和搜索等功能 :stuck_out_tongue_winking_eye:

5年前 评论
sushengbuhuo

很6

5年前 评论

file已经实现了,具体代码在这里,如果觉得有帮助,麻烦给个star,谢谢。有问题可以持续讨论

https://github.com/laravel-kits/larabbs/co...

5年前 评论
SZL_ 4年前

我给接口路由加入了 throttle中间件,发现:在回复框里美@一次,会调用两次接口路由。
->middleware('throttle:10,1');
实际上,每分钟只能调用5次,输入第六个@的时候,无返回值。
为什么@一次,会调用两次接口?

4年前 评论
Jourdon

@Bing_c 如果是在构造函数中加的中间件会调用两次的,先走了构造再去走的路由中间件,不知道你加在哪里了

4年前 评论

@Jourdon Route::get('usersjson','UsersController@usersjson')->middleware('throttle:10,1');
构造函数,里面只写了判断是否登录。
感觉是这个插件的问题,当然,我瞎猜的。。 :joy:

4年前 评论

如果我只想@的时候列出帖子中回复过得用户 该怎么做

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!