微信小程序实现评论功能


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的高性能TreeView(asp.net)
Feb 23 Javascript
javascript实现简单的进度条
Jul 02 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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 更新数据库中断的解决方法
2009/06/05 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
使用php清除bom示例
2014/03/03 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
js图片模糊切换显示特效的方法
2015/02/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JavaScript知识点整理
2015/12/09 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
浅析Python中return和finally共同挖的坑
2017/08/18 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python中is和==的区别详解
2018/11/15 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
安全大检查反思材料
2014/01/31 职场文书
2014年个人年终总结
2015/03/09 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
阿凡达观后感
2015/06/10 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
详解Django的MVT设计模式
2021/04/29 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Log4j.properties配置及其使用
2021/08/02 Java/Android
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server