微信小程序文章评论

最新推荐文章于 2022-10-17 18:22:07 发布
最新推荐文章于 2022-10-17 18:22:07 发布
阅读量238 收藏 1
点赞数
文章标签： 小程序 微信 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcbzcb52/article/details/120405450
版权

  后台

class ArticleController
{
    //

    /**
     *注释:  文章列表
     *用户名：过客
     *日期：2021/9/17
     *时间:20:51
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */
    public function articleList()
    {

        $data=Article::select();
        if ($data){
         return returnAjaxData(1,$data,'查询成功');
        }else{
            return returnAjaxData(0,'','查询失败');
        }
    }

    /**
     *注释:  文章详情
     *用户名：过客
     *日期：2021/9/17
     *时间:20:51
     * @param Request $request
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */

    public function articleGet(Request $request)
    {
        $data=Article::where('id',$request['id'])->find();
        $coms=Comment::with(['user'])->where('article_id','=',$data['id'])->select()->toArray();
           $com=order($coms);
        
        return json(['code'=>200,'data'=>$data,'com'=>$com,'msg'=>'ok']);
    }


    /**
     *注释: 文章评论
     *用户名：过客
     *日期：2021/9/18
     *时间:11:06
     * @param Request $request
     */

    public function articleComment(Request $request)
    {
        $param=$request->param();
        $param['uid']=$request->uid;
        $dataRes=Comment::create($param);
        if ($dataRes){
            return returnAjaxData(1,$dataRes,'评论成功');
        }else{
            return returnAjaxData(0,'','评论失败');
        }
    }

    /**
     *注释:文章评论展示
     *用户名：过客
     *日期：2021/9/19
     *时间:15:08
     * @param Request $request
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */
    public function articleFind(Request $request)
    {
        $id=$request['id'];
        $data=Comment::where('id',$id)->find();
        if ($data){
            return returnAjaxData(1,$data,'查询成功');
        }else{
            return returnAjaxData(0,'','查询失败');
        }

    }

    /**
     *注释: 文章回复评论
     *用户名：过客
     *日期：2021/9/18
     *时间:13:52
     * @param Request $request
     */
    public function articleGo(Request $request)
    {

        $data=$request->param();
        $data['uid']=$request->uid;
        $dataRes=Comment::create($data);
        if ($dataRes){
            return returnAjaxData(1,$dataRes,'回复成功');
        }else{
            return returnAjaxData(0,'','回复失败');
        }

    }

public function articleLike(Request $request)
{
    //文章的id
  $id=$request->param('article_id');
    //用户id
   $uid=$request->uid;
    //查询一条数据 查询有没有 文章id 以及用户id
    $arr = Like::where('article_id', $id)->find();
    //如果没有就添加入库 点赞成功 并且点赞数量加1
    if (empty($arr)) {
        $arr['article_id'] = $id;
        $arr['uid'] = $uid;
        $res = Like::create($arr);
        //添加结果
        if ($res) {
            $arr = Like::where('article_id', $id)->find();
            $data=Like::where('article_id', $id)->update(['number' => $arr['number'] + 1]);
            return json(['code' => 200, 'msg' => '点赞成功', 'data' => $data]);
        } else {
            return json(['code' => 400, 'msg' => '点赞失败', 'data' => null]);
        }
    } else {
        //如果点赞过了就取消点赞删除这个点赞记录
        $del = Like::where('article_id', $id)->delete();
        if ($del) {
            return json(['code' => 300, 'msg' => '取消成功', 'data' => $id]);
        } else {
            return json(['code' => 500, 'msg' => '取消失败', 'data' => null]);
        }

    }
}


public function like(){
        $dataRes=Like::select();
        if ($dataRes){
            return returnAjaxData(1,$dataRes,'查询成功');
        }else{
            return returnAjaxData(0,'','查询失败');
        }

}

}

前台


<block wx:for="{{articlelist}}" wx:key="item">

  <l-card type="primary"  image="{{item.image}}">
       <view >标题：<text class="a">{{item.title}}</text></view>
        <!-- 此处为content -->
        <view class="content">
         内容：{{item.coment}}
        </view>
        <view>
       浏览数量:{{item.page}}
        </view>
      <navigator url="/pages/detail/detail?id={{item.id}}">
    
        <l-button type="default">详情</l-button>
      </navigator>
    
    </l-card>
  
</block>



 data: {
    articlelist:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    wx.request({
      url: 'http://www.tp1.com/api/articleList',
      header:{  
        	 'token':wx.getStorageSync('token')
      		 },
      success:res=>{
        this.setData({
          articlelist:res.data.data
        })
      }
    })

  },


<l-card type="avatar"l-class="card"  image="{{detail.image}}"
    title="{{detail.title}}" describe="18个小时前">
        <!-- 此处为content -->
        <view class="avter-content">
        {{detail.coment}}
        </view>
        <view class="avter-share-container">
        </view>
  </l-card>


    <view> <l-button bindtap="fabulous">点赞<view>
    {{like}}
    </view></l-button></view>





