微信小程序实现评论功能


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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
Angular的$http与$location
2016/12/26 Javascript
浅谈node的事件机制
2017/10/09 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
python3实现ftp服务功能(客户端)
2017/03/24 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python的几种主动结束程序方式
2019/11/22 Python
Python读取表格类型文件代码实例
2020/02/17 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
护士检查书
2014/01/17 职场文书
求职信怎么写
2014/05/23 职场文书
邓小平理论心得体会
2014/09/09 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
python计算列表元素与乘积详情
2022/08/05 Python