微信小程序实现评论功能


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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
jquery中post方法用法实例
Oct 21 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
在 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP编写简单的App接口
2016/08/28 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
Python编写登陆接口的方法
2017/07/10 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python for 循环获取index索引的方法
2019/02/01 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
金融学专业大学生职业生涯规划
2014/03/07 职场文书
合作协议书范文
2014/08/20 职场文书
2014年妇女工作总结
2014/12/06 职场文书
五年级学生评语大全
2014/12/26 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers