评论插件

基于jquery 的评论小插件

github项目地址：https://github.com/fancaixia/jquery-comment

comment.png

    <div class="talk">
        <div class="talk_box">
            <div class="talk_tit">评论</div>
            <textarea name="talk" id="textareaBox" placeholder="写下你的评论..."></textarea>
            <button id="talk_submit">发布</button><button id="cancelbtn" class="cancelbtn hidden">取消</button>
        </div>
        <div id="talk_content" class="talk_content">
                <!-- 动态生成 -->
        </div>
    </div>

let replySize = 3;  //回复默认显示3条  当点击更多 则为评论相关回复total总数
const replyCount = 3; //回复条数大于3  隐藏
const currentUserID = '1';  //当前登录用户   根据用户id判断评论或回复用户是否一致  同一人则可删除
let replyUser = '';   //当点击回复框时  回复目标存储 @XXX
let seeAlltalkID = '';   //点击查看按钮时  储存点击的评论ID

//请求函数封装
let commonfun = {
    request : (url,data,callback,failfun)=>{
        $.ajax({
        url:url,
        type:"post",
        data:data,
        dataType:"json",
        success:(data)=>{
            callback(data)
        },
        fail:(err)=>{
            failfun(err)
        }
        })
    }
}

//发布评论
$('#talk_submit').on('click',function(){
  //提交请求
  let content = $.trim($('#textareaBox').val())
  if(content.length > 0){

    let data = {
      userID:1,
      articleID:0,
      content:content
    };
    commonfun.request(serverApi.addTalk,data,addTalkfun,addTalkFail)

  }else{
    //提示层
    tipObj.setErrmsg('请输入评论内容',1);
  }
})

//删除评论
$('#talk_content').on('click','#talk_remove',function(){
  let id = $(this).parents('.comment').attr('data-id')

  let data = {
    id:id,
  }
  commonfun.request(serverApi.removeTalk,data,removeTalkfun,removeTalkFail)
})

//发布回复     截取 replyUser（@aaaa）
$('#talk_content').on('click','#talk_submit_s',function(){

  let content = ($.trim($('#textareaBox_s').val())).replace(replyUser,'')
  let talkID = $(this).parents('.comment').attr('data-id')

  if(content.length > 0){

    let data = {
        talkID:talkID,
        content:content,
        fromID:'1',
        toID:'1'
    }
    commonfun.request(serverApi.addreply,data,replyfun,replyfail)

  }else{
    tipObj.setErrmsg('请输入评论内容',1);
  }

}) 

//删除回复
$('#talk_content').on('click','#reply_remove',function(){

  let id = $(this).parents('.one_reply').attr('data-id')
  let data = {
    id:id
  }
  commonfun.request(serverApi.removereply,data,removeReplyfun,removeReplyfail)
})

comment_static 前台页面
comment_mysql_server node+mysql数据库查询
comment_server node模拟数据库生成数据

node服务启动

npm / cnpm install
node app ( 若启动项目失败，先删除node_modules 然后在install )

node服务启动

猜你喜欢