<block  wx:for="{{com}}">

<view>
   <view wx:if="{{item.pid==0}}"> <navigator url="/pages/reply/reply?id={{item.id}}"> 用户评论:{{item.text}}</navigator></view>
   <view wx:else>
   
    客服回复评论:{{item.text}}
   
  </view>
</view>
</block>
  

  <l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
    <l-form-item label="评论内容:" name="text">
        <l-textarea id="text" bind:lininput="text"  />
    </l-form-item>
 
    <view slot="submit">
        <l-button>提交评论</l-button>
    </view>
</l-form>


Page({

  /**
   * 页面的初始数据
   */
  data: {
   detail:[],
   com:[],
   like:'',

   text:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    let id=options.id
    wx.request({
      url: 'http://www.tp1.com/api/articleGet',
      data:{id:id},
      header:{ 
        	 'token':wx.getStorageSync('token')
    		 },
      success:res=>{
        this.setData({
         detail:res.data.data,
         com:res.data.com
        })
      }
    })
  },

  text(e){
    this.setData({
      text:e.detail.value
    })
  },

  submit(e){
    console.log(e)
    let id=this.data.detail.id
    wx.request({
      url: 'http://www.tp1.com/api/articleComment',
      data:{
              text:this.data.text,
              article_id:this.data.detail.id,
      },
      method:"post",
      header:{'token':wx.getStorageSync('token')},
      success:res=>{
          //     console.log(res);
              if(res.data.code==200){
                      wx.navigateTo({
                        url:"/pages/detail/detail?id="+id
                                            })
              }
      }
    })

  },

  fabulous(e){
 
   wx.request({
     url: 'http://www.tp1.com/api/articleLike',
     header:{
      'token':wx.getStorageSync('token')
     },
     data:{
      article_id:this.data.detail.id,
     },

     success:res=>{
       if (res.data.code==200) {
        wx.request({
          url: 'http://www.tp1.com/api/like',
          success:ret=>{
            this.setData({
              like:ret.data.data[0].number
            })
          }
        })
       }else{
         if (res.data.code==300) {
          wx.request({
            url: 'http://www.tp1.com/api/like',
            success:ret=>{
              this.setData({
                like:ret.data.data
              })
            }
          })
         }
       }
     }
   })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.lin.initValidateForm(this)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
<block>
  <view>用户评论:{{replys.text}}</view>
</block>

<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
    <l-form-item label="回复内容:" name="text">
        <l-textarea id="text" />
    </l-form-item>
 
    <view slot="submit">
        <l-button>回复评论</l-button>
    </view>
</l-form>



// pages/reply/reply.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    replys:[],
  },

  reply(e){
    console.log(e);
    this.setData({
      reply:e.detail.value
    })
  },


  submit(e){
    console.log(e.detail.values.text)
    let  text = e.detail.values.text;
    wx.request({
      url: 'http://www.tp1.com/api/articleGo',
      data:{text:text,pid:this.data.replys.id,article_id:this.data.replys.article_id},
      method:"post",
      header:{'token':wx.getStorageSync('token')},
      success:res=>{
        console.log(res)
        if(res.data.code=200){
          wx.navigateTo({
            url: '/pages/detail/detail',
          })
        }
    }
    })
   

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.lin.initValidateForm(this)
    let id=options.id
    
    wx.request({
      url: 'http://www.tp1.com/api/articleFind',
      data:{id:id},
      header:{
        'token':wx.getStorageSync('token')
      },
      success:res=>{
        console.log(res.data.data)
        this.setData({
          replys:res.data.data
        })
      }

    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

꧁❦༺过客༻❦꧂
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发——评论功能
qq_44645934的博客
03-05 6664
微信小程序开发——评论功能
微信小程序|做一个底部评论视图
IDE不报错的博客
08-02 2961
使用微信小程序开发工具做一个和微信一样的评论视图：     首先我们捋一下这个视图的结构： 黑色的容器最大  包含三个横向 并列的三个红色的容器  第一个红色的容器包含两个橘色的纵向并列的容器。 这样，index.wxml文件就可以写出来了 &lt;view class="comment_release" &gt; &lt;view class="left"&gt; ...
微信小程序 点赞+评论（无限级评论回复）/带图评论解决方案
lx3gp的博客
07-14 1万+
最近接到一个项目需求：文章可以评论，并且是无限级带图评论，简而言之就是点赞+评论（无限级评论回复）/带图评论。初次接到这个需求疑惑了很久，由于自己接触小程序时间很短，对小程序机制也了解的很肤浅，所以就按照自己的想法做了一个基础的框架版本出来，里面有些内容还希望有高人指点一下，如果有大能能把它封装为插件，那就再好不过有了。
微信小程序开发入门第七章：收藏、评论、点赞及计数功能
qq_36936876的博客
03-25 5万+
    本章内容有一定的难度，但其中的技巧和知识还是很丰富的。本章通过编写几乎所有内容型应用都会附带的“评论”“点赞”“阅读计数”“收藏”等功能，来学习使用小程序的交互反馈组件、缓存的应用、图片选择和预览、屏蔽关键字、录音、拍照以及播放录音等功能7.1　收藏、评论、点赞、计数功能准备工作7.1　收藏、评论、点赞、计数功能准备工作接下来我们将要连续实现4个非常有意思的功能，这些功能在内容型应用中是非...
小程序如何跳转到公众号文章中
weixin_64493170的博客
10-17 4259
如何在小程序中跳转到公众号文章
微信小程序文章详情页面实现代码
10-18
主要介绍了微信小程序文章详情页面实现代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序文章列表功能完整实例
10-15
以下是一个关于如何实现微信小程序文章列表功能的详细解析。 首先，我们需要理解微信小程序的基本结构。微信小程序由WXML（WeChat Markup Language）和WXSS（WeChat Style Sheet）文件组成，它们分别负责页面的结构...
微信小程序文章详情功能完整实例
11-20
本文实例讲述了微信小程序文章详情功能。分享给大家供大家参考，具体如下： 接着上一篇 https://www.jb51.net/article/187900.htm list.js 首先获取文章的id，因为我们的数据是假数据所以用key值作为文章id ...
微信小程序期末大作业-手机商城微信小程序
12-15
微信小程序期末大作业-手机商城微信小程序（免积分下载） 含底部导航，轮播图等等，小程序运行截图请看我的文章介绍：https://blog.csdn.net/weixin_43474701/article/details/135025795
微信小程序官方小程序示例源码
最新发布
12-18
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动端，特别是智能手机用户。它允许开发者在微信内创建并发布功能丰富的应用程序，而无需通过应用商店进行下载安装。"微信小程序官方小程序示例...
微信小程序实现简单评论功能
10-17
主要为大家详细介绍了微信小程序实现简单评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现评论功能
01-03
本文实例为大家分享了微信小程序实现评论功能的具体代码，供大家参考，具体内容如下 前端 <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing=130 placeholder='\u8bf4\u70b9\u4ec0\u4e48\u5427...' maxlength=76> </textarea> 留言 评论内容： <view cl
微信小程序模仿豆瓣电影评论
10-11
用微信小程序模仿豆瓣电影评论demo，大家可以运行后将之修改，做成自己想要的样子
微信小程序-点击内容展开隐藏评论文章等
叉叉敌的博客
11-01 2366
背景 在网上看到很多这样的，有很多这样的例子。 https://gitee.com/dggy/expendable/tree/master 比如上面这个大哥就是用的非常好的，但是有点冗余 在来看看这个，下面是效果图，可以参考下面的连接 https://www.jb51.net/article/141882.htm 实际方案 需要一个简单的，默认显示问题是一部分，点击后，显示的是全部的内...
微信小程序 评论留言功能实现 仿知乎
热门推荐
melon__的博客
08-30 7万+
  最近沉迷学习无法自拔，太久没有码字，码一个小程序留言功能实现。先上一波最后效果图： （删除按钮，是用户自己的留言时才会显示该按钮） 实现技术   后台：SSM框架   数据库：MySQL数据库 数据库设计   评论功能的实现主要涉及三个表 comment：存储留言评论信息，表结构如下： 表中，必须的字段：id，user_id，reply_comment_id，comme...
小程序 发表评论功能
Acitylion的博客
06-23 1万+
工作日志  随手笔记  仅供参考1.点击发表按钮 判断内容是否为空 如果为空提示请输入内容2.如果内容不为空 将评论框里输入的内容的值传入评论列表&lt;view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}"&gt; &lt;button class='rev...
小程序笔记（四）发表评论或者普通发帖
as66708的博客
09-23 8506
做个简单的wxml页面 &lt;view class='by'&gt; &lt;view class='sct'&gt;发表您的评论&lt;/view&gt; &lt;view class='sccv'&gt; &lt;textarea placeholder='请输入评论内容' minlength="{{min}}" maxlength="{{max}}" class='sc
天猫评论爬取&LDA主题聚类实现（全过程代码）
dingbangchu的博客
03-08 2535
import pandas as pd import requests import re import time from snownlp import SnowNLP import io import sys from collections import Counter import jieba from matplotlib import pyplot as plt import wordcloud import warnings from gensim import corpora, model.
小程序 跳转 公众号 文章
若孑似独
06-04 2872
1.通过组件 web-view https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html <web-view src="https://mp.weixin.qq.com/s/Cz4x4QpvF_Pozn7xjYOVyw"></web-view> 2.如果是关联好小程序的公众号 1.如果是 左图文章 都是 https://mp.weixin.qq.com 域名 ，关联公众号 后 无需 添加到
微信小程序实现的课堂考勤管理系统
本篇文章深入探讨了基于微信小程序的课堂考勤管理系统的设计与实现。在当前互联网环境下，传统的课堂管理方式已经不能满足需求，而微信小程序凭借其轻便、易用的特点，成为了解决这一问题的理想方案。系统的核心功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值