微信小程序实现评论功能


Posted in Javascript onNovember 28, 2018

本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下

前端

<textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76">
 </textarea>
<view class='the_prw_btn' bindtap='btn_send'>
 留言
</view>
 
<view>评论内容:</view>
 <block wx:for="{{pl_list}}" wx:key="index">
  <view class='the_msg' wx:if='{{item.input_value!=null}}'>
    <!-- <view class='msg_left'>
  <view class='msg_avatar_v'>
 <image class='msg_avatar' src='{{msg_data.avatar}}'></image>
 </view>
</view> -->
<view class='msg_right'>
 <!-- <view class='msg_right_name'>
   {{msg_data.nicename}}
 </view> -->
<view class='msg_right_text'>
 <text>{{item.input_value}}</text>
  </view>
   <view class='gap'>
   </view>
    </view>
   </view>
</block>

js: 默认展示历史评论,评论后也刷新页面,连带此次评论内容一起展示。

var bindblur ;
Page({
 bindblur:function(e){
 console.log('1111111:', e.detail.value)
 bindblur = e.detail.value;
 },
 
 onLoad: function (a) {
 var that = this;
 actid = a.id;
 // 查询评论fetch
 wx.request({
 url: 'https://m.yishushe.net/addons/up_text.php',
 method: 'POST',
 header: {
 'content-Type': 'application/x-www-form-urlencoded',
 'Accept': 'application/json'
 },
 data: {
 act_id: actid
 },
 success: function (result) {
 that.setData({
  pl_list: result.data.reverse(),
 })
 },
 fail: res => {
 wx.showToast({
  title: '网络不好哟',
  image: '/image/wrong.png',
  duration: 3000
 })
 }
 })
},
 btn_send: function () {
 var that = this
 //添加评论
 console.log('文章id:act_id :', actid);
 console.log('用户缓存id:user_id :', user_id);
 console.log('文本输入框: input_value :', bindblur);
 wx.request({
 url: 'https://m.yishushe.net/addons/up_text.php',
 method: 'POST',
 header: {
 'content-Type': 'application/x-www-form-urlencoded',
 'Accept': 'application/json'
 },
 data: {
 act_id: actid,
 user_id: user_id,
 input_value: bindblur
 },
 success: function (result) {
 that.setData({
  pl_list: result.data.reverse(),
  input_value: "",
 })
 },
 fail: res => {
 wx.showToast({
  title: '网络不好哟',
  image: '/image/wrong.png',
  duration: 3000
 })
 }
 })
 }
})

后端php 源码:

<?php
 header("Content-Type:text/html;charset=utf8"); 
 header("Access-Control-Allow-Origin: *"); //解决跨域
 header('Access-Control-Allow-Methods:POST');// 响应类型 
 header('Access-Control-Allow-Headers:*'); // 响应头设置 
 $link=mysql_connect("localhost","root","root"); 
 mysql_select_db("weiqing", $link); //选择数据库
 mysql_query("SET NAMES utf8");//解决中文乱码问题
 //$username = $_POST['username'];
 //$avatarUrl = $_POST['avatarUrl'];
 $act_id = $_POST['act_id'];
 if($_POST['input_value']){
 $user_id = $_POST['user_id'];
 $input_value = $_POST['input_value'];
 //echo $avatarUrl."----time:". $time."----iv:".$iv."----inputValue:". $inputValue;
 //插入数据到数据库 
 $strsql = "insert into pinglun (act_id,user_id,input_value) values('$act_id','$user_id','$input_value')";
 //mysql_query() 函数执行一条 MySQL 查询。SELECT,SHOW,EXPLAIN 或 DESCRIBE 都需要用这个函数执行
 $result = @mysql_query($strsql);
 
 }
 
 $q = "SELECT * FROM pinglun"; //SQL查询语句 SELECT * FROM 表名
 $rs = mysql_query($q); //获取数据集
 if(!$rs){die("数据库没有数据!");}
 
 //循环读取数据并存入数组对象
 $dlogs;$i=0;
 while($row=mysql_fetch_array($rs))
 {
 if($act_id ==$row["act_id"]){
 $dlog["act_id"]=$row["act_id"];
 $dlog["user_id"]=$row["user_id"];
 $dlog["input_value"]=$row["input_value"];
 }
 //$dlog["avatarUrl"]=$row["avatarUrl"];
 //$dlog["username"]=$row["username"];
 $dlogs[$i++]=$dlog;
 }
 
 
 //以json格式返回html页面
 
 echo urldecode(json_encode($dlogs));
?>

如果php返回报错就找到php-ini 配置文件 ,把

display_errors = On
改为
display_errors = Off

禁止php报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
让table变成exls的示例代码
Mar 24 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 #Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
You might like
php文件上传简单实现方法
2015/01/24 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
python修改操作系统时间的方法
2015/05/18 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python实现简单的购物程序代码实例
2020/03/03 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
Shell编程面试题
2012/05/30 面试题
审核会计岗位职责
2013/11/08 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
武侯祠导游词
2015/02/04 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
Python实现机器学习算法的分类
2021/06/03 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python